未加载本地字体声明 Italic/Bold
Local Font Declaration Not Loading Italic/Bold
我知道这里有很多关于使用字体加载字体的问题,但是我已经检查了所有(或至少检查了很多)但似乎没有任何效果...
@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,在页面源代码中我可以看到 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 加粗。请有这方面知识的人随时详细回答以领取赏金。
更新
已提供答案,即本地声明可以保留!
您遇到的问题是因为您告诉它查找相同的本地字体文件,而不是为每个实例定义 weight/font-style。
尝试在src: local
中添加font-weight/style 例如:
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'),
我知道这里有很多关于使用字体加载字体的问题,但是我已经检查了所有(或至少检查了很多)但似乎没有任何效果...
@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,在页面源代码中我可以看到 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 加粗。请有这方面知识的人随时详细回答以领取赏金。
更新
已提供答案,即本地声明可以保留!
您遇到的问题是因为您告诉它查找相同的本地字体文件,而不是为每个实例定义 weight/font-style。
尝试在src: local
中添加font-weight/style 例如:
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'),