Question

我正在尝试通过将它们从css中拉出并将它们直接放在页面上来改善页面上关键字体的加载时间。我目前拥有的是我页面标签中的以下代码。

<style type="text/css">
@font-face {
    font-family: "Flama";
    font-style: "normal";
    font-weight: 500;
    src: url("/images/fonts/flama/500-medium/flama-medium-500.woff") format("woff"), url("/images/fonts/flama/500-medium/flama-medium-500.svg") format("svg");
};
@font-face {
    font-family: "Flama";
    font-style: "normal";
    font-weight: 300;
    src: url("/images/fonts/flama/300-book/flama-book-300.woff") format("woff"), url("/images/fonts/flama/300-book/flama-book-300.svg") format("svg");
};
@font-face {
    font-family: "Flama";
    font-style: "normal";
    font-weight: 400;
    src: url("/images/fonts/flama/400-basic/flama-basic-400.woff") format("woff"), url("/images/fonts/flama/400-basic/flama-basic-400.svg") format("svg");
};
</style>

当我在css文件中有这些声明时，一切都很好，我可以看到所有三种字体都加载到Chrome开发工具中。但是当使用上面的代码时，只列出了最后列出的字体并加载（使用DevTools中只列出一种字体 - >网络 - >字体）。我可以切换字体的顺序，总是最后一个是使用的字体。这是怎么回事？

无法加载多个font-face声明

0 个答案: