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

Question

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

这是我的 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;
}

可以查一下here有一些文本试图使用字体粗细为 400 的 CalibreWeb 字体系列(例如 Advice Hub 之后的副标题。)

知道可能是什么问题吗？

Answer 1

您的 CSS 语法似乎有错误，导致某些字体无法加载。

要修复语法，请在第二个 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;
}