网站特殊字体处理

时间:2023-02-05 22:23:08

在网站开发过程中,经常会遇到一些特殊字体,这些特殊字体在客户端未安装该字体时会无法正常显示,一般情况下,如果一个网站使用的特殊字体较少,而且都是静态的话,可以直接切为图片,当网站中用到的特殊字体较多,而且许多是动态的话,切图片的方法显然不可行,下面介绍几种处理网站特殊字体的方法.


一. 使用Google Web Fonts

Google字体库里也有很多时尚和个性化的字体供你选择,并且由于是开源字库,所以不管是商业或者个人,Google Font API都适用。Google Font API并不依赖于JavaScript,因此即使用户禁用了JavaScript,Google字体依然可以显示。Google字体在CSS3中的表现同样出色,任何额外的样式都可以被添加,比如CSS 3中的text-shadow属性.使用这种方法的前提是Google字体库里有你需要的字体,具体使用方法如下:


1. 进入Google Web Fonts查找你需要的字体,然后点击"加入收藏(Add to Collection)"

网站特殊字体处理


2. 打开收藏集,点击"使用(Use)"

网站特殊字体处理


3. 进入使用页面后,会有详细的使用说明,其中嵌入页面的方法有三种,我们一般选第一种最常规的用法,就是直接在页面头部引入

<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>

4. 然后就可以直接在样式文件中直接字义字体了

h1 { font-family: 'Berkshire Swash', cursive;}

实现效果如下:

网站特殊字体处理


二. 使用CSS3 @font-face

@font-face是CSS3中的一个模块, 能够加载服务器端的字体文件,可以在网页中嵌入客户端没有安装的字体。具体使用方法可以参考CSS3 @font-face 使用方法


三. 使用Cufon渲染

Cufon 是一个用来替代 sIFR 框架,实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库(cufon-yui.js)。

Cufon 技术的实现策略其实就是以一定标准,在网页相关位置上“画”出了所需要显示的文字字符,并同时替换原先区域所需要显示的文字。借助于浏览器所推出的专有页面绘画方案,如 VML、Canvas 和 SVG 等,来进行页面的绘画。


网站特殊字体处理


使用这种方法首先要下载特殊字体文件,以便用来生成JavaScript字体件,下面详细介绍下使用方法:

1. 引入Cufon核心类库cufon-yui.js,可以在Cufon官网下载

2. 在Cufon官网上传特殊字体文件并生成相应的JavaScript字体件

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="YourFont.font.js" type="text/javascript"></script>

3. 在JS中使用Cufon.replace(selector[, options])方法替换特殊字体,selector类似CSS选择器,详细用法参见Cufon API

Cufon.replace('h1'); 
Cufon.replace('#cufon', {fontFamily:'YourFont', fontSize:'36px', color:'#ff0000'});

更详细的使用步骤可以参见https://github.com/sorccu/cufon/wiki/Usage

浏览器支持情况


Cufon IE(≥ 5) Firefox(≥ 1.5)Opera(≥ 9.5)Safari(≥ 3)Google Chrome(≥ 1.0)
@font-face IE(≥ 4,仅支持 OpenType)Firefox(≥ 3.5) Opera(≥ 10.0) Safari(≥ 3.1)