在Web应用程序中使用True类型字体

Question

现在我看到很多网站都使用真正的字体 。 我想知道如何在我们的应用程序中使用真实类型字体，它是否会影响页面的加载时间？

Answer 1

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

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

要使用它：

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

查看html5rocks中的更多信息 。

Answer 2

您使用字体嵌入 。

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

Answer 3

由于时间的推移，我想更新已接受的答案。 以下是Font Squirrel在其推荐的“Optimal”设置下输出的内容。 此时支持.ttf不再重要，应予以忽略。

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

Answer 4

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

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