@ Font -face with data URI和font Squirrel的@font-face生成器

Question

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

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

现在，当我使用带有"base64 encode“的Font Squirrel的@font-face生成器时--它只为WOFF类型提供数据URI，而不为TTF类型提供数据URI。

它为什么要这么做？

Answer 1

我认为这样做的原因是为了最小化整体文件大小/加载时间。

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

浏览器将使用第一种字体"it can“(如果您愿意，也可以使用"cascade”)。出于特定原因，您将看到按以下顺序列出的格式：

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

IE会被多个"src“卡住。您经常会在EOT参考中看到?#iefix，或者只包含EOT文件的附加选择器，后面跟着类似的带有WOFF和TTF的选择器。另外，由于旧的IE不做datauri，我们不得不作为一个外部文件离开。

2.最新潮的浏览器。

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

3. TTF -用于捕获Android和一些较老的浏览器。

需要TTF的旧浏览器是：- old Safari (5.0) - old IOS (<4.2) - old Opera (10.0)，包括TTF作为“繁重的”base64，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