我想为我的网站使用一个字体,我得到了整体研究,并发现各种格式的字体,现在我想知道什么是标准格式？
或什么是标准格式？
或什么是标准格式？
.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),那么我该怎么做才能更好的优化？
解决方法
了解字体文件类型
> WOFF / WOFF2
WOFF字体通常比其他格式加载速度更快,因为它们使用OpenType(OTF)和TrueType(TTF)字体使用的结构的压缩版本.
> SVG / SVGZ
理想的移动使用
> EOT
仅由IE支持
> OTF / TTF
WOFF格式最初是作为对OTF和TTF的反应而创建的,部分原因是因为这些格式可以很容易(非法)被复制
>另一边：
Google Fonts可以提供这种方式来使用它们的字体.
观看文件大小
字体可能令人惊讶,因此倾向于提供更轻版本的选项.例如,喜欢一个50KB的字体集,而重量为400KB的字体集.
限制字符集,如果可能的话
你真的需要一个字体的粗体和黑体重吗？限制您的字体集加载只是使用的是一个好主意,这里有一些很好的提示.
考虑小屏幕的系统字体
许多设备都停留在肮脏的连接上.使用@media加载自定义字体时,一个窍门可能是放大屏幕.
在此示例中,小于1000像素的屏幕将被替换为系统字体,而宽屏幕及以上的屏幕将以自定义字体投放.
结论：使用OTF / TTF(所有浏览器)& EOT(I.E)桌面屏幕,并使用系统字体小屏幕,因为它们渲染更快.并考虑谷歌字体.到目前为止最好的选择.
