Html 如何向网站添加一些非标准字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/107936/
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 to add some non-standard font to a website?
提问by vaske
Is there a way to add some custom font on a website without using images, Flashor some other graphics?
有没有办法在不使用图像、Flash或其他图形的情况下在网站上添加一些自定义字体？
For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. But I can't find the right way to add that font on the server. And how do I include that font with CSS into the HTML? Is this possible to do without graphics?
例如，我在一个婚礼网站上工作，我发现了很多适合该主题的漂亮字体。但是我找不到在服务器上添加该字体的正确方法。以及如何将带有 CSS 的字体包含到 HTML 中？这可以在没有图形的情况下完成吗？
采纳答案by hangy
This could be done via CSS:
这可以通过 CSS 来完成：
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
It is supported for all of the regular browsersif you use TrueType-Fonts (TTF) or the Web Open Font Format (WOFF).
如果您使用 TrueType-Fonts (TTF) 或 Web Open Font Format (WOFF) ，则所有常规浏览器都支持它。
回答by Micha? P?ka?a
You can add some fonts via Google Web Fonts.
您可以通过Google Web Fonts添加一些字体。
Technically, the fonts are hosted at Google and you link them in the HTML header. Then, you can use them freely in CSS with @font-face(read about it).
从技术上讲，字体由 Google 托管，您可以在 HTML 标题中链接它们。然后，您可以在 CSS 中自由使用它们@font-face（阅读有关内容）。
For example:
例如：
In the <head>section:
在该<head>部分：
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
Then in CSS:
然后在 CSS 中：
h1 { font-family: 'Droid Sans', arial, serif; }
The solution seems quite reliable (even Smashing Magazine uses it for an article title.). There are, however, not so many fonts available so far in Google Font Directory.
该解决方案似乎非常可靠（甚至Smashing Magazine 也将其用于文章标题。）。但是，到目前为止，Google 字体目录中可用的字体并不多。
回答by Javier Cadiz
The way to go is using the @font-face CSS declaration which allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.
要走的路是使用@font-face CSS 声明，它允许作者指定在线字体以在他们的网页上显示文本。通过允许作者提供他们自己的字体，@font-face 消除了依赖于用户在他们的计算机上安装的有限数量的字体的需要。
Take a look at the following table:
看看下表：
As you can see, there are several formats that you need to know about mainly due to cross-browser compatibility. The scenario in mobile devices isn't much different.
如您所见，由于跨浏览器兼容性，您需要了解多种格式。移动设备中的场景没有太大不同。
Solutions:
解决方案：
1 - Full browser compatibility
1 - 完整的浏览器兼容性
This is the method with the deepest support possible right now:
这是目前支持最深的方法：
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
2 - Most of the browser
2 - 大多数浏览器
Things are shifting heavily toward WOFFthough, so you can probably get away with:
不过，事情正在严重转向 WOFF，因此您可能可以逃脱：
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
3 - Only the latest browsers
3 - 只有最新的浏览器
Or even just WOFF.
You then use it like this:
或者甚至只是 WOFF。
然后像这样使用它：
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
References and Further reading:
参考资料和进一步阅读：
That's mainly what you need to know about implementing this feature. If you want to research more on the subject I'll encourage to take a look at the following resources. Most of what I put here is extracted from the following
这主要是您在实现此功能时需要了解的内容。如果您想对该主题进行更多研究，我会鼓励您查看以下资源。我放在这里的大部分内容都是从以下内容中提取的
回答by BiAiB
If by non standard font, you mean custom font of a standard format, here's how I do it, and it works for all browsers I've checked so far:
如果使用非标准字体，您的意思是标准格式的自定义字体，我是这样做的，它适用于我迄今为止检查过的所有浏览器：
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
font-family: TempestaSevenCondensed;
src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}
so you'll just need both the ttf and eot fonts. Some tools available online can make the conversion.
所以你只需要 ttf 和 eot 字体。一些在线可用的工具可以进行转换。
But if you want to attach font in a non standard format (bitmaps etc), I can't help you.
但是如果你想以非标准格式（位图等）附加字体，我帮不了你。
回答by Matt
I've found that the easiest way to have non-standard fonts on a website is to use sIFR
我发现在网站上使用非标准字体的最简单方法是使用sIFR
It does involve the use of a Flash object that contains the font, but it degrades nicely to standard text / font if Flash is not installed.
它确实涉及使用包含字体的 Flash 对象，但如果未安装 Flash，它会很好地降级为标准文本/字体。
The style is set in your CSS, and JavaScript sets up the Flash replacement for your text.
样式在您的 CSS 中设置，JavaScript 为您的文本设置 Flash 替换。
Edit: (I still recommend using images for non-standard fonts as sIFR adds time to a project and can require maintenance).
编辑：（我仍然建议使用非标准字体的图像，因为 sIFR 会增加项目的时间并且可能需要维护）。
回答by brendanjerwin
The article Font-face in IE: Making Web Fonts Worksays it works with all three major browsers.
文章字体面在IE中：使Web字体工作说，它适用于所有三种主要的浏览器。
Here is a sample I got working: http://brendanjerwin.com/test_font.html
这是我工作的示例：http: //brendanjerwin.com/test_font.html
More discussion is in Embedding Fonts.
更多讨论在Embedding Fonts。
回答by Thomas
Typeface.jsand Cufonare two other interesting options. They are JavaScript components that render special font data in JSON format (which you can convert from TrueTypeor OpenTypeformats on their web sites) via the new <canvas> element in all newer browsers except Internet Explorer and via VMLin Internet Explorer.
Typeface.js和Cufon是另外两个有趣的选择。它们是 JavaScript 组件，可通过除 Internet Explorer 之外的所有较新浏览器中的新 <canvas> 元素以及 Internet Explorer 中的VML以JSON 格式（您可以在其网站上从TrueType或OpenType格式转换）呈现特殊字体数据。
The main problem with both (as of now) is that selecting text does not work or at least works only quite awkwardly.
两者的主要问题（截至目前）是选择文本不起作用，或者至少只能非常笨拙地工作。
Still, it is very nice for headlines. Body text... I don't know.
不过，这对头条新闻来说非常好。正文...我不知道。
And it's surprisingly fast.
而且速度快得惊人。
回答by Casper
回答by Steve Moyer
The technique that the W3C has recommended for do this is called "embedding" and is well described by the three articles here: Embedding Fonts. In my limited experiments, I have found this process error-prone and have had limited success in making it function in a multi-browser environment.
W3C 推荐用于执行此操作的技术称为“嵌入”，此处的三篇文章对此进行了详细描述：嵌入字体。在我有限的实验中，我发现这个过程容易出错，并且在使其在多浏览器环境中运行方面取得的成功有限。
回答by zobier
Safari and Internet Explorer both support the CSS @font-face rule, however they support two different embedded font types. Firefox is planning to support the same type as Apple some time soon. SVG can embed fonts but isn't that widely supported yet (without a plugin).
Safari 和 Internet Explorer 都支持 CSS @font-face 规则，但是它们支持两种不同的嵌入字体类型。Firefox 计划在不久的将来支持与 Apple 相同的类型。SVG 可以嵌入字体，但还没有得到广泛支持（没有插件）。
I think the most portable solution I've seen is to use a JavaScript function to replace headings etc. with an image generated and cached on the server with your font of choice -- that way you simply update the text and don't have to stuff around in Photoshop.
我认为我见过的最便携的解决方案是使用 JavaScript 函数用您选择的字体生成并缓存在服务器上的图像替换标题等 - 这样您只需更新文本而不必在 Photoshop 中的东西。
