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

Question

我有以下格式的自定义字体(使用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 + - 除此之外,我找不到任何有关这些格式之间差异的信息.

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

Answer 1

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

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字体的紧凑形式,用作网页上的嵌入字体.