网络字体到底是什么,转换为一种字体是什么?


15

我已经阅读了几篇文章,但是网络字体和桌面字体之间的实际技术差异仍然使我难以理解。在主题上阅读的内容越多,我就会觉得没有人对Webfont到底是什么有明确的技术定义。

当我将“桌面”字体上载到诸如FontSquirrel之类的可生成网络字体的服务时,这些服务对字体文件做了什么使其真正成为网络字体?如果这些服务的主要用途是转换为不同的格式,那么截至2019年,现代网络实际上需要哪种格式来支持合理数量的浏览器?

Answers:


17

“网络字体”只是在网络或浏览器上使用的字体。这些网络字体生成器所做的只是通过为您的访客提供必要的css并将字体转换为确保跨浏览器工作所需的所有文件格式,从而使您的生活更加轻松。

某些字体被简单地认为是“网络安全”的,因为它们是如此普遍以至于每台计算机都具有它们,例如“ Arial”。除了告诉网站使用该字体外,您无需执行任何操作。Web字体需要由访问者的浏览器下载,因为如果您的计算机上没有该字体,您将不会看到它。

专为Web开发的字体格式(例如Woff)在设计时考虑了小文件大小。Google字体也以这种方式为您提供不同的格式,只是有点隐藏。

需要特别注意的是,某些字体可能具有单独的Web字体许可证,即使您拥有字体文件也可能没有。就像Google图片一样...仅仅因为您能够下载图片,并不意味着您可以使用它来出售公司的须后水。

Developers.google.com上有一篇很好的文章,着重于网络字体优化,但也有一些基础知识。

该文章中的不同格式摘录非常不错:

如今,网络上使用了四种字体容器格式:EOT,TTF,WOFF和WOFF2。不幸的是,尽管选择范围很广,但没有一种通用格式可以在所有新旧浏览器上使用:EOT仅适用于IE,TTF具有部分IE支持,WOFF享有最广泛的支持,但在某些旧版浏览器中不可用,并且WOFF 2.0支持正在许多浏览器中进行。

那么,那把我们留在哪里呢?在所有浏览器中都没有一种适用的格式,这意味着我们需要提供多种格式以提供一致的体验

Transfonter也提供有关浏览器支持的不错的表格:

在此处输入图片说明 在此处输入图片说明


6
这些支持表已过时。请改用caniuse.com:caniuse.com/#search=woff2
curiousdannii

真正。我之所以使用它,是因为它具有所有格式的一种格式,并且我认为它可以告诉您有关各种浏览器支持的故事,这就是为什么这些字体生成器是一回事。我考虑将其省略,因为我认为这有点偏离主题,但显然我没有意识到OP对这一点有多大的关注
乔纳斯(Joonas)

@Joonas我相信所有专业的Web开发人员都应该关心这一点。并不是说我们在这里谈论复杂的理论-浏览器的使用和良好的UX对网站具有非常实际的意义。例如,如果您运行的电子商务网站吸引了印度用户的大量访问量,您是否不希望确保这些用户获得的用户体验与其他用户所获得的用户体验相同?
Hashim

@Hashim,我的措辞很差。最初的帖子是“什么是网络字体”,对我来说,到头来问到2019年需要哪种格式的问题似乎对我来说是事后的想法,尤其是当您对网络字体生成器感到好奇的时候...以及何时使用在这些生成器之一中,该信息变得不必要了,因为它毕竟是跨浏览器的解决方案。但是随后您发布了该文章,在其中分解了每种格式,这使我意识到,我有意识地忽略了答案部分,这对您来说似乎比我预期的要大得多。
乔纳斯(Jonas)

1
@Hashim,再次,我选择的单词不好。我的想法是这样的:“这里的人不知道网络字体是什么。他在谈论网络字体生成器。好吧,如果他要使用的话,他不需要知道最后一部分。生成器...但是让我添加一些浏览器统计信息来描绘这些生成器为何如​​此。如果有的话,我为您采取下一步行动并亲自调查表示赞赏。
乔纳斯(Jonas)

3

问完这个问题后,我做了一些更详细的研究,因此将这个答案作为对Joonas的增编添加,虽然不错,但没有为我详细回答我的最后一个问题:

如果这些服务的主要用途是转换为不同的格式,那么截至2019年,现代网络实际上需要什么格式来支持合理数量的浏览器?

许多开发人员认为WOFF和WOFF2是现代Web开发中唯一需要的字体格式。但是,这些答案来源不充分,我也认为它们有些过分热心,所以让我们开始看看CanIUse.com提供的WOFF和WOFF2的实际支持数据,这是记录此问题的行业标准。那类的东西。

支持WOFF2

WOFF2在各个方面都对WOFF进行了改进,2014年之后发布的大多数桌面浏览器都支持WOFF2,但是自2018年以来,大多数移动浏览器都一直支持WOFF2。全球估计有 93%的浏览器支持它。

支持WOFF

WOFF开始受到IE9(于2011年发布)中的Internet Explorer的支持,该功能使EOT格式对于2011年以来发布的IE版本已过时。全球约有 97%的浏览器都支持WOFF

其他桌面浏览器几乎同时开始支持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是传统的桌面字体格式,任何支持一种的浏览器都支持另一种,因此切勿同时使用两者


相关:如何使用命令行将TTF / OTF字体文件转换为WOFF和WOFF2格式(因此,是批量而不是一次)。
Hashim

1

不多。

WOFF只是TTF的一种压缩格式,因此尺寸更小。内部结构不变。WOFF2更进一步,它确实略微修改了字体表示,以实现更多的压缩。EOT是仅用于MS的格式,根本不算在内。SVG实际上只是轮廓,几乎没有轮廓,因此它不算作真正的字体,仅用于图标。

只需使用WOFF并完成它。如果您想挤出最后一个字节,则可能还希望提供WOFF2,但差异可以忽略不计。


0

不过,我想强调一些非常基本的东西:“ webfont”(除技术实现细节外)是您的创造者或版权所有者已许可的字体,用于在网站上使用的特定任务。这些将以webfont格式出现。如果您坐在生成器前面将字体转换为webfont格式,但它不是开源的或您自己绘制的,请就在此处停止!您几乎可以肯定会违反许可并可能被起诉。而且由于它在网络上,人们很容易找到您在做什么,并对照他们的销售清单进行核对。

参见例如doofus,他曾经为Facebook和Google做过工作,直到有人告诉他说他在技术上是在他的网站上使用盗版字体后才意识到这一点。他拥有桌面订阅许可证,但这不是网络使用许可证。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.