如何解决本地字体声明未加载斜体/粗体
我知道这里有很多关于使用字体加载字体的问题,但是我已经检查了所有字体(或者至少检查了很多),而且似乎没有任何作用...
@font-face {
font-family: 'Open Sans';
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF;
src: local('Open Sans'),url('../../fonts/open-sans/open-sans-regular.woff2') format('woff2'),url('../../fonts/open-sans/open-sans-regular.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: U+000-5FF;
src: local('Open Sans'),url('../../fonts/open-sans/open-sans-italic.woff2') format('woff2'),url('../../fonts/open-sans/open-sans-italic.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF;
src: local('Open Sans'),url('../../fonts/open-sans/open-sans-bold.woff2') format('woff2'),url('../../fonts/open-sans/open-sans-bold.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-weight: 700;
font-style: italic;
font-display: swap;
unicode-range: U+000-5FF;
src: local('Open Sans'),url('../../fonts/open-sans/open-sans-bold-italic.woff2') format('woff2'),url('../../fonts/open-sans/open-sans-bold-italic.woff') format('woff');
}
//End Open Sans
然后我使用以下命令加载脚本:
wp_enqueue_style( 'font-open-sans',get_template_directory_uri().'/assets/scss/css/open-sans.css',false,NULL,'all');
控制台未抛出404,并且在Page Source中,我可以看到css文件已正确加载。但是,当尝试使用font-weight: bold; font-weight: 700; font-style: italic;
时,什么也没有发生,只是保持正常。
文件结构:
- theme
> assets
> fonts
> open-sans
> open-sans-italic.woff
> open-sans-italic.woff2
> scss
> css
> open-sans.css
更新
检查检查器的样式选项卡后,我可以看到该行被调用了,但是它有一行通过(但是直到默认的浏览器font: inherit
代码都没有被覆盖。
还要注意,它在Safari中正确显示为粗体,但在Chrome浏览器中未显示为粗体。即使两者都显示划掉了。
包含这两种文件类型意味着只要版本早于2014年,所有浏览器都可以提供字体。我的chrome是80.0.3987.132,所以我知道这不是版本问题。
https://caniuse.com/?search=woff https://caniuse.com/?search=woff2
更新
已通过删除local('Open Sans')
我检查了我的mac,发现我安装了许多TTF文件,它们的名称不匹配。我不作答,因为我不明白为什么Chrome仍然不能用粗体显示,而Safari却可以用粗体显示。请对此有所了解的人随时详细回答以获取赏金。
更新
已提供答案,这意味着可以保留本地声明!
解决方法
您面临的问题是因为您已告诉它寻找相同的本地字体文件,而不是为每个实例定义粗细/字体样式。
例如尝试在src: local
中添加字体粗细/样式:
src: local('Open Sans 400'),//Regular
src: local('Open Sans 400i'),//Regular Italic
src: local('Open Sans 700'),//Bold
src: local('Open Sans 700i'),//Bold Italic
或者您可以使用:
src: local('Open Sans'),src: local('Open Sans Italic'),src: local('Open Sans Bold'),src: local('Open Sans Bold Italic'),
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。