logo标签列表

如何将一些非标准字体添加到网站？

htmlcssfontsfont-face
579

有没有一种方法可以在网站上添加自定义字体，而不使用图片、Flash或其他图形技术？

例如，我正在制作一个婚礼网站，发现有很多适合这个主题的漂亮字体。但是我找不到正确的方法将该字体添加到服务器上。那么如何通过CSS将该字体包含在HTML中呢？是否可以在不使用图形技术的情况下完成这项操作？

20
自从这个问题被提出以来，@font-face 得到了广泛支持并建议进行一般使用。你只需要知道IE需要不同格式的字体才能与其他浏览器兼容。请参见https://dev59.com/AXE95IYBdhLWcg3wp_kg。 - David Johnstone
16
请确保您拥有分发字体的权利！ - Viet
2
请访问http://typekit.com/，或者价格便宜的话可以到http://www.fontsquirrel.com/。 - bjudson
1
相关：https://dev59.com/6msz5IYBdhLWcg3wNVAR - Adriano
3
www.fontsquirrel.com 看起来很棒，可以生成所需的字体文件并创建良好的弹性 @fontface 语法（与推荐的 http://www.fontspring.com/blog/fixing-ie9-font-face-problems 相同）。 - Adriano
21个回答
559
这可以通过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>

如果您使用TrueType字体（TTF）、Web开放字体格式（WOFF）或嵌入式Opentype（EOT），则它支持所有常规浏览器。

66
因为它是标准，所以并不无用：你越多地实施它，浏览器也就越有可能实施它。这并不意味着你不应该寻找其他补偿的方法，但我认为使用它作为一种补充是很好的。 - Bite code
10
Firefox 3.1支持@font-face。 - Ms2ger
2
@brendanjerwin：你链接的更新版本 - http://brendanjerwin.com/development/web/2009/03/03/embedding-fonts.html - Matt Ball
1
我们能否不使用已损坏的链接，只在此处放置相关信息？通过下载 MS Web Embedding Font Tool (WEFT) 来创建 .eot 文件 @font-face { font-family: "Vineta BT"; src: url(http://MyServer/MyFontLocation/VINETAB0.eot); } - B H
72
大家好，你们猜怎么着？现在已经快到2016年了！现在它已得到广泛支持！耶！很高兴我晚些时候找到了这个答案。哈哈。 - jessica
显示剩余8条评论
140

您可以通过 Google Web Fonts 添加一些字体。

从技术上讲，这些字体托管在 Google 上，您需要在 HTML 标头中链接它们。然后，您可以在 CSS 中自由地使用它们，使用 @font-face (了解更多)。

例如：

在 <head> 部分中：

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

然后在CSS中：

h1 { font-family: 'Droid Sans', arial, serif; }

这个解决方案看起来相当可靠（甚至Smashing Magazine也将其用作文章标题。）。然而，到目前为止Google Font Directory中可用的字体并不是很多。

1
在2014年7月，谷歌扩展了字体并包括支持大多数语言的Google Noto字体https://www.google.com/get/noto/#/。Adobe支持这一开放字体倡议，支持所有语言http://blog.typekit.com/2014/07/15/introducing-source-han-sans/。 - vsingh
似乎（Google Web Fonts）不支持字体的.eot、.woff和.svg版本，它只支持.ttf版本的字体！ - Mahdi Jazini
请注意，目前它对于我来说无法使用type='text/css'，只能使用type='text/html'。 - ChrisoLosoph
83

推荐的方法是使用@font-face CSS声明，它允许作者指定在线字体以在其网页上显示文本。通过允许作者提供自己的字体，@font-face消除了依赖用户计算机上安装的有限字体数量的需要。

请看下表：

enter image description here

如您所见，由于跨浏览器兼容性问题，您需要了解几种格式。移动设备的情况也不太不同。

解决方案：

1 - 完全的浏览器兼容性

这是目前具有最深支持的方法：

@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 - 大多数浏览器

事实上，许多浏览器正在转向使用 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 - 仅适用于最新的浏览器

甚至只需要WOFF格式。
使用方法如下：

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

参考资料和进一步阅读:

这基本上就是你需要了解有关实现此功能的内容。如果您想进一步研究此主题，我鼓励您查看以下资源。我在这里列出的大部分内容都摘自以下材料

2
非常方便的Font Squirrel工具可以生成所需的CSS，以实现完整的浏览器支持。 它甚至允许您将字体上传为以下任何格式之一，将其转换为所有其他格式，并允许您下载它们全部。 当涉及自定义字体时，它是一个救星。 - Jacob Stamm
svgFontName 是什么意思？我应该将其更改为我的字体系列名称还是保留原样？ - Gherman
18

如果你所说的非标准字体指的是标准格式的自定义字体，那么这是我处理它的方式，并且在迄今为止所有我检查过的浏览器中都有效：

@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 */
}

所以，您需要同时拥有ttf和eot字体。一些在线工具可以进行转换。

但是，如果您想使用非标准格式（如位图等）的字体，则我无法提供帮助。

1
在线工具示例：http://www.kirsle.net/wizards/ttf2eot.cgi 离线工具示例：http://code.google.com/p/ttf2eot/wiki/Demo - 还可以使用WOFF字体。 - Wilf
11

我发现在网站上使用非标准字体最简单的方法是使用sIFR。

它涉及使用包含字体的Flash对象，但如果没有安装Flash，则会优雅地退化为标准文本/字体。

样式设置在CSS中，JavaScript为您的文本设置Flash替代。

编辑：（我仍然建议使用图像来表示非标准字体，因为sIFR会增加项目时间并需要维护）。

25
真是个糟糕的想法！我在浏览器中安装了Flash，但也安装了Flashblock。在那个网站上，我的浏览器显示了一个可怕的被毁坏的页面。Flash应该只用于大型动画或电影等场合。过多的Flash非常讨厌，视觉效果也很差…… - Bite code
2
@e-satis：怎么了？就我个人而言，除了微妙的文本渲染差异之外，我从未注意到使用sIFR和不使用它的页面之间的区别。我认为这是一个很好的主意，尽管在支持的情况下，“ @font-face”更好。 - Sasha Chedygov
编辑：（我仍然建议对于非标准字体使用图片，因为sIFR会增加项目的时间并且需要维护）。说得非常好。sIFR确实是一种非常酷的技术，但似乎需要很多工作才能实现你想要的完美效果。如果你有时间学习和精通这种技术，我强烈推荐使用。但如果你正在寻找一个快速简单的字体替换技术，我会使用图像替换甚至是@font-face CSS属性。 - Derek Adair
Adobe Flash 已经过时，不再是一个好的选择。 - Daniel Griscom
11
10

Typeface.js和Cufon是另外两个有趣的选择。它们是JavaScript组件，可以通过新的<canvas>元素在除Internet Explorer之外的所有更新的浏览器中以JSON格式呈现特殊字体数据（您可以从它们的网站上将其转换为TrueType或OpenType格式），并通过VML在Internet Explorer中呈现。

两者的主要问题（至少目前）是无法选择文本，或者只能相当笨拙地选择。

尽管如此，它非常适合用于标题。正文...我不知道。

而且速度惊人地快。

另一个有趣的选择是typekit.com。类似的概念。 - Zack
8

或者您可以尝试使用sIFR。我知道它使用Flash，但仅在可用时才使用。如果Flash不可用，则显示原始文本及其原始（CSS）字体。

4
W3C推荐的实现此功能的技术称为“嵌入”，这三篇文章详细介绍了该技术： 嵌入字体。在我的有限实验中，我发现这个过程容易出错，并且在多浏览器环境下使用的成功率有限。
4

Safari和Internet Explorer都支持CSS @font-face规则，但它们支持两种不同的嵌入式字体类型。Firefox计划很快支持与苹果相同的类型。SVG可以嵌入字体，但目前尚未得到广泛支持（没有插件）。

我认为最可移植的解决方案是使用JavaScript函数替换标题等内容为在服务器上生成并缓存的所选字体的图像 - 这样您只需更新文本而不必在Photoshop中处理。

这不一定非得用JavaScript来完成。我知道现在很多人喜欢在许多方面使用JavaScript，但是在这里，标准的CSS技术可能更加适合。请参考http://www.sitepoint.com/article/header-images-css-xhtml/。 - hangy
如果有任何困惑，我很抱歉。这个技术并不是指图像替换的方法，就像你所说的，可以使用CSS实现。它是关于在服务器上动态生成代表特定字体/样式的字符串的图形，从而避免手动创建这些图形。 - zobier
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接