Question

当您将@font-face添加到您网站的单个css文件中时，哪个地方最适合放置它？顶部的CSS文件？底部？

如果你把它放在顶部，我会认为它会减慢css的加载速度。如果你添加到底部，那么所有文本都将加载回退字体，直到加载的字体也不是最佳的。所以当使用@font-face而不是TypeKit，GoogleFonts等时，你应该把它放在哪里？

*更新 - 要重申上述内容，请参考将"@font-face{font-family:'Ave Regular';src:url('fonts/ave-regular.eot?#iefix')....etc"放在css文件中的位置，而不是放置正文"{ font-family: fontname, arial, serif } etc"的位置。并且我理解它“可以”去任何地方并且工作，无论我放在顶部还是底部或中间都不会产生“差异”，但是无论多么微不足道或者单向一边寻找哪个更好根据某些用例更好。

Answer 1

如果你把它放在顶部我会认为它会减慢css的加载速度。

不，它没有。在加载样式表的其余部分之前，浏览器不会等待先下载字体。它将开始异步下载字体，但这些字体下载不会干扰除页面呈现之外的任何内容（参见FOUT）。

如果您打算说顶级规则会降低速度，因为浏览器必须先在样式表的其余部分之前下载规则，除非您有几十千字节的{{}，否则这无关紧要。 1}}规则（非常，非常，非常不可能）。

没有规定将@font-face放在样式表中的规则，但为了组织目的，我通常会将大多数at-rules放在最顶层。

Answer 2

无论你把它放在顶部还是底部，它最终都要加载一些时间，所以我认为这不重要。如果您非常关注性能，我建议您将所有CSS组合到一个文件中并将其最小化。这样，对服务器的请求被限制为1，而不是10（对于包含不同字体等的10个不同的CSS文件）。

阅读本文：

使用样式表，渐进式渲染将被阻止，直到所有样式表已下载。这就是为什么最好搬家样式表到文件HEAD，所以首先下载它们渲染未被阻止。使用脚本，渐进式渲染就是阻止脚本下面的所有内容。将脚本移动到低位页面尽可能意味着脚本上面有更多内容提前渲染。

参考。 http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

Answer 3

截至2016年，现代浏览器实际上通过隐藏文本（使其透明）来防止FOUT（无格式文本的Flash）。（例如Chrome等待3秒，如果当时没有加载正确的字体，则使用后备字体。）这是CSS3规范允许的。

如果在可下载字体可用之前加载了文本内容，则用户代理可能会呈现文本，因为如果可下载的字体资源不可用，将会呈现文本，或者他们可以使用后备字体透明地呈现文本以避免闪现使用后备字体的文字。

CSS Fonts Module Level 3（强调补充）

但是这种行为实际上会使用FOIT（隐形文本的Flash）来交换FOUT（无格式文本的Flash），并使用户在非常糟糕的连接上比使用FOUT更糟糕。

另外，请参阅this clever workaround（需要JS）。

Answer 4

出于惯例，最好在文件顶部使用font-face，因为它很可能不会经常更改，但如果确实如此，它会对您的应用程序产生很大的影响。

我通常将其添加到body{}或html{}

中

就* 表现* 而言，它很可能并不重要。至于你自己的可维护性，在你的心理表现方面最好将它放在最顶层，这样你就不会通过CSS来寻找能够在视觉上有效的东西。

这是我实现这个快速代码段的方式：

body{margin:0; font-family: "CiN", Arial;}
@font-face {
    font-family: "CiN";
    src: url('sling.eot');
    src: local('?'), url('sling.woff') format('woff'), url('sling.ttf') format('truetype'), url('sling.svg#webfontJgTq0KbR') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 5

我会说......你把你的字体保留在体内{font-family：blahblahblah;}

在CSS中放置font-face的位置？

5 个答案: