`
jjfat
  • 浏览: 283723 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

分享Cufon, CSS3 和 Google font的对比

阅读更多

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

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

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

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

大家都知道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的对比

分享到:
评论

相关推荐

    CUFON.cufon.Cufon.微软雅黑.简体中文.2500字符

    Cufon的主要优势在于其流畅的抗锯齿效果,尤其是在低分辨率设备上,对比其他文本替换技术,如@font-face,Cufon的表现更为出色。 “微软雅黑”是中国大陆广泛使用的无衬线字体,简洁清晰,适合阅读,尤其在屏幕显示...

    关于Cufon的页面字体渲染

    与传统的Web字体技术相比,Cufón提供了更快的加载速度和更好的跨浏览器兼容性,尤其是在那些不支持@font-face CSS规则的老版本浏览器中。在本文中,我们将深入探讨Cufón的工作原理、使用方法以及它相对于其他字体...

    张海山锐线体Cufon中文字体js文件

    Cufon.set("fontFamily","ZHSRXT-GBK"); Cufon.set("fontSize","32px"); Cufon.set("color","green"); /////////////////////////////////////////// Cufon 是一个用来替代 sIFR 框架,作为一种基于 JavaScript 的...

    前端项目-cufon.zip

    随着Web字体服务(如Google Fonts)和@font-face CSS规则的普及,Cufón的使用场景已经大大减少。@font-face允许在不依赖JavaScript的情况下直接在网页上使用自定义字体,而且对SEO友好,支持动态内容。然而,在某些...

    非常简洁的html5博客模板下载_html5css3简洁博客.rar

    7. **cufon-yui.js** 和 **Pirulen_400.font.js**:Cufón是一种JavaScript库,用于在浏览器中渲染矢量字体,提供了丰富的字体选择,增强文字的可读性和美观度。 8. **contact.php** 和 **contact-config.php**:...

    cufon-arabic:Cufon 的阿拉伯语文本转换器

    3. 可能还有示例HTML文件,展示如何在页面中集成Cufon和转换器。 4. 其他可能的资源文件,如自定义字体文件(`.ttf`或`.eot`等)。 为了使Cufon在现代浏览器中正常工作,你可能还需要处理跨域字体问题,或者确保...

    bower-cufon:Cufon 的凉亭包

    3. **初始化 Cufon**:在 JavaScript 中调用 Cufon 方法,指定要替换的文本元素和使用的字体。例如: ```javascript Cufon.replace('.myClass', { fontFamily: '凉亭' }); ``` 4. **处理动态内容**:由于 Cufon ...

    cufon 微软雅黑常用3500汉字

    cufon是现在解决网站字体的较好开源项目。小弟收集了一些资源,拿出来分享一下。这种开源东西还好意思要积分?免费!

    灰色圆角导航质感博客CSS模板_灰色圆角导航渐变简洁商务简洁清爽博客英文整站外贸漂亮.rar

    这个压缩包文件包含了一个设计用于博客的CSS模板,主要特点是灰色调、圆角导航和渐变效果,适合创建简洁、商务或清爽风格的英文整站,尤其适用于外贸网站。下面我们将详细探讨这些知识点。 1. **HTML**:HTML...

    经典收藏 50个jQuery Mobile开发技巧集萃

    3. **@Font-face**:@font-face 规则使得开发者可以直接在网页中使用自定义字体,无需依赖其他技术如Cufon或sIFR。在jQuery Mobile应用中,@font-face 提供了一种简便且性能良好的方法来改变字体样式。 4. **jQuery...

    html.rar_动态网页

    CSS是网页设计的关键,它能控制元素的外观和位置,也可以配合JavaScript实现某些动态效果,如CSS3的transition和animation属性。 综上所述,这个压缩包中的内容为我们提供了一个实践动态网页设计的例子,包括了HTML...

    PHPCMS 专题翻书效果

    压缩包中的文件列表包括 cufon、images、js、booklet 和 css,这些是构建翻书效果所必需的组成部分: 1. **cufon**:这是一个JavaScript库,用于在网页上实现高质量的文字渲染。它通过SVG向后兼容的方式替换页面上...

    html5翻书效果

    2. **CSS3**:CSS3中的`transform`和`transition`属性也对创建翻书效果起到关键作用。通过这些属性,可以实现页面在翻动时的平滑过渡,如旋转、缩放等效果,增加视觉的真实感。 3. **JavaScript库**:如`jQuery`、`...

    滚动翻屏效

    3. **性能优化**:考虑到用户体验和页面性能,开发者需要关注如何减少不必要的DOM操作,避免过多的重绘和重排。 4. **兼容性处理**:确保滚动翻屏效果在不同浏览器和设备上都能正常工作,这可能涉及到使用不同的...

    50个最值得收藏的jQuery Mobile开发技巧

    在讨论有关jQuery Mobile开发技巧的系列知识点之前,需要明确,jQuery Mobile 是一个特别为移动设备设计的框架,它允许开发者使用HTML、CSS和JavaScript创建跨平台的移动应用。这一点的重要性在于开发者需要了解如何...

    jquery带翻页动画的电子杂志代码分享

    总的来说,创建一个带翻页动画的jQuery电子杂志涉及到了多个技术层面,包括DOM操作、动画设计、CSS3应用和响应式布局。开发者需要熟练掌握jQuery库,理解JavaScript事件处理,以及具备一定的前端性能优化技巧。通过...

    蓝色星光闪烁背景漂亮博客模板_蓝色星光背景简洁清爽博客英文整站.rar

    `cufon.js` 是一个著名的文本替换库,常用于实现Web字体的平滑渲染,而 `radius.js` 可能是用来处理边角圆角效果的,这是现代网页设计中常见的CSS3特性。 4. `jquery-1.3.2.min.js`:这是jQuery库的压缩版本,一个...

    一款超级酷的翻页效果

    2. **css**:这个文件夹很可能包含了样式表文件,用于定义翻页效果的外观,如颜色、布局、字体和动画效果。CSS是层叠样式表(Cascading Style Sheets)的缩写,用于控制网页的呈现方式。 3. **images**:这个文件夹...

    jquery马赛克拼接翻转效果代码分享

    3.网页中展示了如何通过CSS和HTML来设置图片和内容的布局。 4.文档中提供了运行效果图和源码下载链接,鼓励有兴趣的开发者参考并学习。 5.最后,小提示说明了在某些浏览器上可能无法正常运行,建议切换到不同的...

Global site tag (gtag.js) - Google Analytics