CSS @font-face 不适用于多种字体粗细

Question

我正在尝试加载一些自定义 fonts，但由于某种原因，前端只加载了一个权重。 我已经检查了开发工具。

这是我的 CSS：

/* FONTS */

@font-face {
    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot'); /* IE9 Compat Modes */
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff'), /* Modern Browsers */
    font-weight: 400;

}
@font-face {

    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2'); /* IE9 Compat Modes */
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'), /* Super Modern Browsers */
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff'), /* Modern Browsers */
    font-weight: 600;
}

您可以在此处查看是否有一些文本尝试使用字体粗细为 400 的 CalibreWeb 字体系列（例如 Advice Hub 之后的子标题。）

知道可能是什么问题吗？

Answer 1

您的 CSS 语法似乎存在错误，导致某些 fonts 无法加载。

要修复语法，请在第二个src值的第二行使用分号。

@font-face {
    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.eot');
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff2') format('woff2'),
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Regular.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: 'CalibreWeb';
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2');
    src: url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff2') format('woff2'),
         url('http://staging.parcelpet.com/wp-content/themes/oceanwp-child-theme/fonts/CalibreWeb-Semibold.woff') format('woff');
    font-weight: 600;
}