使用 @font-face 或 cufon 比使用图像更好吗？
我有一个需要 Trade Gothic 的网站。我想知道使用 @font-face 或 cufon 以及看起来类似于 Trade Gothic 的字体是否是更好的做法，或者只是走图像路线。显然，使用图像看起来会更好，但是什么是更好的做法呢？例如，用下面的图像替换标题标题是否不好？
此处标题
span { display:none }
h2 { background:url(image.jpg);display:block;height:x;width:y }
I have a site that requires Trade Gothic. I'm wondering if it's better practice to use @font-face or cufon with a font that looks similar to Trade Gothic or just go the image route. Obviously, using images will look better but what is better practice? For example, is replacing header titles with images like below bad?
<h2><span>title here</span></h2>
span { display:none }
h2 { background:url(image.jpg);display:block;height:x;width:y }
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这取决于您的要求的严格程度以及目标受众的浏览器支持程度，特别是如果您想支持移动设备。
如果使用外观相似的字体就足够好了，那么该要求可能确实是一个很好的功能，因此任何可以优雅降级的功能都应该可以工作。 @font-face 似乎是最容易实现的（只需 CSS 和字体文件），并且不需要 Flash 或 JavaScript（适合移动用户）。 Google Web Fonts 是一个很棒的资源，您甚至可以使用生成器（例如这个。
您必须决定什么最适合大多数受众，并权衡要求的灵活性。如果您使用基于 JavaScript 的解决方案，而观众禁用了它，这会破坏交易吗？图像替换本质上并不是坏事，但如果您有很多内容需要担心（特别是如果它也经常发生变化），那么维护起来可能会很乏味。
It depends on the strictness of your requirement and browser support within your target audience, especially if you want to support mobile devices.
If using a similar-looking font is good enough, the requirement may really be a nice-to-have feature, so anything that degrades gracefully should work. @font-face seems the easiest to implement (just CSS and font files) and it doesn't require Flash or JavaScript (good for mobile users). Google Web Fonts is a great resource or you may even be able to create your own web font using a generator like this one.
You'll have to decide what works best for the majority of your audience and weigh in how flexible the requirement is. If you use a JavaScript-based solution and the audience has it disabled, is that a deal-breaker? Image replacement is not inherently bad, but it can be tedious to maintain if you have much content to worry about (especially if it also changes often).
我两者都用。
我喜欢使用 Cufon 进行导航和/或主标题元素，因为我认为它渲染得更好（特别是在 Windows 中）。
对于任何子标题和其他文本，我使用@font-face，以便用户可以选择文本。
I use both.
I like to use Cufon for navigation and/or main heading elements, because I think it renders better (specifically in Windows).
For any sub-headers and other text, I use @font-face, so that users may select the text.
我目前正在用 @font Face 替换标题图像，因为它们可以更快地加载，并且文本总是对 SEO 更友好，但是执行此操作时必须小心，因为这会增加 http 请求，从而可能需要更长的加载时间。关于哪些字体可以用于网络还存在一些法律问题。
然而，当没有其他字体可以使用时，它尤其理想。
据我所知，仅供参考，浏览器自 IE 4 起就支持 @fontface。
I'm currently replacing header images with @font face, as they can load quicker, and text is always more SEO friendly, however you must be careful when doing this as this increases http requests which can then take longer to load. Also there are some legal issue as to which fonts can be used for web.
However it is especially ideal when no other font will do.
FYI browser support for @font face has been available since IE 4, as far as I know.
好吧，@font-face 和 cufon 相对于您提到的图像替换方法的最明显优势是它们动态生成文本，您不必为每个要替换的文本创建图像。
看看这里：
https://stackoverflow.com/questions/692990/sifr-vs-cufon-vs-字体-js
Well, the most obvious advantage that @font-face and cufon have against the image replacement method that you mention is that they generate your text dynamically and you don't have to create an image for each text that you want to replace.
Take a look here:
https://stackoverflow.com/questions/692990/sifr-vs-cufon-vs-typeface-js