@font-face vs Google 字体 vs Cufon
因此，我被迫在我正在开发的网站上使用 @font-face，并且不得不说，与 Google Fonts 相比，我对跨浏览器渲染质量印象深刻，但它似乎确实对http 请求与 Cufon 相比，因为每种字体需要四种变体用于正文，有时需要几个变体用于标题。
我通常使用 cufon，因为我发现它灵活、可靠的跨浏览器和移动性，尽管有时会出现一些奇怪的空白问题，但它很容易使用。我没有对谷歌字体做太多的事情，因为在某些浏览器中渲染效果很糟糕。
显然科技已经进步了！这三者有何不同，这三者中的任何一个都存在严重的缺陷吗？
So I've been forced by circumstances into using @font-face on a site I'm developing, and have to say I'm impressed by the cross browser render quality compared to Google Fonts but it does seem to have a heavy impact on http requests compared to Cufon, as you need four variants per font for body copy and sometimes a couple for headings.
I've generally worked with cufon as I've found it to be flexible, reliable cross-browser and mobile, and despite some odd white-space issues on occasion, easy to work with. I've not done much with the Google fonts as the render sucks in some browsers.
Obviously tech has moved on! How do these three differ, are there any serious pitfalls with any of the three?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为在 @font-face、浏览器默认值和 cufon 之间进行选择有两个考虑因素。
1.使用 CSS 维护网站的外观是多么容易
当对网站的任何部分使用 javascript 解决方案时，重要的是（至少对我来说）网站无论有没有 javascript 都看起来不错。这意味着如果用户在页面完成加载之前单击“停止”，该类型仍将位于设计中的位置。这意味着可以使用默认字体进行后备。我发现这在过去确实是一个问题，因为 cufon 字体的行高可能与常规字体的行高有很大不同，因此有必要编写多余的 css 来控制这些情况以及跨浏览器的不规则性——简而言之，屁股痛。
使用@font-face，特别是使用谷歌字体或typekit，字体是高质量挑选的，并且在跨浏览器上显示可预测且一致良好（相对于布局和行高）。例如，您可以从 proxima-nova 切换回默认的 arial，而不会影响布局 - 我发现这对 cufon 来说是一个挑战。
2.用户需要如何与网站交互
我希望能够突出显示文本、搜索文本以及将鼠标悬停在文本上时看到文本光标。你不能用 cufon 做到这一点。如果您的网站信息较多，cufon 并不是一个好的选择。
我想说，对于较小的网站来说，Cufon 是一个不错的选择，因为这些网站的美观与内容同等重要（因为如果没有用户需要通过 CMS 维护的引人注目的排版，内容根本不会产生相同的效果...... www.macretailsolutions.com 是我与 Cufon 合作的一个网站，我认为它属于此类）。否则，我的观点是，从维护/开发的角度和可用性的角度来看，它都很糟糕。
确实，Cufon 在 IE 中会渲染得更漂亮，但事实是，如果人们一开始就使用 IE，他们一开始就不会太关心美观。
结论：不要使用Cufon。
I think there are two considerations to choosing between @font-face, browser defaults, and cufon.
1. How easy it will be for you to maintain the look of your site using CSS
When using a javascript solution for any part of the site, it's important (to me at least) that the site looks decent with or without javascript. This means if a user clicks 'stop' before the page finished loading, that the type will still be in its place within the design. This means having a fallback using default fonts. I've found this to be really problematic in the past as cufon fonts' line heights can differ drastically from those of regular fonts, making it necessary to write superfluous css to control for these cases plus cross-browser irregularities-- in short, a pain in the butt.
With @font-face, particularly using google fonts or typekit, the fonts are quality picked and display predictably and consitently well (with respect to layout and line-height) cross browser. For example you can switch from proxima-nova back to the default arial with no implications in layout-- I've found this to be a challenge with cufon.
2. How the user will need to interact with the site
I like to be able to highlight text, search for text, and see a text cursor when I hover over text. You can't do that with cufon. If your site is more information heavy, cufon isn't a good choice.
I would say Cufon is a good choice for smaller sites where the aesthetic is of equal importance to the content (as in the content simply won't have the same effect without eye catching typography that your user needs to maintain via a CMS... www.macretailsolutions.com is a site that I did with Cufon that I think falls under this category). Otherwise my opinion is that on both a maintenance/development perspective and a usability standpoint, it sucks.
It's definitely true that Cufon will render much prettier in IE, but the truth is that if people are using IE in the first place, they're not too concerned about aesthetics to begin with.
Conclusion: don't use Cufon.