@font-face带有数据URI和Font Squirrel的@font-face生成器

Question

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

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

它为什么要这么做？

Answer 1

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

有些设备有25KB的限制，以便维护“缓存”的文件。当TTF和WOOF是基于64时，CSS文件可能会超过限制，并导致每次访问重新加载。

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

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

IE将被多个“src”阻塞。您经常会看到EOT引用中涉及的？#IEFIX，或者一个附加的选择器，其中只有EOT文件，后面跟着一个类似的选择器，带有he WOFF和ttf。另外，由于旧的IE不做datauri，我们必须作为外部文件离开。

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

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

需要TTF的旧浏览器是：-旧的Safari(5.0)-旧的IOS(<4.2)-旧的Opera(10.0)同样，将TTF包含为“heavy”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