字体处理

     作网页常常遇到一些不一样寻常的字体，咱们老是不知道这些是什么字体，一个个的查找太麻烦，甚至有的根本就查找不出来，我遇到过，刚刚发现其余同窗也有这个问题，因此，我以为这篇文章必须分享出来。如下内容来自http://blog.csdn.net/xiaolongtotop/article/details/8482955

一. 使用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. 进入使用页面后,会有详细的使用说明,其中嵌入页面的方法有三种,咱们通常选第一种最常规的用法,就是直接在页面头部引入

[html] view plain copy

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

4. 而后就能够直接在样式文件中直接字义字体了

[css] view plain copy

1. 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字体件

[html] view plain copy

1. < span>scriptsrc="cufon-yui.js"type="text/javascript"<</>script<
2. < span>scriptsrc="YourFont.font.js"type="text/javascript"<</>script<

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

[javascript] view plain copy

1. Cufon.replace('h1');   
2. 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）