在font-face声明中仍然需要eot,ttf和svg吗?

时间:2016-03-19 17:59:57

标签: css fonts font-face woff woff2

到目前为止,我已经使用了Paul Irish的bulletproof font-face syntax

但我只是在caniuse上查看对.woff和.woff2文件的支持,并表示IE9 +支持woff。关于这个主题的大多数文章来自2009年左右,在撰写本文时,这篇文章是整整7年前的。当woff现在享有如此广泛的支持时,我们真的需要继续声明ttf,otf,eot和svg吗?

4 个答案:

答案 0 :(得分:56)

简答:不。

EOT仅与IE8及以下版本相关(尽管琐事:一直到IE4。IE实际上是网络领域的先锋),而SVG字体作为技术(与OpenType字体混淆) SVG概述了were abandonedin early 2015),因为一旦真正的webfonts开始变得可用,这些限制是疯狂的。截至2016年you just need WOFF。和WOFF2如果你想利用更新更好的WOFF版本only just成为w3推荐(在本答复时)。

为简化操作as of January 12th 2016, Microsoft ceased support for IE8 and below,对IE9的支持有限:他们现在只支持每个仍然支持的操作系统的最新可用浏览器,这意味着Windows XP不再支持IE9,因为XP本身在Vista SP2和Server 2008 R2分别在2017年和2020年达到扩展支持的结束时,不再受支持,但技术仍然支持。当然,对于Windows Server 2008来说,webfont支持是无关紧要的,大多数仍然使用旧版本Windows的企业都会跳过Vista,无论是在Windows XP上(自担风险)还是Windows 7(我们都非常期望它们都成为Windows 10在2016年7月,其中第29个the last date人可以从7 / 8.1而不是8到10免费升级。

(2017年4月编辑:本月Windows Vista SP2失去了支持,因此现在正式不再支持IE9)

至于TTF / OTF,你不想在网上使用这些,而不是想要使用TIFF图像而不是JPG或PNG:尽管WOFF只是"只是"在TTF / OTF数据周围的薄包装器,WOFF / WOFF2允许压缩数据,而普通的OpenType不允许。

此外,TTF / OTF是通用的(对于支持OpenType的系统)字体,因此需要仔细检查以确保正确性,尤其是IE版本。使用WOFF作为文件类型明确表示这是 W eb( O 笔) F ont( F ormat),一种不那么严格的审查形式意味着某些未通过系统OpenType验证通过的字体仍然可以像webfonts一样正常工作(由于并非所有普遍性OpenType数据都是字体所必需的。只在网络环境中工作。)

最后,您可以选择WOFF格式:格式1,仅称为WOFF,是旧格式,使用基于deflate的压缩,类似于PNG压缩;和格式2,称为WOFF2,它是基于brotli算法压缩的较新格式,也允许"切断"在处理支持多种语言的unicode字体时,将字体分成单独的文件以优化传送。您不需要同时处理所有文件,因此只提供涵盖特定页面所需的unicode范围的文件,并将页面大小和加载时间缩短一点。

在结论中:为了进步的进程而欢呼,只需使用WOFF(或WOFF2)。

当然,请记住使用format()值来指明@font-face来源的格式。

2018年10月编辑

WOFF2现在基本上无处不在,所以除非你知道你的观众是在过时的设备上,否则不要打扰WOFF,因为WOFF在各个方面都不如WOFF2。

答案 1 :(得分:0)

出于以下两个原因,我决定发布自己的答案:当前接受的答案对于在现代Web开发人员中使用WOFF2和WOFF字体栈略有热情,而没有提及其他因素,并且它也严重指向了官方目标-生命周期日期,不能反映现实世界中实际使用的浏览器版本。在此答案中,我将采购CanIUse.com,这是跟踪此类情况的行业标准。

对WOFF2的支持

WOFF2在WOFF上都有各种改进,2014年之后发布的大多数台式机浏览器均支持此功能,但自2018年起, 才开始被大多数移动浏览器支持。全球有93%的浏览器支持

支持WOFF

WOFF开始受到IE9(于2011年发布)中的Internet Explorer的支持,该样式使EOT格式对于2011年以来发布的IE版本已过时。它受 estimated 97支持全球浏览器的百分比。

其他桌面浏览器几乎同时开始支持WOFF,包括Firefox 3.6起的Firefox,Chrome 5以来的Chrome和5.1以后的Safari(分别于2010年,2011年和2011年发布),从而呈现了TTF和OTF。 1 格式在以前的版本中已过时。自2013年以来,大多数移动浏览器都支持WOFF。

注意事项和结论

从这个角度来看,很容易注销所有其他格式,因为它们是不必要的,但是不再正式支持的软件从来就不是一个不再使用的好兆头。换句话说,全球浏览器版本共享根本不能保证代表您的网站所使用的受众特征。

浏览器的版本份额在不同的人群中可能有很大差异:国家,社会阶层和收入等因素都会严重影响用户使用的设备(以及浏览器的版本)。作为开发人员,请考虑您正在构建的网站是否将被更可能使用那些较早版本的人口统计信息所使用。

如果您确定是这种情况,并且需要支持2011年之前的桌面浏览器或2013年之前的移动浏览器,请使用完整的字体堆栈:WOFF2,WOFF,TTF(或OTF)和EOT。

如果您不需要支持那些古老的浏览器,并且您确实不愿意这样做仍然是事实,那么从此处开始只需使用WOFF2和WOFF作为您的字体即可。


(1) TTF和OTF是传统的桌面字体格式,并且任何支持一种的浏览器都支持另一种,因此切勿同时使用两者

答案 2 :(得分:-1)

更多是2019年附录。至2019年9月18日,仍大量使用IE11,更不用说其他更陈旧的软件了。

因此,在一年前的最新编辑中,接受最多投票的答案是错误,至少您只需要woff2。至少您需要同时使用woff2和woff,并且您可能需要一个更通用的备份选项,即使它不像svg这样理想。

虽然肯定首先应该首先加载和支持woff2,但是传统支持只是生活中的事实,在任何情况下,您可能都无法再继续使用 woff2了。专业的努力。

对于字体类型尤其如此,因为加载woff2 woff作为备份非常容易,因此支持旧浏览器的开销非常低。

答案 3 :(得分:-4)

我认为使用ttf足以满足所有现代浏览器和设备......我自己检查了ie,firefox,chrome,opera,android mobile(kitkat,mashmallow)和iPhone(6到7 Plus)。似乎TTF得到了上述所有设备的支持。