关于Cufon的页面字体渲染

本文介绍了一种解决Web开发中字体冲突的方法——使用Cufon。Cufon能够将特定字体的文字转换为图片,以此解决浏览器不支持某些字体的问题。文章详细说明了如何在项目中引入并使用Cufon。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近自己开发网站,研发字体的时候,发现了有些冲突,经过网上的查找,发现解决办法是使用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的实质:通过指定的文字,配以对应的字体文件,接着生成一张图片,并且隐藏原文字。

 

 

 

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

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

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值