我该在网站上使用哪种字体格式？

Question

我该在网站上使用哪种字体格式？

21

我想在我的网站上使用字体，我已经做了总体研究，并发现了各种字体格式，现在我想知道标准格式是什么？或者有哪些标准格式？

.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），那么我该怎么做才能更加优化？

- user4920811

2

你可以在其他浏览器中使用.ttf，而在Internet Explorer中使用.eot。 - priya786

1

Web编程并不是考虑和实现每一个可以找到的替代方案。集中精力于你的目标：支持相关的浏览器。像IE6-9这样的东西肯定可以忽略不计。使用_一个_格式，woff或ttf就可以了。不能遵守这些格式的浏览器不值得支持。 - arkascha

@arkascha 我喜欢这句话：'不能遵守这些规则的浏览器不值得支持。' - user4920811

@arkascha 我有一个新问题，当我在我的CSS文件中附加所有字体格式时，会发生什么？我的意思是：如果用户使用移动设备打开我的网站，那么只有 .svg 将被加载还是全部都会加载？另外，当用户使用Chrome浏览器时，所有附加的文件都会加载到他的设备上，还是浏览器会寻找合适的字体并加载它？谢谢。 - user4920811

@arkascha，我真的不知道该如何测试它！我想知道每个浏览器是否都有自己的字体加载方式，然后我在我的CSS文件中使用所有格式。 - user4920811

显示剩余6条评论

2个回答

1

我刚刚测试了Chrome (43)，Firefox (37)和IE (10) - 在所有情况下，只下载了其中一种字体格式（分别是：woff，woff和eot）中的一种。基于这个小样本，似乎在@font-face声明中包含各种文件类型对用户没有负面影响。
*如果您恰好知道其他浏览器的行为，请告诉我们。

- danyamachine

+1 用于你的测试。但是一个好的网页开发者不仅要检查最好的浏览器，还应该测试一些像 IE 7 这样的浏览器。 - user4920811

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Waqar · Accepted Answer

理解字体文件类型

WOFF / WOFF2

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

SVG / SVGZ

适用于移动设备使用。

EOT

仅支持IE浏览器。

OTF / TTF

WOFF格式最初是作为对OTF和TTF的反应而创建的。其中一个原因是这些格式可以轻松地（并且非法地）被复制。

另一方面：

Google Fonts提供了一种使用其字体的方式。

一些性能提示

注意文件大小

字体可能很重，因此倾向于提供较轻版本的选项。例如，更喜欢50KB的字体集而不是重达400KB的字体集。如果可能，限制字符集

你真的需要一个字体的粗体和黑体吗？仅加载所需的字体集是一个好主意，并且这里有一些好的提示。考虑在小屏幕上使用系统字体

许多设备的连接速度很慢。一个诀窍可能是使用@media在加载自定义字体时针对较大的屏幕。

在此示例中，小于1000像素的屏幕将使用系统字体，而宽度为1000像素或以上的屏幕将使用自定义字体。

结论：桌面屏幕使用OTF / TTF（所有浏览器）和EOT（IE）。小屏幕使用系统字体以加快渲染速度。同时考虑使用Google字体。目前最好的选择。