CSS @ font -face不支持多种字体粗细

Question

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

这是我的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后面的副标题)。

你知道问题出在哪里吗？

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;
}