0

我正在为现代浏览器开发一个 JavaScript 应用程序，我不需要支持旧的。我想将字体嵌入到我的 CSS 文件中，而不是加载它们。

对于我想要支持的所有浏览器，我只需要 WOFF 和 TTF 字体。

现在，当我使用 Font Squirrel 的 @font-face 生成器和“base64 编码”时——它只给了我 WOFF 类型的数据 URI，而不是 TTF 类型的数据 URI。

为什么这样做？

4

1 回答 1

0

我相信原因是最小化整体文件大小/加载时间。

一些设备有 25kb 的限制，以保持文件“缓存”。当 TTF 和 WOOF 是 base64 时，CSS 文件可能会超出限制并导致每次访问都重新加载。

浏览器将使用第一个字体“它可以”（或“级联”，如果你愿意的话）。由于特定原因，您将看到按以下顺序列出的格式：

1. EOT - 用于捕获较旧的 IE (<9)。

IE 会被多个“src”阻塞。您会经常看到 ?#iefix 涉及 EOT 参考，或者一个仅包含 EOT 文件的附加选择器，然后是带有 WOFF 和 TTF 的类似选择器。另外，由于旧的 IE 不做 datauri，我们必须作为外部文件离开。

2. WOFF - 大多数现代浏览器。

大多数现代浏览器将使用 WOFF。这种格式非常小，即使使用 base64 编码。因此，将其保留在 CSS 中是有意义的。另外，WOFF 可能无法通过 FTP 正确上传和/或服务器可能没有为 WOFF 扩展设置正确的 mime。

3. TTF - 用于捕捉 Android 和一些旧版浏览器。

需要 TTF 的旧版浏览器是： - 旧版 Safari (5.0) - 旧版 IOS (<4.2) - 旧版 Opera (10.0) 同样，包括作为“重”base64 的 TTF，CSS 文件可能对于某些设备来说太大而无法缓存. 将 TTF 保存为二进制文件和外部文件是明智的，因为它只会在需要时被加载/使用。

这是基于 caniuse.com 数据的简单图表：

---------------
EOT
---------------
IE      >= 6
FF      -
Chrome  -
Safari  -
Opera   -
O mini  -
O Mobi  -
IOS     -
Android -

---------------
WOFF
---------------
IE      >= 9
FF      >= 3.6
Chrome  >= 16
Safari  >= 5.1
Opera   >= 11.6
O mini  -
O Mobi  >= 11.0
IOS     >= 5
Android -

---------------
TTF
---------------
IE      -
FF      >= 3.6
Chrome  >= 16.0
Safari  >= 5.0
Opera   >= 11.6
O mini  -
O Mobi  >= 10.0
IOS     >= 4.2
Android >= 2.2
于 2014-06-03T13:18:25.283 回答