在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在他们推荐的“最佳”设置下输出的内容。此时的支持.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转换为.eot

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