Html 在 Web 应用程序中使用 True type 字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4267415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using True type fonts in web applications
提问by Sudantha
Present I see lot of web sites use true type fonts. I want to to know how to use true type fonts in our applications and does it affect the load time of the pages ?
目前我看到很多网站都使用真字体。我想知道如何在我们的应用程序中使用真字体，它会影响页面的加载时间吗？
采纳答案by James Reategui
Font embedding can be a bit complicated due to browser compatibility issues. For example, Safari only supports SVG fonts. IE only supports .eot, which must first be converted from .ttf
由于浏览器兼容性问题，字体嵌入可能有点复杂。例如，Safari 仅支持 SVG 字体。IE 只支持 .eot，必须先从 .ttf 转换
I have found the easiest way to use custom fonts is with Google FontsBesides having the free google font directory to choose from, there are a few providers that provide a much wider selection of fonts for free and to purchase.
我发现使用自定义字体的最简单方法是使用Google Fonts除了有免费的 google 字体目录可供选择之外，还有一些提供商提供了更多免费和购买的字体选择。
回答by fguillen
HTML5 allows to use TTFfonts in your CSS:
HTML5 允许在你的 CSS 中使用TTF字体：
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
To use it:
要使用它：
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
回答by ChrisF
You use Font Embedding.
您使用字体嵌入。
It will affect the overall load time of the page as the font data has to be downloaded as well as the other content, styles etc. However, it will be cached so only impacts on the first view of the page.
它会影响页面的整体加载时间，因为必须下载字体数据以及其他内容、样式等。但是，它会被缓存，因此只会影响页面的第一个视图。
回答by Andy Hoffman
I want to update the accepted answer due to a significant passage of time. The following is what Font Squirreloutputs under their recommended 'Optimal' setting. Supporting .ttfat this point is no longer important and should be ignored.
由于时间过长，我想更新已接受的答案。以下是Font Squirrel在他们推荐的“最佳”设置下输出的内容。此时的支持.ttf不再重要，应该被忽略。
font-family: 'Tagesschrift';
src: url('tagesschrift.woff2') format('woff2'),
url('tagesschrift.woff') format('woff');
font-weight: normal;
font-style: normal;
