如何将外部字体加载到HTML文档中?

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文件中使用自定义字体。

8 个解决方案

#1

Take a look at this A List Apart article. The pertinent CSS is:

看看这篇文章。相关的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.

好消息是，在较老的浏览器中，这一功能似乎降低得很好，只要您意识到并不是所有用户都能看到相同的字体，那么使用它是安全的。

#2

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 generator that 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时才加载Cufon。

#3

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/

Here is a number of different ways which will work in browsers that don't support the @font-face rule.

这里有许多不同的方法，它们将在不支持@font-face规则的浏览器中工作。

#4

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/ library，它可以生成非常容易使用的外部字体方法。

#5

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库

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 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)

主要缺点:在某些浏览器中不允许文本选择，所以在标题文本中使用是被认可的(但是如果你想的话，你可以在所有的网站中使用)

#6

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.

微软有一个专有的CSS方法，包括嵌入式字体(http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx)，但这可能不值得推荐。

I've used sIFR before 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)。

#7

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>

#8

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的东西。所以我想把它写在这里。拉斐尔。从IE5到早期的Firefox，再到其他浏览器，js都是向后兼容的。可以使用SVG，不能使用VML。你要做的就是在画布上作画。有些浏览器甚至会让你选择生成的文本。拉斐尔。js可以在这里找到:

http://raphaeljs.com/

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. :-)

它可以简单到创建你的纸张绘图区域，指定字体、字体大小、大小等。然后告诉它把你的文本串放到纸上。我不确定它是否绕过了许可问题，但它正在绘制文本，所以我相当确定它确实绕过了许可问题。但是你要和你的律师确认一下。:-)

#1