css - @font-face - 浏览器未请求的字体，未加载

Question

我正在尝试使用 @font-face 加载 4 种字体作为首屏内容标题中的关键样式，在 <style> 内标签。

• 魔方大胆
• 魔方斜体
• Rubik-LightItalic
• 常规魔方

据我所知这应该是正确的，但是只有列表中的第一个会加载。如果我删除了第一个，则下一个在线将第一个加载。

HTML:

@font-face {
    font-family: 'Rubik'; 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.eot?2568338257603816725');
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.eot?2568338257603816725#iefix') format("embedded-opentype"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.woff?2568338257603816725') format("woff"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.woff2?2568338257603816725') format("woff2"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.ttf?2568338257603816725') format("truetype"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.svg?2568338257603816725#timber-icons') format("svg");
    font-weight: 700;
    font-style: normal;
};

@font-face {
    font-family: 'Rubik'; 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.eot?2568338257603816725');
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.eot?2568338257603816725#iefix') format("embedded-opentype"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.woff?2568338257603816725') format("woff"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.woff2?2568338257603816725') format("woff2"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.ttf?2568338257603816725') format("truetype"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.svg?2568338257603816725#timber-icons') format("svg"); 
    font-weight: 400;
    font-style: italic;
};

@font-face {
    font-family: 'Rubik'; 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.eot?2568338257603816725');
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.eot?2568338257603816725#iefix') format("embedded-opentype"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.woff?2568338257603816725') format("woff"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.woff2?2568338257603816725') format("woff2"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.ttf?2568338257603816725') format("truetype"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.svg?2568338257603816725#timber-icons') format("svg");
    font-weight: 300;
    font-style: italic;
};

@font-face {
    font-family: 'Rubik'; 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.eot?2568338257603816725');
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.eot?2568338257603816725#iefix') format("embedded-opentype"),
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.woff?2568338257603816725') format("woff"),
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.woff2?2568338257603816725') format("woff2"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.ttf?2568338257603816725') format("truetype"), 
        url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.svg?2568338257603816725#timber-icons') format("svg"); 
    font-weight: 400;
    font-style: normal;
};

这是我在 Chrome 的检查器中得到的:

我根据阅读过的类似话题尝试过的事情:

1. 消除所有空格并把每个 @font-face在一条线上(在另一个线程中解决了这个问题)。
2. 测试了 Shopify 的 CDN 输出的链接，它们确实有效。

在页面上，在页眉中:

HTML:

<div class="gift-line show-for-large">
    <span>The Gift Line</span><span class="phone-number">XXX-XXX-XXXX</span>
</div>

还有 CSS，在 font-face 声明之前加载(span 应该继承这个规则，因此 Rubik-Regular 应该下载):

body {
    font-family: "Rubik", sans-serif;
    font-weight: normal;
    font-style: normal;
}

所以在这种情况下，我知道除了Rubik-Bold之外至少应该调用Rubik-Regular。 (没有

有什么建议吗？谢谢

Answer 1

浏览器会通过分析您的 css 和 html 来确定您最终使用的字体文件并仅下载这些文件，从而尽量减少网络连接。

由于您在此处使用相同的font-family 名称，因此您必须确保使用font-weight 和font-style 的每种样式组合 在浏览器下载所有这些的页面上。

也不要被某些已安装的缓存智能浏览器所欺骗。字体会被快速缓存以防止 http 请求。

我建议您忽略网络流量并检查应该获取字体的元素并查看 computed 选项卡。

有关如何调试字体的更多信息，请查看此短片 article by Paul Irish .