时间戳

首页 > 解决方案 > 本地字体声明未加载斜体/粗体

css - 本地字体声明未加载斜体/粗体

问题描述

我知道这里有很多关于使用字体加载字体的问题，但是我已经检查了所有（或至少很多），但似乎没有任何效果......

@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 来说是粗体。请有这方面知识的人随时详细回答以索取赏金。

更新

已提供答案，意味着本地声明可以保留！

标签： csswordpressfont-facewebfonts

解决方案

您面临的问题是因为您告诉它查找相同的本地字体文件，而不是为每个实例定义粗细/字体样式。

尝试添加字体粗细/样式，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'),

推荐阅读