`
郑富成
  • 浏览: 15356 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

关于Cufon的页面字体渲染

阅读更多

最近自己开发网站,研发字体的时候,发现了有些冲突,经过网上的查找,发现解决办法是使用Cufon。

 

应用场景:在web开发中,设计者所使用的字体,或许浏览器并不支持,从而造成字体(Font Family)冲突。

 

使用:

1、Cufon的核心是使用一个cufon-yui.js

2、引入Cufon的字体文件(例如:微软雅黑、楷体、微软正黑等)

<script type="text/javascript" src="js/cufon/Microsoft_YaHei.font.js"></script>

3、使用基本的替换,例如:

Cufon.replace('h1, h2, h3, h4, h5, h6', { fontFamily: 'Microsoft YaHei', hover: true });

 

 

Cufon目前主要是应用于英文字体,若要对于中文字体在页面中进行渲染,则需要使用而下方法:

1、使用微软雅黑字体,支持中英文。缺点是目前就这一种字体。

2、使用自助形式的中文字体生成。

可以使用:

1)官方网站:http://cufon.shoqolate.com/generate

2)国内的自助生成网站:http://www.cufon-font.com/generate/font_choice.php

 

因为中文字较多,而英文只需要简单的26个字母和数字就可以了,所以中文转化是比较麻烦的。

笔者也是比较建议网站页面需要用到哪些字体,再进行转化,添加到对应的font.js文件中则可。

 

而Cufon的实质:通过指定的文字,配以对应的字体文件,接着生成一张图片,并且隐藏原文字。

 

 

 

文章若有错误,敬请指正,谢谢。

希望更多人把时间花在生活、陪家人和女朋友身上,而不是敲代码上.

 

 

 

分享到:
评论

相关推荐

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

    这行代码会将页面中所有`&lt;body&gt;`标签内的文本替换为“微软雅黑”字体。 4. 最后,为了确保在不支持JavaScript的环境中也能正常显示,记得添加备选方案,例如使用CSS定义默认字体。 通过以上步骤,我们可以看到,...

    bower-cufon:Cufon 的凉亭包

    它通过使用 SVG(Scalable Vector Graphics)技术来替换 HTML 中的文本元素,从而提供比传统 CSS 字体更好的视觉效果,尤其是在字体渲染和缩放时。这个“凉亭”包是 Cufon 的一个特定字体集合,适用于那些希望在网页...

    前端项目-cufon.zip

    Cufón利用canvas元素来绘制文本,这样可以实现在任何支持canvas的现代浏览器上的自定义字体渲染。 - **VML(Vector Markup Language)**:对于不支持canvas的老版本IE浏览器,Cufón则采用VML来创建矢量图形。VML...

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

    因此,"Cufon Arabic Text Converter" 是为了解决这个问题而设计的,它允许Cufon能够正确地渲染阿拉伯语文本。 在使用Cufon阿拉伯语文本转换器时,你需要将Cufon库与这个转换器结合起来。首先,确保你已经在你的...

    滚动翻屏效

    1. **Cufon字体渲染**:通过Cufon插件,可以为特定的HTML元素应用自定义字体。这里使用的`Cufon('.cn_wrapper h1, h2', { textShadow: '-1px 1px black' })`函数调用就是为`.cn_wrapper`内的`h1`和`h2`元素设置字体...

    html.rar_动态网页

    4. **cufon-yui.js** - 这是Cufón库的核心文件,负责处理字体替换功能。Cufón使用SVG矢量图形技术,可以实现平滑的文本渲染,并且支持动态效果,比如文本颜色改变或大小调整。 5. **jquery.easing.1.3.js** - 这...

    蓝色圆角按钮个人博客模板

    它能够使网页上的文字具有更丰富的样式,如阴影、渐变等,同时提高了字体渲染的性能,尤其是在旧版或低性能的浏览器上。在这个模板中,Cufón可能被用来美化标题、按钮或其他关键元素的字体显示,使其更具吸引力。 ...

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

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

    一款超级酷的翻页效果

    4. **cufon**:Cufón是一种JavaScript库,用于在网页上实现高质量的矢量文本渲染。在这里,它可能被用来改善页面中的文字显示,特别是在进行翻页动画时保持文字清晰。 5. **booklet**:这个文件或文件夹可能包含了...

    PHPCMS 专题翻书效果

    它通过SVG向后兼容的方式替换页面上的文本,使得字体在不同浏览器和设备上都能保持一致的显示效果,对于具有复杂图形和动画的翻书效果尤为重要。 2. **images**:这个文件夹包含所有与翻书效果相关的图像资源,如...

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

    同时,Cufon库被用来实现文本的矢量渲染,使得字体更加清晰美观,即使在放大时也不会失真。`Cufon.replace()` 函数用于替换指定元素的文本,用矢量字体替换原生字体。 在实际应用中,为了优化用户体验,还需要考虑...

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

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

Global site tag (gtag.js) - Google Analytics