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

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).

如果你打算说顶级规则会降低它的速度,因为浏览器必须先在你的样式表的其余部分之前下载规则,除非你有几十千字节的@font-face规则,否则这无关紧要(非常非常,非常不可能).

没有关于在@font-face样式表中放置位置的规则,但为了组织目的,我通常将大多数at-rules保留在顶部.