Question

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

Rubik-Bold
Rubik-Italic
魔方-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的检查员中获得的：

我尝试过的基于我读过的类似主题的内容：

删除所有空格并将每个@font-face放在一行（在另一个帖子中解决了问题）。
测试了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-weight名称，因此您必须确保在页面上使用font-style和computed的每种样式组合，以便浏览器下载所有这些

也不要被一些缓存智能浏览器所欺骗。快速缓存字体以防止http请求。

我建议您忽略网络流量并检查应该获取字体的元素并查看select valueone, valuetwo, valueone - valuetwo as finalresult from (select 18 as valueone from dual where 1 = 1) -- query one) inner join (select 6 as valuetwo from dual where 1 = 1) -- query two) on 1 = 1 -- join condition where 1 = 1; -- some condition标签。

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

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

1 个答案: