究竟什么是网络字体,转换为网络字体涉及什么?

平面设计 字体 网络字体 网络安全
2021-12-27 17:31:56

我已经阅读了一些关于此的文章,但网络字体和桌面字体之间的实际技术差异仍然让我难以理解。我对这个主题阅读得越多,我就越觉得没有人对网络字体到底是什么有一个清晰的技术定义。

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

4个回答

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

有些字体被认为是“网络安全”的,因为它们非常普遍,以至于每台计算机都有它们,比如“Arial”。您无需执行任何操作,只需告诉网站使用该字体即可。Web 字体需要由访问者的浏览器下载,因为如果您的计算机上没有字体,您将看不到它。

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

请务必注意,某些字体可能具有单独的网络字体许可证,即使您拥有字体文件也可能没有。就像谷歌图片...仅仅因为你能够下载图片,并不意味着你可以用它来销售你公司的须后水。

Developers.google.com有一篇很好的帖子,专注于网络字体优化,但也有一些基础知识。

那篇文章中有一个关于不同格式的很好的摘录:

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

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

Transfonter也有一个关于浏览器支持的非常好的表格:

在此处输入图像描述 在此处输入图像描述

在问了这个问题之后,我做了一些更详细的研究,所以我把这个答案添加到 Joonas 的附录中,这很好,但没有为我详细回答我的最后一个问题:

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

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

支持 WOFF2

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

支持 WOFF

IE9(2011 年发布)中的 Internet Explorer 开始支持WOFF ,这使得 EOT 格式对于自 2011 年以来发布的 IE 版本已过时。全球估计有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 是传统的桌面字体格式,任何支持一种的浏览器都支持另一种,所以千万不要同时使用

不多。

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

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

不过,我想强调一些非常基本的东西:“webfont”,除了技术实现细节之外,是一种你已经获得许可的字体,由它的创建者或权利持有者在网站上使用的特定任务。这些将以网络字体格式出现。如果您正坐在生成器前将字体转换为 webfont 格式,并且它不是开源的或您自己绘制的,请停在那里!您几乎可以肯定违反了许可证并且可能会被起诉。而且由于它在网络上,人们很容易找到您在做什么并检查他们的销售清单。

看看这个 doofus,他为 Facebook 和 Google 工作过,直到有人告诉他他在技术上在他的网站上使用盗版字体时才意识到。他有桌面订阅许可证,但这不是网络使用许可证。