在Web应用程序中使用TrueType字体

Question

在Web应用程序中使用TrueType字体

htmlperformancebrowserfonts

63

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

- Sudantha

你可能还想为Windows支持添加EOF字体：https://dev59.com/fmw15IYBdhLWcg3wuuGn - Raydot

4个回答

8

由于时间的显著流逝，我希望更新被接受的答案。以下是Font Squirrel在他们推荐的“Optimal”设置下的输出。目前不再支持.ttf，应该忽略。

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

- Andy Hoffman

这是一个很好的服务，如果你只需要英文字体，它会裁剪其他语言的字体。只要记住这一点。 - AC1D

6

您使用了字体嵌入。

它会影响页面的整体加载时间，因为字体数据必须与其他内容、样式等一起下载。但是，它将被缓存，只会影响页面的第一次查看。

- ChrisF

-3

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

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

- James Reategui

7

不回答问题。 - Asim K T

7

这个回答已经过时了8年，尽管当时它是一个好的回答。对于现代的浏览器，我建议在CSS中使用HTML5 TTF字体。 - James Reategui

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fguillen · Accepted Answer

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

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

使用它：

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

在 html5rocks 上查看更多信息。