如何在网站上添加一些非标准字体？

有关替代方法，请参见文章50个有用的漂亮Web版式设计工具。

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

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

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

看起来它只能在Internet Explorer中使用，但是Google快速搜索“ html embed fonts”会产生http://www.spoono.com/html/tutorials/tutorial.php?id=19

如果要保持平台无关性（并且应该！），则必须使用图像，否则仅使用标准字体。

Typeface.js JavaScript方式：

使用typeface.js，您可以在网页中嵌入自定义字体，从而不必将文本呈现为图像

您可以使用typeface.js并以纯HTML和CSS编写内容，就像访问者已在本地安装字体一样，而不必创建图像或仅使用Flash来以所需字体显示网站的图形文本。

http://typeface.neocracy.org/

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

该技术使用图像，但似乎是“免提”的。您编写文本，然后让一些自动化脚本在页面上为您即时进行自动查找和替换。

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

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

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

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

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

然后以该字体绘制到上Graphics。

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

文章字体面在IE中：使Web字体工作说，它适用于所有三种主要的浏览器。

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

有关嵌入字体的更多讨论。

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

两者的主要问题（到现在为止）是选择文本不起作用，或者至少只能非常笨拙地起作用。

尽管如此，对于头条新闻还是很好的。正文...我不知道。

而且速度惊人。

或者，您可以尝试sIFR。我知道它使用Flash，但前提是可用。如果没有Flash，它将以其原始（CSS）字体显示原始文本。

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

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

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

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

如果使用非标准字体，则表示标准格式的自定义字体，这是我的操作方法，它适用于到目前为止我检查过的所有浏览器：

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

但是，如果您想附加非标准格式的字体（位图等），我无济于事。

这可以通过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 browsers if you use TrueType-Fonts (TTF) or the Web Open Font Format (WOFF).