CSS3 @font-face 和 icofont 详解（1）

一般的设计稿子都会有非常用字体，而且有一些小图标。（这是大多数网页都会出现的情况）所以我采用了比较传统的做法，用png图片。但是png图片有兼容问题大家都清楚的，尽管说现在网上有很多的解决办法的，但是处理起来还是会让人发毛。讲到这大家也就知道我介绍的 @font-face 和 icofont 这个样东西可以处理的问题了吧？！用他们主要是为了可以在我们网页上大胆的使用各种字体，使用一些小图片变得简易。

@font-face 是CSS3的一个模块，他主要用于在网页中嵌入自己定义的Web字体。他可以向下兼容到IE4，所以各位不用当心他的兼容问题。如果你是英语大牛的话点这里，有@font-face的详细说明。

首先我们来看一下@font-face的语法规则：

@font-face {
        font-family:<YourWebFontName>;
        src: <sourc> [<format>][,<source> [<format>]]*;
        }

 

简单的说下各值的含义:

1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、一些文本属性都可以在这里使用，比如:font-size;font-weight;font-style;

上面提到 @font-face 可以兼容到各主流浏览器，还有IE4+（这里就不上图了），但是其中的 “src” 属性却有点兼容问题。他的兼容性问题主要是与各主流浏览器对字体的格式的支持有关。各主流浏览器对字体格式的兼容情况如下：

一、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

五、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

    @font-face　｛
            font-family:'YourWebFontName';
            src: url('YourWebFontName.eot?') format('eot');/*IE*/
            src: url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
            }

上面的方法之涉及到了Pc 浏览器，所以为了让更多的浏览器支持，也可以写成这样：

    @font-face {
            font-family:'YourWebFontName';
            src: url('YourWebFontName.eot'); /*IE9 Compat Modes*/
            src: url('YourWebFontName.eot？#iefix') format('embedded-opentype'),/*IE6-IE8*/
                   url('YourWebFontName.woff') format('woff'), /*Modern Browsers*/
                   url('YourWebFontName.ttf') format('truetype'), /*Safari, Android, iOS*/
                   url('YourWebFontName.svg#YourWebFontName') format('svg'); /*Legacy*/

然后,我是不是该在这里实践一下呢？！但是我不太想哇，所以呢？我就发一个字体网站，里面有详细的使用教程，各位跟着他做就行了。http://kudakurage.com/ligature_symbols/

最后,再给大家介绍一个工具 fontsquirrel，通过他可以把我们下载下来的字体转换为我们需要的多种字体格式，然后我们只需要把所有字体放在同一个根目录下就行了（这样便于管理），当然也可以通过链接来做到。

注意：

1、如果你的项目中是英文网站，而且项目中的Logo，Tags等应用到较多的这种特殊字体效果，我建议你不要使用图片效果，而使用@font-face，但是你是中文网站，我觉得还是使用图片比较合适，因为加载英文字体和图片没有多大区别，但是你加载中文字体，那就不一样了，因为中文字体太大了，这样会影响到项目的某些性能的优化；

2、致命的错误，你在@font-face中定义时，文件路径没有载对；

3、你只定义了@font-face，但并没有应用到你的项目中的DOM元素上；

以上几点都是在平时制作中常出现的问题，希望大家能小意一些，另外我们没有办法在购买所有字体，就算你实力雄厚，那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些优美的怪异的特殊字体，但下面这个工具作用更是无穷的大，他能帮你生成@font-face所需要的各种字体，这工具就是Font Squirrel。

本来今天还想把 icofont 写下的但是太晚了就不继续写了，他的使用也和字体息息相关好处也是大大的。写下他之后，我会在把他的链接发到这的。

本文部分引用：W3CPLUS

第一次写技术博客，不好之处多多见谅哈！！