您真正使用哪些字体扩展？答案

【问题标题】：Which font extensions do you really use?您真正使用哪些字体扩展？
【发布时间】：2019-03-23 16:13:46
【问题描述】：

我在许多项目中看到人们使用 .TTF、.WOFF、.WOFF2 等所有字体扩展名。但是，这会导致多个文件指向一个来源，想象一下，如果我有多个不同类型的来源？

我只使用 .WOFF2，但我注意到在 INTERNET EXPLORER 和 LG 等电视浏览器上，源代码不起作用。

【问题讨论】：

您可以根据浏览器加载不同的 CSS 文件（具有不同的字体扩展名）。
您应该为您定义的每种字体使用不同的字体格式。你可以使用一些在线服务来生成它们，它实际上比听起来更容易。谷歌“webfont generator”，你会发现很多资源可以上传一种格式，而该服务只为你提供其他格式和 css。

标签： css sass

【解决方案1】：

我会使用 woff2 和 woff 来包含旧版浏览器：

Chrome Safari 火狐 Opera IE Android iOS 5+ 5.1+ 3.6+ 11.50+ 9+ 4.4+ 5.1+

提示！在创建@font-face 规则时——对所有权重使用相同的 FontFamilyName。它使处理 CSS 中的变化变得更加容易

@字体脸{ font-family: 'FontFamilyName'; src: url('../fonts/FontFileName.woff2') 格式('woff2'), url('../fonts/FontFileName.woff') 格式('woff'); 字体粗细：400； } @字体脸{ font-family: 'FontFamilyName'; src: url('../fonts/FontFileName-Bold.woff2') 格式('woff2'), url('../fonts/FontFileName-Bold.woff') 格式('woff'); 字体粗细：700； }

确保添加后备（字体堆栈）以支持不支持 woff 或根本不支持网络字体的浏览器（我不确定 LG 是否支持）

h1 { font: 700 2rem 'FontFamilyName', sans-serif; } p { 字体：400 1rem 'FontFamilyName'，无衬线； } 强{字体粗细：700； }

【讨论】：

对于我来说不需要输入各种字体扩展名，你会推荐哪一种跨越所有浏览器和设备？
我不会是个坏建议。这与您的页面加载速度有关。 TTF 具有最广泛的支持，但加载成本高于 WOFF 和 WOFF2（最轻）。通过提供多个选项，浏览器选择最快。如果您不关心加载速度，请使用 WOFF