Cufon文字重绘与中文兼容

在网页中使用特殊字体(非系统自带字体)的方案一般有:图片,CSS3, sIFR, Typeface.js, Cufon等等
如果你的浏览器完全兼容CSS3(这一天何时到来?),可以使用css3的@font-face属性设置外部字体。
sIFR 可以通过Flash+JS+CSS将网络字体嵌入到页面中
Typeface是JS+CSS将网络字体嵌入到页面中。
而Cufon则是利用VML、Canvas、SVG对字体进行渲染。 兼容性好、易用、不需插件支持、效率高,是目前对动态文字使用特殊字体的最好方案。
以worepress主题InStyle为例cufon-yui.js就是基本custom.js是主要逻辑,Colaborate-Regular_400.font.js,Colaborate-Thin_400-Colaborate-Medium_400.font.js就是字体。由于中文字体转换层js字体很大(以微软雅黑的Cufon js字体为例,差不多达1.3MB,则在我朝的小水管是不能接受的)只能在生产字体的时候挑一部分来实现,貌似还是很麻烦,谁叫中文那么多汉字 而英文才26个字母呢 =。=

[javascript] Cufon.set('fontFamily', 'Colaborate-Thin');
Cufon.replace('.slide h2.title, .slide p, h1.category-title, p.category-tagline',{textShadow:'1px 1px 1px rgba(0, 0, 0, 0.3)'})('.widget h3.widgettitle, .comment-meta',{textShadow:'1px 1px 1px #fff'})('h2.post-title, h3#comments, .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6, #reply-title, #trackbacks-title');

Cufon.set('fontFamily', 'Colaborate-Medium');
Cufon.replace('.slide h2.title span, .slide p span, p.category-tagline span',{textShadow:'1px 1px 1px rgba(0, 0, 0, 0.3)'});

Cufon.set('fontFamily', 'Colaborate-Regular');
Cufon.replace('span.drop-caps',{textShadow:'1px 1px 1px #fff'})('.wp-pagenavi span[class!=pages]')('.wp-pagenavi a',{hover:true});[/javascript]

你可以在这里下载以及预先生产字体 http://www.cufon-font.com/generate/font_choice.php

Author Info :
  • From:Cufon文字重绘与中文兼容
  • URL:https://blog.ihipop.com/2011/08/2661.html
  • Please Reserve This Link,Thanks!
  • 发表回复

    您的电子邮箱地址不会被公开。 必填项已用 * 标注