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

正如in this SO post所述，您just need WOFF。这就是原因：

eot已被弃用了一段时间，但实际上已过时现在Microsoft only supports Edge, plus "the latest version of IE for supported versions of Windows"，此时仅为IE11（2014年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和其他网站仍然生成了＃34;拥有曾经存在的所有格式！＆＃34;一种CSS字体包，但它是2017年，我们根本不再需要这些庞大的设置。虽然即使短至三年前这些集合也是最佳实践（在浏览器环境中使用“防弹和CSS”方法，但在网络字体方面非常分散），今天这些包完全没必要。一切都支持WOFF。

＆＃34; WOFF2怎么样？＆＃34;

WOFF2是WOFF规范的修订版，为您在网络上提供的二进制数据类型提供了更新，更好的无损加密算法（WOFF2使用brotli，而不是比WOFF＆＃34; deflate＆＃34;）所以，如果您定位的浏览器支持它：太棒了。但请先检查http://caniuse.com;还有很多浏览器还没有支持它，特别是在流行的平台上（Windows的IE和Apple的Safari现在不支持WOFF2。IE最终会，但Safari ...谁知道呢？

＆＃34;当我要求WOFF2时，Google字体所做的子集化事情怎么样？＆＃34;

实际上，WOFF2还允许加载一种字体＆＃34;在块中，通过指定字符子集加载应该如何工作，以便您只能加载尽可能多的字体来支持您的用户＆＃39;语言环境。但是，除非您运行的网站需要在几个不同的本地化版本中提供，以本国语言定位到这个星球上的特定市场，或者您正在运行一个教授不同语言的网站，所有这些都需要使用相同的字体系列（这是极不可能的）这与你几乎无关。

现代浏览器，Android和IOS需要哪些字体文件？

1 个答案: