Question

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

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

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

为什么会这样做？

Answer 1

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

某些设备的限制为25kb，以便维护文件＆＃34;缓存＆＃34;。当TTF和WOOF是基础64时，CSS文件可能超出限制并导致每次访问重新加载。

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

<强> 1。 EOT - 用于捕获较旧的IE（＆lt; 9）。

IE将会出现多个＆＃34; src＆＃34;。您经常会看到？#iefix参与EOT参考，或者只有EOT文件的附加选择器，其后是类似的选择器，其中包括WOFF和TTF。另外，由于旧的IE不做数据库，我们必须将其作为外部文件保留。

<强> 2。 WOFF - 大多数现代浏览器。

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

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

需要TTF的旧版浏览器是： - 旧Safari（5.0） - 旧IOS（＆lt; 4.2） - 老歌剧（10.0）再次，包括TTF为＆＃34;重＆＃34; 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

@ font-face包含数据URI和Font Squirrel的@ font-face生成器

1 个答案: