如何将外部字体加载到 HTML 文档中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2237540/
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
How do I load external fonts into an HTML document?
提问by Eric
How do I load external font files into an HTML document.
如何将外部字体文件加载到 HTML 文档中。
Example: Make the text "blah blah blah blah blah blah blah" a custom font from a TTF file in the same directory using HTML CSS and/or JAVASCRIPT
示例：使用 HTML CSS 和/或 JAVASCRIPT 从同一目录中的 TTF 文件中将文本“blah blah blah blah blah blah blah blah”设为自定义字体
回答by Chris Van Opstal
Take a look at this A List Apart article. The pertinent CSS is:
看看这篇A List Apart 文章。相关的 CSS 是：
@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }
The above will work in Chrome/Safari/FireFox. As Paul D. Waite pointed out in the comments you can get it to work with IE if you convert the font to the EOT format.
以上将在 Chrome/Safari/FireFox 中工作。正如 Paul D. Waite 在评论中指出的，如果您将字体转换为EOT 格式，您可以让它与 IE 一起使用。
The good news is that this seems to degrade gracefully in older browsers, so as long as you're aware and comfortable with the fact that not all users will see the same font, it's safe to use.
好消息是，这在较旧的浏览器中似乎可以优雅地降级，因此只要您意识到并非所有用户都会看到相同字体的事实并对此感到满意，就可以安全使用。
回答by Sean Vieira
Paul Irish has a way to do this that covers most of the common problems. See his bullet-proof @font-face article:
保罗爱尔兰有一种方法可以解决大多数常见问题。请参阅他的防弹@font-face 文章：
The final variant, which stops unnecessary data from being downloaded by IE, and works in IE8, Firefox, Opera, Safari, and Chrome looks like this:
最后一个变体，它阻止 IE 下载不必要的数据，并在 IE8、Firefox、Opera、Safari 和 Chrome 中工作，如下所示：
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
He also links to a generatorthat will translate the fonts into all the formats you need.
他还链接到一个生成器，该生成器会将字体转换为您需要的所有格式。
As others have already specified, this will only work in the latest generation of browsers. Your best bet is to use this in conjunction with something like Cufon, and only load Cufon if the browser doesn't support @font-face.
正如其他人已经指定的那样，这仅适用于最新一代的浏览器。最好的办法是将它与 Cufon 之类的东西结合使用，并且只有在浏览器不支持@font-face.
回答by roflwaffle
CSS3 offers a way to do it with the @font-face rule.
CSS3 提供了一种使用 @font-face 规则来实现的方法。
http://www.w3.org/TR/css3-webfonts/#the-font-face-rule
http://www.w3.org/TR/css3-webfonts/#the-font-face-rule
http://www.css3.info/preview/web-fonts-with-font-face/
http://www.css3.info/preview/web-fonts-with-font-face/
Hereis a number of different ways which will work in browsers that don't support the @font-face rule.
这里有许多不同的方法可以在不支持 @font-face 规则的浏览器中工作。
回答by aviv
Regarding Jay Stevens answer: "The fonts available to use in an HTML file have to be present on the user's machine and accessible from the web browser, so unless you want to distribute the fonts to the user's machine via a separate external process, it can't be done." That's true.
关于 Jay Stevens 的回答：“可在 HTML 文件中使用的字体必须存在于用户的机器上并可从 Web 浏览器访问，因此除非您想通过单独的外部进程将字体分发到用户的机器，否则它可以没完没了。” 确实如此。
But there is another way using javascript / canvas / flash - very good solution gives cufon: http://cufon.shoqolate.com/generate/library that generates a very easy to use external fonts methods.
但是还有另一种使用 javascript/canvas/flash 的方法 - 非常好的解决方案提供了 cufon：http://cufon.shoqolate.com/generate/库，它生成一个非常易于使用的外部字体方法。
回答by jpabluz
If you want to support more browsers than the CSS3 fancy, you can look at the open source library cufon javascript library
如果你想支持比CSS3花式更多的浏览器，可以看开源库cufon javascript library
And here is the API, if you want to do more funky stuff.
如果你想做更多时髦的事情，这里是API。
Major Pro: Allows you to do what you want / need.
Major Pro：允许您做您想做/需要的事情。
Major Con: Disallows text selection in some browsers, so use is appropiate on header texts (but you can use it in all your site if you want)
主要缺点：在某些浏览器中不允许选择文本，因此适用于标题文本（但如果需要，您可以在所有站点中使用它）
回答by Graham Clark
Microsoft have a proprietary CSS method of including embedded fonts (http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx), but this probably shouldn't be recommended.
Microsoft 有一种包含嵌入字体的专有 CSS 方法 ( http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx)，但这可能不应该被推荐。
I've used sIFRbefore as this works great - it uses Javascript and Flash to dynamically replace normal text with some Flash containing the same text in the font you want (the font is embedded in a Flash file). This does not affect the markup around the text (it works by using a CSS class), you can still select the text, and if the user doesn't have Flash or has it disabled, it will degrade gracefully to the text in whatever font you specify in CSS (e.g. Arial).
我以前使用过sIFR，因为它非常有效 - 它使用 Javascript 和 Flash 动态地用一些 Flash 替换普通文本，其中包含您想要的字体（该字体嵌入在 Flash 文件中）中的相同文本。这不会影响文本周围的标记（它通过使用 CSS 类工作），您仍然可以选择文本，如果用户没有 Flash 或禁用它，它将优雅地降级为任何字体的文本您在 CSS 中指定（例如 Arial）。
回答by Lead Developer
Try this
尝试这个
<style>
@font-face {
font-family: Roboto Bold Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
font-family:Roboto Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}
div1{
font-family:Roboto Bold Condensed;
}
div2{
font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
回答by Mark Manning
I did not see any reference to Raphael.js. So I thought I'd include it here. Raphael.js is backwards compatible all the way back to IE5 and a very early Firefox as well as all of the rest of the browsers. It uses SVG when it can and VML when it can not. What you do with it is to draw onto a canvas. Some browsers will even let you select the text that is generated. Raphael.js can be found here:
我没有看到任何对 Raphael.js 的引用。所以我想我会把它包括在这里。Raphael.js 一直向后兼容 IE5 和非常早期的 Firefox 以及所有其他浏览器。它在可以时使用 SVG，在不能时使用 VML。你用它做的是在画布上画画。某些浏览器甚至会让您选择生成的文本。Raphael.js 可以在这里找到：
It can be as simple as creating your paper drawing area, specifying the font, font-weight, size, etc... and then telling it to put your string of text onto the paper. I am not sure if it gets around the licensing issues or not but it is drawing the text so I'm fairly certain it does circumvent the licensing issues. But check with your lawyer to be sure. :-)
它可以像创建你的纸绘图区一样简单，指定字体、字体粗细、大小等......然后告诉它把你的文本字符串放在纸上。我不确定它是否解决了许可问题，但它正在绘制文本，所以我相当确定它确实规避了许可问题。但请咨询您的律师以确保。:-)
