日期:2014-05-17  浏览次数:20632 次

分享Cufon, CSS3 和 Google font的对比

日期:2011/12/06? 来源:GBin1.com

分享Cufon, CSS3 和 Google font的对比 - gbin1.com

对于使用浏览器不支持的外部web字体(在线演示 ),如果我们在web开发和设计中需要使用那么必须使用以下几个技术:

  • Cufon
  • CSS3
  • Google font

今天我们比较一下使用这些不同技术的优缺点。

大家都知道Cufon的实现机制是将外部字体处理后,生成图片,其最大的几个缺点在于:

  • 无法选择,粘贴或者拷贝
  • 无法加上链接的悬浮效果,比如,下划线,颜色等等?

而使用CSS3倒是非常的方便,如下:

@font-face{
??? font-family: 'someFont';
??? src: url('/fonts/somefont.otf');
}
?
p{
??? font-family: 'someFont', sans-serif;
}

可以看到使用CSS3的确是不错的一个选择, ,可惜,不是所有的浏览器都支持,万恶的IE啊!

Google font也提供了非常好的方式来加载外部字体。你拥有18种字体来选择(可惜没有中文支持)。

以下是几种加载外部字体的方式的对比:

? 优点
缺点
介绍
Cufon 支持所有的浏览器
  • 转变文字为图片
  • 依赖于javascript
  • 需要将字体转化成一个js
  • 使用起来太重量级了
?可以去Cufon主站使用Cufon字体生成器来生成js。
CSS3
  • ?使用简单
  • 和现代浏览器兼容
  • ?有些浏览器支持的不好
?我们可以从一些网站得到免费字体的CSS3 code,例如,fontquirrel.com
Googlefont
  • ?很多字体可供选择
  • 非常灵活功能丰富
  • 和现代浏览器兼容
  • ?选项不太简单
?
Google font API
  • ?使用非常简单
  • 支持现代浏览器
  • ?字体选择太少
?Google 字体目录

原文来自:分享Cufon, CSS3 和 Google font的对比