在 CSS3
font-face
中,包含多种字体类型,例如 ttf
、eot
、woff
、svg
和 cff
。
我们为什么要使用所有这些类型?
如果它们对于不同的浏览器是特殊的,为什么它们的数量比主要网络浏览器的数量多?
仅使用 WOFF2,或者如果您需要旧版支持,请使用 WOFF。 请勿使用任何其他格式
(
svg
和eot
是死格式,ttf
和otf
是完整的系统字体,不应用于网络目的)
总之,font-face已经很老了,但直到最近才被超过IE支持。
eot
- 他们发明了该规范,但 eot 是专有解决方案。ttf
和otf
是普通的旧字体,所以有些人很恼火,因为这意味着任何人都可以免费下载昂贵的许可字体。随着时间的流逝,SVG 1.1 添加了“字体”章节,解释了如何纯粹使用 SVG 标记来建模字体,人们开始使用它。随着时间的推移,事实证明,与普通字体格式相比,它们“绝对可怕”,并且 SVG 2 明智地再次删除了整个章节。
woff
被具有相当多领域知识的人发明了,这使得以一种丢弃对系统安装至关重要但与网络无关的位的方式托管字体成为可能(让人担心关于盗版快乐)并允许内部压缩以更好地满足网络的需求(使用户和主机快乐)。这成为首选格式。
几年后,woff2
被起草并接受,这改进了压缩,导致文件更小,并且能够“分段”加载单个字体,以便支持 20脚本可以作为“块”存储在磁盘上,浏览器能够根据需要自动“部分”加载字体,而不需要预先传输整个字体,从而进一步改善排版体验。
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
可以在http://caniuse.com/woff
查看对
woff
的支持
可以在 http://caniuse.com/woff2查看对
woff2
的支持
http://en.wikipedia.org/wiki/Brotli
http://sth.name/2014/09/03/Speed-up-webfonts/有一个如何使用它的示例。 基本上,您将 src url 添加到 woff2 文件并指定 woff2 格式。在 woff 格式之前添加此内容非常重要:浏览器将使用它支持的第一种格式。