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

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加载自定义字体时定位更大的屏幕.

在此示例中,小于1000px的屏幕将作为系统字体提供,而宽屏和上方的屏幕将提供自定义字体.

• 结论:在桌面屏幕上使用OTF/TTF(所有浏览器)和EOT(IE),并在小屏幕上使用系统字体,因为它们渲染速度更快.并考虑谷歌字体.迄今为止的最佳选择.