`
郑富成
  • 浏览: 14965 次
  • 性别: 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中文字体js文件

    Cufon 是一个用来替代 sIFR 框架,作为一种基于 JavaScript 的网页字体引入方案, Cufon 的核心功能是通过一个名为“cufon-yui.js” 的 JavaScript 类库,提供给开发人员的。在web开发中,经常面对的一种“冲突”,...

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

    这是Cufon版的微软雅黑字体,含2500个常用简体中文字符。可以直接用于网站设计

    cufon 微软雅黑常用3500汉字

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

    前端项目-cufon.zip

    前端项目-cufon,用画布和VML快速替换文本-不需要闪存或图像。

    bower-cufon:Cufon 的凉亭包

    凉亭 Cufon 的凉亭包

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

    Cufon 阿拉伯语文本转换器 用法: Cufon . replace ( 'h2' , { onBeforeReplace : ArabicStyle . convert } ) ;

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

    蓝色圆角按钮个人博客模板基于arial.js和cufon-yui.js插件制作,DIV+CSS布局设计,全套模板,包含首页、技术支持、关于我们、博客、联系我们等网站模板页面。

    静态家具网页

    简单的静态网页制作 &lt;!-- header --&gt; &lt;p&gt;&nbsp; ... &lt;td width="120" height="30"&gt;&lt;strong&gt;主 页 &lt;/a&gt;&lt;/strong&gt;| &lt;td width="120" height="30"&gt;...&lt;script type="text/javascript"&gt; Cufon.now(); &lt;/html&gt;

    jquery翻书效果

    $(function() { var $mybook = $('#mybook'); var $bttn_next = $('#next_page_button'); var $bttn_prev = $('#prev_page_button');... //Cufon.refresh(); } }).attr('src',source); }); });

Global site tag (gtag.js) - Google Analytics