最近自己开发网站,研发字体的时候,发现了有些冲突,经过网上的查找,发现解决办法是使用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的实质:通过指定的文字,配以对应的字体文件,接着生成一张图片,并且隐藏原文字。
希望更多人把时间花在生活、陪家人和女朋友身上,而不是敲代码上.
分享到:
相关推荐
这行代码会将页面中所有`<body>`标签内的文本替换为“微软雅黑”字体。 4. 最后,为了确保在不支持JavaScript的环境中也能正常显示,记得添加备选方案,例如使用CSS定义默认字体。 通过以上步骤,我们可以看到,...
因此,"Cufon Arabic Text Converter" 是为了解决这个问题而设计的,它允许Cufon能够正确地渲染阿拉伯语文本。 在使用Cufon阿拉伯语文本转换器时,你需要将Cufon库与这个转换器结合起来。首先,确保你已经在你的...
它通过使用 SVG(Scalable Vector Graphics)技术来替换 HTML 中的文本元素,从而提供比传统 CSS 字体更好的视觉效果,尤其是在字体渲染和缩放时。这个“凉亭”包是 Cufon 的一个特定字体集合,适用于那些希望在网页...
Cufón利用canvas元素来绘制文本,这样可以实现在任何支持canvas的现代浏览器上的自定义字体渲染。 - **VML(Vector Markup Language)**:对于不支持canvas的老版本IE浏览器,Cufón则采用VML来创建矢量图形。VML...
1. **Cufon字体渲染**:通过Cufon插件,可以为特定的HTML元素应用自定义字体。这里使用的`Cufon('.cn_wrapper h1, h2', { textShadow: '-1px 1px black' })`函数调用就是为`.cn_wrapper`内的`h1`和`h2`元素设置字体...
4. **cufon-yui.js** - 这是Cufón库的核心文件,负责处理字体替换功能。Cufón使用SVG矢量图形技术,可以实现平滑的文本渲染,并且支持动态效果,比如文本颜色改变或大小调整。 5. **jquery.easing.1.3.js** - 这...
它能够使网页上的文字具有更丰富的样式,如阴影、渐变等,同时提高了字体渲染的性能,尤其是在旧版或低性能的浏览器上。在这个模板中,Cufón可能被用来美化标题、按钮或其他关键元素的字体显示,使其更具吸引力。 ...
7. **cufon-yui.js** 和 **Pirulen_400.font.js**:Cufón是一种JavaScript库,用于在浏览器中渲染矢量字体,提供了丰富的字体选择,增强文字的可读性和美观度。 8. **contact.php** 和 **contact-config.php**:...
4. **cufon**:Cufón是一种JavaScript库,用于在网页上实现高质量的矢量文本渲染。在这里,它可能被用来改善页面中的文字显示,特别是在进行翻页动画时保持文字清晰。 5. **booklet**:这个文件或文件夹可能包含了...
它通过SVG向后兼容的方式替换页面上的文本,使得字体在不同浏览器和设备上都能保持一致的显示效果,对于具有复杂图形和动画的翻书效果尤为重要。 2. **images**:这个文件夹包含所有与翻书效果相关的图像资源,如...
同时,Cufon库被用来实现文本的矢量渲染,使得字体更加清晰美观,即使在放大时也不会失真。`Cufon.replace()` 函数用于替换指定元素的文本,用矢量字体替换原生字体。 在实际应用中,为了优化用户体验,还需要考虑...
`cufon.js` 是一个著名的文本替换库,常用于实现Web字体的平滑渲染,而 `radius.js` 可能是用来处理边角圆角效果的,这是现代网页设计中常见的CSS3特性。 4. `jquery-1.3.2.min.js`:这是jQuery库的压缩版本,一个...