我如何在 CSS 中使用自定义字体
为了使用浏览器不支持的自定义字体，我可以尝试哪些选项？
What are some of the options I could try in order to use a custom font that is not supported by the browsers?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
更新：截至 2015 年，最好的选择是使用 CSS3 font-face，几乎所有地方都支持它。 Google Fonts 平台上有很好的例子。
正确知道可能最好的选择是 cufon： http://cufon.shoqolate.com/generate/
它是一个 JavaScript 库，它将服务器上的字体文件转换为浏览器中这些字体的 JavaScript 表示形式。适用于所有主要浏览器，看起来非常漂亮，不会减慢速度（就像旧的基于 Flash 的 sIFR 解决方案），但确实需要 JavaScript。 （没有它，您仍然会看到所有文本，但使用标准字体）。
或者您可以使用 CSS3 字体： http://randsco.com/index .php/2009/07/04/p680
基本上，您将字体放在服务器上，然后使用 CSS 来呈现它们，简单明了。所有浏览器都不太支持它，但现在它可能是您最好的选择。不需要 JavaScript。 （我知道我说过 cufon 是你最好的镜头，但这两个都同样好，只是他们的方式有点不同）
更新：另外，font-face 可能更好的另一个原因是，与它一起使用的文本变得只是与文档中的任何其他文本一样。 Cufoned 文本在大多数浏览器中变成画布标签，并且存在文本选择等问题。另外，如果您在任何大量文本上使用 cufon（例如整篇文章的文本，而不仅仅是标题），它可能会变得相当慢（因为 JavaScript 必须渲染大量文本）在这种情况下）。不过标题很好。
UPDATE: As of 2015, the best option is to use CSS3 font-face, it's supported literally almost everywhere. There are good examples on the Google Fonts platform.
Right know probably the best option is cufon: http://cufon.shoqolate.com/generate/
It is a JavaScript libary that converts your font file on their server to a JavaScript-representation of those fonts in the browser. Works in all major browsers, looks really nice, does not slow down (like the older flash-based sIFR solution), but does require JavaScript. (without it you will still see all the text but with standard font).
Or you could use the CSS3 font-face: http://randsco.com/index.php/2009/07/04/p680
Where you basically put your fonts on the server and then use CSS to render them, plain and simple. It was a little badly supported by ALL browsers, but now it's probably your best shot. Does not require JavaScript. (I know I said cufon was your best shot, but those two are equally good, they just do it in a little different ways)
Update: Also, another reason why font-face might be better is that the text used with it becomes just like any other text in the document. Cufoned text becomes canvas tags in most browsers, and there are issues with for example text selection. Also, if you would've used cufon on any big amounts of text (like the text of the whole article, as opposed to just the heading of it), it would potentially become pretty slow (as JavaScript has to render a lot of text in that case). Headings are fine though.
我会推荐 Google Web Fonts。它易于使用，并且所有字体都是免费的。您只需选择一种字体并获取添加到代码中的脚本标记。就这么简单。 Google 字体。
I would reccomend Google Web Fonts. It's easy to use and all the fonts are free. You just choose a font and get a script tag that you add to your code. Simple as that. Google Fonts.
你可以使用 Typekit 来做到这一点，这是一个很酷的基于 javascript 订阅的解决方案，允许你使用大量的自定义字体库。
请访问：
http://typekit.com/
太棒了！
安迪
you can do it with Typekit, which is a cool javascript subscription based solution that allows you to use a massive library of custom fonts.
check it out at:
http://typekit.com/
It's sweet!
Andy
我不认为这可以通过 css 使用 Cufon 来实现。这会将您的文本/标题通过用图像替换来转换为您的字体。搜索机器人仍然能够正确索引它。 （SEO 友好）
http://cufon.shoqolate.com/generate/
https://github.com/sorccu/cufon/wiki/
I dont think this can be done with css use Cufon to achieve this. This will convert your text / titles to you font by replacing them with images. The search bot will still be able to index it properly. ( SEO friendly )
http://cufon.shoqolate.com/generate/
https://github.com/sorccu/cufon/wiki/
您还可以使用 fontsquirrel 上的生成功能，它会生成一个包含不同格式字体的 zip 文件，以便您可以将它们与 @font-face css 属性一起使用。适用于多种浏览器，包括 IE。
http://www.fontsquirrel.com/fontface/generator
You could also use the generate at fontsquirrel, which generates you a zip file with your font in different formats so you can use them with the @font-face css property. Works in several browsers, including IE.
http://www.fontsquirrel.com/fontface/generator