html - 如何向网站添加一些非标准字体？

Question

有没有办法在不使用图像、Flash或其他图形的情况下在网站上添加一些自定义字体？

例如，我在一个婚礼网站上工作，我为这个主题找到了很多不错的字体。但我找不到在服务器上添加该字体的正确方法。以及如何将带有 CSS 的字体包含到 HTML 中？这可以在没有图形的情况下完成吗？

score 531 · Accepted Answer

这可以通过 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-Fonts (TTF)、Web Open Font Format (WOFF) 或 Embedded Opentype (EOT)，则所有常规浏览器都支持它。

score 130 · Accepted Answer

您可以通过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 字体目录中可用的字体并不多。

score 81 · Accepted Answer

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

看看下表：

在此处输入图像描述

如您所见，主要由于跨浏览器兼容性，您需要了解几种格式。移动设备中的情况并没有太大的不同。

解决方案：

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;
}

参考资料和延伸阅读：

这主要是您在实现此功能时需要了解的内容。如果您想对该主题进行更多研究，我鼓励您查看以下资源。我放在这里的大部分内容都是从以下内容中提取的

score 18 · Accepted Answer

如果使用非标准字体，您的意思是标准格式的自定义字体，我就是这样做的，它适用于我迄今为止检查过的所有浏览器：

@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 字体。一些在线可用的工具可以进行转换。

但是如果你想附加非标准格式的字体（位图等），我帮不了你。

score 12 · Accepted Answer

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

它确实涉及使用包含字体的 Flash 对象，但如果未安装 Flash，它会很好地降级为标准文本/字体。

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

编辑：（我仍然建议将图像用于非标准字体，因为 sIFR 会增加项目时间并且可能需要维护）。

score 11 · Accepted Answer

IE中的Font-face：使 Web 字体工作一文说它适用于所有三种主要浏览器。

这是我工作的示例：http: //brendanjerwin.com/test_font.html

更多讨论在Embedding Fonts中。

score 10 · Accepted Answer

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

两者的主要问题（截至目前）是选择文本不起作用或至少只能非常笨拙地起作用。

尽管如此，它仍然非常适合头条新闻。正文...我不知道。

而且速度出奇的快。

score 8 · Accepted Answer

或者你可以试试sIFR。我知道它使用 Flash，但前提是可用。如果 Flash 不可用，它会以其原始 (CSS) 字体显示原始文本。

score 4 · Accepted Answer

W3C 推荐的用于执行此操作的技术称为“嵌入”，这里的三篇文章对此进行了很好的描述：嵌入字体。在我有限的实验中，我发现这个过程容易出错，并且在使其在多浏览器环境中运行方面取得的成功有限。

score 4 · Accepted Answer

Safari 和 Internet Explorer 都支持 CSS @font-face 规则，但是它们支持两种不同的嵌入字体类型。Firefox 计划在不久的将来支持与 Apple 相同的类型。SVG 可以嵌入字体，但还没有得到广泛支持（没有插件）。

我认为我见过的最便携的解决方案是使用 JavaScript 函数用您选择的字体生成并缓存在服务器上的图像替换标题等 - 这样您只需更新文本而不必Photoshop中的东西。

score 4 · Accepted Answer

如果您使用 ASP.NET，生成基于图像的字体非常容易，而无需在服务器上实际安装（如添加到已安装的字体库）字体，方法是使用：

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

然后用该字体在Graphics.

score 3 · Accepted Answer

看起来它只适用于 Internet Explorer，但谷歌快速搜索“html embed fonts”会产生http://www.spoono.com/html/tutorials/tutorial.php?id=19

如果你想保持平台无关（你应该！），你将不得不使用图像，或者只使用标准字体。

score 3 · Accepted Answer

我做了一些研究并挖掘了动态文本替换（2004-06-15 发布）。

这种技术使用图像，但它似乎是“免提”的。您编写文本，并让一些自动化脚本在页面上为您自动查找和替换。

它有一些限制，但它可能是比我见过的所有其他选择更容易的选择之一（并且与浏览器更兼容）。

score 3 · Accepted Answer

也可以使用 WOFF 字体 - 例如这里

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }

score 3 · Accepted Answer

只需简单地提供这样的实际字体的链接，你就可以开始了

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>

score 2 · Accepted Answer

有关替代方法，请参阅文章50 Useful Design Tools For Beautiful Web Typography 。

我只用过Cufon。我发现它可靠且易于使用，因此我坚持使用它。

score 2 · Accepted Answer

Typeface.js JavaScript 方式：

使用 typeface.js，您可以在网页中嵌入自定义字体，这样您就不必将文本渲染到图像中

您可以使用 typeface.js 并以纯 HTML 和 CSS 编写，而不是创建图像或使用 flash 来以您想要的字体显示您的站点的图形文本，就像您的访问者在本地安装了字体一样。

http://typeface.neocracy.org/

score 2 · Accepted Answer

如果您有字体文件，那么您将需要为其他浏览器添加更多格式的该字体。

为此，我使用像Fontsquirrel这样的字体生成器，它提供了所有字体格式及其@font-face CSS，您只需将其拖放到您的 CSS 文件中即可。

score 1 · Accepted Answer

@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}

html - 如何向网站添加一些非标准字体？

19 回答 19

解决方案：

参考资料和延伸阅读：

Related

Reference