android - 现代浏览器、Android 和 IOS 需要什么样的字体文件？

Question

我有这些作为我的字体文件:

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff2') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg fontawesomeregular') format('svg');
//  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

这些是否满足我的需求:

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot');
  src: url('@{fa-font-path}/fontawesome-webfont.woff2') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

只有 woff 和 woff2 才能满足我的需求吗？

Answer 1

2020 编辑
你只需要 WOFF2，IE11 的 WOFF 回退，因为它不会死。不要使用 eot(它是一种死格式)、svg(不仅是死格式，而且是收回的)或 ttf/otf(包含大量数据的普通 opentype 字体，这些数据在 woff2/woff 转换中是无关紧要的)，因为它与 web 使用无关.
原答案
同样解释 in this SO post ，你 just need WOFF 。原因如下:

eot 被弃用了一段时间，但现在实际上已经过时了 Microsoft only supports Edge, plus "the latest version of IE for supported versions of Windows" ，此时它只是 IE11(2018 年 11 月)。这两个都支持 WOFF 就好了。另请注意，早于 Windows 7 的所有版本都已不再受支持(在本回答发布时，企业企业许可证仍支持 Windows Vista SP2，但此后也已停止使用)。

svg was abandoned years ago。这是一个有趣的想法，但在实践中结果很糟糕，因为与真实字体相比，它的体积大得可笑，并且缺乏对体面排版至关重要的功能。整个 <font> 章节 was removed from SVG2 以及几乎所有在过去某个时候支持它的浏览器都已经再次删除了该支持(那是多么糟糕)。只有两个仍然支持 svg 字体的浏览器也支持 WOFF，所以没有理由同时提供这两种字体。

ttf 和 otf 是 OpenType fonts(两者。由于历史原因，它们的扩展名不同，但除非您正在制作字体，否则它们之间的差异基本上是无关紧要的)，用于通用系统使用。就像在计算机上安装或发送到现代打印机以生成物理文档一样。像这样。他们有很多需要支持的点点滴滴(规范 is rather large )，如果您只是将网页呈现到屏幕上，其中许多实际上并不重要。 WOFF 允许您在 OpenType 字体中进行一些简化，并且每个支持通用 Opentype 的浏览器也支持 WOFF。再说一遍:只需使用 WOFF。

需要意识到的是，WOFF 是 OpenType 字体的逐字节包装器，但具有(可选)无损压缩，因此字体更小，从而可以更快地从服务器传输到客户端，并指示字体仅用于网络，这意味着字体在通用类型系统上被视为合法字体绝对需要满足的一些要求放宽了，因此可以删除更多数据。
我知道 Font Squirrel 和其他网站仍然会生成“拥有曾经存在的所有格式!”一种 CSS 字体包，但现在是 2017 年，我们不再需要这些庞大的字体集了。尽管早在三年前，这些集合是最佳实践(在浏览器环境中使用 CSS 的“防弹”方法，当涉及到 webfonts 时，该方法高度分散)，但今天这些包完全没有必要。一切都支持WOFF。

"What about WOFF2?"

WOFF2 是 WOFF 规范的修订版，具有更新、更好的无损加密算法，适用于您在网络上发现的二进制数据类型(WOFF2 使用 brotli ，而不是 WOFF 的“放气”)，因此如果您的目标浏览器支持它:太好了。但首先检查 http://caniuse.com ；有很多浏览器还不支持它，特别是在流行的平台上(Windows 的 IE 和 Apple 的 Safari 现在不支持 WOFF2。IE 最终会支持，但 Safari ......谁知道)

"What about that subsetting thing Google fonts does when I ask for WOFF2?"

实际上，WOFF2 还允许分块加载“一种字体”，通过指定字符子集加载的工作方式，以便您只能加载支持用户语言环境所需的字体。但是，除非您运行的网站需要提供多种不同的本地化版本，以母语针对这个星球上的特定市场，或者您运行的网站教授不同的语言，所有这些都需要使用相同的样式字体系列(极不可能)这与您几乎无关。