19

当您添加@font-face到您网站的单个 css 文件中时，放置它的最佳位置是哪里？css文件的顶部？底部？

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

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

4

5 回答 5

21

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

不，不是的。浏览器不会在加载样式表的其余部分之前先下载字体。它将开始异步下载字体，但这些字体下载不会干扰页面渲染（参见FOUT）。

如果您的意思是说将规则放在顶部会减慢速度，因为浏览器必须先下载规则，然后再下载样式表的其余部分，除非您有数十千字节的@font-face规则（非常非常，非常不可能）。

没有规则来管理@font-face样式表中的放置位置，但出于组织目的，我通常将大多数 at-rules 保留在顶部。

于 2012-09-11T19:38:43.157 回答
2

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

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

CSS 字体模块第 3 级（已添加重点）

但是这种行为实际上将 FOUT（无样式文本的 Flash）与 FOIT （不可见文本的 Flash）进行了交易，并且使用户在非常糟糕的连接上比使用 FOUT 更糟糕。

另外，请参阅这个巧妙的解决方法（需要 JS）。

于 2016-04-24T09:58:19.150 回答
0

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

读这个：

使用样式表，在下载所有样式表之前会阻止渐进式呈现。这就是为什么最好将样式表移动到文档 HEAD，这样它们会首先被下载并且不会阻止渲染。使用脚本，脚本下方的所有内容都会阻止渐进式渲染。将脚本移动到页面中尽可能低的位置意味着脚本上方有更多内容可以更快地呈现。

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

于 2012-09-11T19:36:03.430 回答
-2

我会说...您将字体保留在正文中{ font-family: blahblahblah;}

于 2012-09-11T19:36:14.820 回答
-2

不习惯，最好在文件顶部使用 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;
}
于 2012-09-11T19:42:22.753 回答