css – 字体文件格式之间的任何真正区别

我有以下格式的自定义字体(使用filesize)：

font.eot (66kb)

font.svg (204kb)

font.afm (79kb)

font.otf (107kb)

font.woff (42kb)

font.pfb (130kb)

font.ttf (66kb)

因此,完全相同的字体具有完全不同的文件大小,具体取决于格式. .woff的尺寸最小.

根据w3school上的@ font-face页面,EOT适用于IE6,而其他格式适用于IE9 – 除此之外,我找不到有关这些格式之间差异的任何信息.

我的问题是,在质量或兼容性选择哪种格式方面有什么不同吗？

解决方法

绝对没错.这是一篇关于您提出的确切问题的精彩文章.

http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/

还有另一种未列出的字体类型,在文件大小(最小)和浏览器兼容性方面是最推荐的格式：WOFF(Web Open字体格式).

如果您的目标是IE 8及以下,则需要与WOFF一起使用.以下是针对旧版浏览器的示例：

@font-face {
    font-family: Graublauweb;
    src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
    src: url('Graublauweb.eot?') format('eot'),/* IE6-IE8 */
    url('Graublauweb.woff') format('woff'),/* Modern browsers */
    url('Graublauweb.ttf')  format('truetype'),/* Safari,Android,iOS */
    url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
}

虽然在浏览器采用率方面尚未完全“尚未”,但未来将是WOFF 2.0,因为与WOFF相比,压缩率将接近30％-50％.

这是描述不同字体格式的另一种资源：
http://www.w3schools.com/css/css3_fonts.asp

TrueType字体(TTF)

TrueType是Apple和Microsoft在20世纪80年代后期开发的字体标准. TrueType是Mac OS和Microsoft Windows操作系统最常用的字体格式.

OpenType字体(OTF)

OpenType是可伸缩计算机字体的格式.它基于TrueType构建,是Microsoft的注册商标. OpenType字体现在通常用于主要的计算机平台上.

Web开放字体格式(WOFF)

WOFF是用于网页的字体格式.它是在2009年开发的,现在是W3C推荐标准. WOFF本质上是具有压缩和附加元数据的OpenType或TrueType.目标是通过带宽限制的网络支持从服务器到客户端的字体分发.

Web开放字体格式(WOFF 2.0)

TrueType / OpenType字体,提供比WOFF 1.0更好的压缩.

SVG字体/形状

SVG字体允许SVG在显示文本时用作字形. SVG 1.1规范定义了一个字体模块,允许在SVG文档中创建字体.您还可以将CSS应用于SVG文档,@ font-face规则可以应用于SVG文档中的文本.

嵌入式OpenType字体(EOT)

EOT字体是由Microsoft设计的OpenType字体的紧凑形式,用作网页上的嵌入字体.

css – 字体文件格式之间的任何真正区别

解决方法

相关推荐