Question

我想在我的网站上使用字体，我得到了整体研究并发现了各种字体格式，现在我想知道什么是标准格式？或者标准格式是什么？

.TTF (True Type Font)
.EOT (Embedded OpenType)
.OTF (open type font)
.SVG (Scalable Vector Graphics)
.WOFF (Web Open Font Format)

到目前为止，我已经使用了所有这些格式，如下所示：

@font-face {
    font-family: 'Font';
    src: url('Font.eot'); /* IE9 Compat Modes */
    src: url('Font.eot?#') format('eot'), /* IE6–8 */
         url('Font.ttf') format('truetype'), /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
         url('Font.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('Font.otf') format('opentype'),
         url('Font.svg') format('svg');
}

但是在这种情况下，网站太重了（所有格式的大小几乎都是1MB），那么我应该做些什么来进行更优化呢？

Answer 1

了解字体文件类型

WOFF / WOFF2

WOFF字体的加载速度通常比其他格式快，因为它们使用OpenType（OTF）和TrueType（TTF）字体使用的压缩版本的结构。

SVG / SVGZ

适合移动使用

EOT

仅受IE支持

OTF / TTF

WOFF格式最初是作为对OTF和TTF的反应而创建的，部分是因为这些格式很容易（并且非法）被复制

在另一边：

Google字体提供了这种方式来使用他们的字体。

一些表现提示

观看文件大小

字体可能非常重，因此倾向于提供更轻的版本。例如，支持50KB的字体集而不是400KB的字体集。如果可能，限制字符集

你真的需要一种字体的粗体和黑色重量吗？限制你的字体集只加载使用的是一个好主意，这里有一些很好的提示。考虑小屏幕的系统字体

许多设备都卡在蹩脚的连接上。一个技巧可能是在使用@media加载自定义字体时定位更大的屏幕。

在此示例中，小于1000像素的屏幕将作为系统字体提供，宽屏及以上屏幕将以自定义字体提供。

结论：使用OTF / TTF（所有浏览器）＆amp;桌面屏幕的EOT（I.E）和小屏幕使用系统字体，因为它们渲染速度更快。并考虑谷歌字体。到目前为止最好的选择。

Answer 2

我刚刚测试了chrome（43）和firefox（37）以及ie（10） - 在所有情况下，只下载了五种字体格式（分别为：woff，woff和eot）。基于该小样本，似乎*包含@ font-face声明中的各种文件类型不会对用户产生负面影响。
*如果您碰巧知道其他浏览器的行为方式，请告诉我们。

我应该为我的网站使用什么字体格式

2 个答案: