在 Web 应用程序中使用 True type 字体答案

【问题标题】：Using True type fonts in web applications在 Web 应用程序中使用 True type 字体
【发布时间】：2011-05-15 02:57:04
【问题描述】：

目前我看到很多网站都使用 true type 字体。我想知道如何在我们的应用程序中使用 True Type 字体，它会影响页面的加载时间吗？

【问题讨论】：

您可能还想添加 EOF 字体以支持 Windoze：stackoverflow.com/questions/6437061/…

标签： html performance browser fonts

【解决方案1】：

HTML5 允许在您的 CSS 中使用 TTF 字体：

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

使用它：

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

检查more information in html5rocks。

【讨论】：

这太棒了！谢谢！
这个跨浏览器兼容@fguillen 吗？
@AliGajani developer.mozilla.org/en-US/docs/Web/CSS/…
从上面发布的链接中，fontsquirrel 为我解决了这个问题。谢谢！我建议人们尝试 fontsquirrel。

【解决方案2】：

你使用Font Embedding。

它将影响页面的整体加载时间，因为必须下载字体数据以及其他内容、样式等。但是，它将被缓存，因此仅影响页面的第一次视图。

【讨论】：

【解决方案3】：

由于时间过长，我想更新已接受的答案。以下是Font Squirrel 在他们推荐的“最佳”设置下输出的内容。此时支持.ttf 不再重要，应该被忽略。

font-family: 'Tagesschrift';
  src: url('tagesschrift.woff2') format('woff2'),
       url('tagesschrift.woff') format('woff');
  font-weight: normal;
  font-style: normal;

【讨论】：

如果您只需要英文字体，这是一项很好的服务，它会削减其他语言的字体。请记住

【解决方案4】：

由于浏览器兼容性问题，字体嵌入可能有点复杂。例如，Safari 仅支持 SVG 字体。 IE只支持.eot，必须先转换成.ttf

我发现使用自定义字体最简单的方法是使用Google Fonts 除了有免费的 google 字体目录可供选择外，还有一些供应商提供更广泛的免费和购买字体选择。

【讨论】：

不回答问题。
这个答案已经过时了 8 年，在当时是一个很好的答案。对于现代浏览器，我建议在 css 中使用 HTML5 TTF。