有没有一种方法可以在网站上添加一些自定义字体，而不使用图像，Flash或其他图形?
例如，我在一个婚礼网站上工作，我为这个主题找到了很多漂亮的字体。但是我找不到在服务器上添加那种字体的正确方法。我如何将CSS字体包含到HTML中?如果没有图像，这可能吗?
当前回答
@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");
}
其他回答
Safari和Internet Explorer都支持CSS @font-face规则，但是它们支持两种不同的嵌入式字体类型。Firefox计划在不久的将来支持与Apple相同的类型。SVG可以嵌入字体，但还没有得到广泛支持(没有插件)。
我认为我所见过的最可移植的解决方案是使用JavaScript函数将标题等替换为生成的图像，并使用你所选择的字体缓存在服务器上——这样你就可以简单地更新文本，而不必在Photoshop中进行处理。
我发现在网站上使用非标准字体最简单的方法是使用sIFR
它确实涉及到包含字体的Flash对象的使用，但如果没有安装Flash，它会很好地降级为标准文本/字体。
样式在CSS中设置，JavaScript为文本设置Flash替换。
编辑:(我仍然建议使用非标准字体的图像，因为sIFR会增加项目的时间，并且可能需要维护)。
这可以通过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)，所有常规浏览器都支持它。
如果您有一个字体文件，那么您将需要为其他浏览器添加该字体的更多格式。
出于这个目的，我使用Fontsquirrel这样的字体生成器，它提供了所有的字体格式和它的@font-face CSS，你只需要将它拖放到你的CSS文件中。
字体.js和Cufon是另外两个有趣的选项。它们是JavaScript组件，通过除Internet Explorer以外的所有新浏览器中的<canvas>元素和Internet Explorer中的VML以JSON格式呈现特殊字体数据(您可以在其网站上从TrueType或OpenType格式转换)。
两者的主要问题(到目前为止)都是选择文本不工作，或者至少工作起来相当笨拙。
尽管如此，它还是很适合做头条新闻。正文……我不知道。
而且速度惊人。
