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

Question

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

• Rubik-Bold
• Rubik-斜体
• 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。