日期:2011/12/06 来源: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的主要优势在于其流畅的抗锯齿效果,尤其是在低分辨率设备上,对比其他文本替换技术,如@font-face,Cufon的表现更为出色。 “微软雅黑”是中国大陆广泛使用的无衬线字体,简洁清晰,适合阅读,尤其在屏幕显示...
与传统的Web字体技术相比,Cufón提供了更快的加载速度和更好的跨浏览器兼容性,尤其是在那些不支持@font-face CSS规则的老版本浏览器中。在本文中,我们将深入探讨Cufón的工作原理、使用方法以及它相对于其他字体...
Cufon.set("fontFamily","ZHSRXT-GBK"); Cufon.set("fontSize","32px"); Cufon.set("color","green"); /////////////////////////////////////////// Cufon 是一个用来替代 sIFR 框架,作为一种基于 JavaScript 的...
随着Web字体服务(如Google Fonts)和@font-face CSS规则的普及,Cufón的使用场景已经大大减少。@font-face允许在不依赖JavaScript的情况下直接在网页上使用自定义字体,而且对SEO友好,支持动态内容。然而,在某些...
7. **cufon-yui.js** 和 **Pirulen_400.font.js**:Cufón是一种JavaScript库,用于在浏览器中渲染矢量字体,提供了丰富的字体选择,增强文字的可读性和美观度。 8. **contact.php** 和 **contact-config.php**:...
3. 可能还有示例HTML文件,展示如何在页面中集成Cufon和转换器。 4. 其他可能的资源文件,如自定义字体文件(`.ttf`或`.eot`等)。 为了使Cufon在现代浏览器中正常工作,你可能还需要处理跨域字体问题,或者确保...
3. **初始化 Cufon**:在 JavaScript 中调用 Cufon 方法,指定要替换的文本元素和使用的字体。例如: ```javascript Cufon.replace('.myClass', { fontFamily: '凉亭' }); ``` 4. **处理动态内容**:由于 Cufon ...
cufon是现在解决网站字体的较好开源项目。小弟收集了一些资源,拿出来分享一下。这种开源东西还好意思要积分?免费!
这个压缩包文件包含了一个设计用于博客的CSS模板,主要特点是灰色调、圆角导航和渐变效果,适合创建简洁、商务或清爽风格的英文整站,尤其适用于外贸网站。下面我们将详细探讨这些知识点。 1. **HTML**:HTML...
3. **@Font-face**:@font-face 规则使得开发者可以直接在网页中使用自定义字体,无需依赖其他技术如Cufon或sIFR。在jQuery Mobile应用中,@font-face 提供了一种简便且性能良好的方法来改变字体样式。 4. **jQuery...
CSS是网页设计的关键,它能控制元素的外观和位置,也可以配合JavaScript实现某些动态效果,如CSS3的transition和animation属性。 综上所述,这个压缩包中的内容为我们提供了一个实践动态网页设计的例子,包括了HTML...
压缩包中的文件列表包括 cufon、images、js、booklet 和 css,这些是构建翻书效果所必需的组成部分: 1. **cufon**:这是一个JavaScript库,用于在网页上实现高质量的文字渲染。它通过SVG向后兼容的方式替换页面上...
2. **CSS3**:CSS3中的`transform`和`transition`属性也对创建翻书效果起到关键作用。通过这些属性,可以实现页面在翻动时的平滑过渡,如旋转、缩放等效果,增加视觉的真实感。 3. **JavaScript库**:如`jQuery`、`...
3. **性能优化**:考虑到用户体验和页面性能,开发者需要关注如何减少不必要的DOM操作,避免过多的重绘和重排。 4. **兼容性处理**:确保滚动翻屏效果在不同浏览器和设备上都能正常工作,这可能涉及到使用不同的...
在讨论有关jQuery Mobile开发技巧的系列知识点之前,需要明确,jQuery Mobile 是一个特别为移动设备设计的框架,它允许开发者使用HTML、CSS和JavaScript创建跨平台的移动应用。这一点的重要性在于开发者需要了解如何...
总的来说,创建一个带翻页动画的jQuery电子杂志涉及到了多个技术层面,包括DOM操作、动画设计、CSS3应用和响应式布局。开发者需要熟练掌握jQuery库,理解JavaScript事件处理,以及具备一定的前端性能优化技巧。通过...
`cufon.js` 是一个著名的文本替换库,常用于实现Web字体的平滑渲染,而 `radius.js` 可能是用来处理边角圆角效果的,这是现代网页设计中常见的CSS3特性。 4. `jquery-1.3.2.min.js`:这是jQuery库的压缩版本,一个...
2. **css**:这个文件夹很可能包含了样式表文件,用于定义翻页效果的外观,如颜色、布局、字体和动画效果。CSS是层叠样式表(Cascading Style Sheets)的缩写,用于控制网页的呈现方式。 3. **images**:这个文件夹...
3.网页中展示了如何通过CSS和HTML来设置图片和内容的布局。 4.文档中提供了运行效果图和源码下载链接,鼓励有兴趣的开发者参考并学习。 5.最后,小提示说明了在某些浏览器上可能无法正常运行,建议切换到不同的...