CSS3利用@font-face使用自定义字符和图标

前言

今天在看wordpress主题的时候，看到一个class名为fa fa-weibo 当时想知道这是什么用法，然后就找了一下style.css 文件，看看具体的CSS内容，然后发现这是一个很有趣的问题。
先把对应的HTML和CSS代码给贴上来吧

---

HTML

<i class=" fa fa-weibo"></i><

CSS

@font-face {    font-family:'FontAwesome';    src:url(fonts/fontawesome-webfont.eot?v=4.1.0);    src:url(fonts/fontawesome-webfont.eot?#iefix&v=4.1.0) format('embedded-opentype'),        url(fonts/fontawesome-webfont.woff?v=4.1.0) format('woff'),        url(fonts/fontawesome-webfont.ttf?v=4.1.0) format('truetype'),        url(fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular)format('svg');    font-weight:normal;    font-style:normal}.fa {    display:inline-block;    font-family:FontAwesome;    font-style:normal;    font-weight:normal;    line-height:1;    -webkit-font-smoothing:antialiased;    -moz-osx-font-smoothing:grayscale}.fa-weibo:before {    content:"\f18a"}

---

一开始看到这个还是挺蒙蔽的，不过感觉这应该是一个继承的关系。于是到度娘那里去找了找原因

1. :before到底是什么

首先要注意:before是一个伪元素，不是一个伪类.它的主要作用就是在元素的前面插入一个子元素，相应的，:after实在元素的后面插入一个子元素，这里用来插入的是一个字符的16进制unicode编码.

2."\f18a"是什么

content这个属性通常与:before :after这两个属性配合在元素中产生所需的内容。而"\f18a"是一个16进制的unicode编码，所以这里是插入了一个字符。根据在百度得到的答案，在unicode编码中，E000 至 F8FF是空白字符区，用来给用户创造自己所需要的字符。然后可以将其应用于网页中。这里应用的技术叫做WebFont，也就是一种字体

使用自定义字符的一般步骤为：

1. 自己造一个字体文件，把\f18a所对应的字符对应上你所做的字符（一般用来创造一个icon，然后将icon作为字符来展示在网页中，以节约流量，让页面更为美观）
2. 在CSS中使用font-face引用这个字体文件
3. 在需要显示这个字符的地方定义一个font-family为你的字体文件名，然后content为你所创造的字符，这里为\f18a

3. 解决方案

一般情况下，这个unicode都是硬编码到html中，但是问题在于：类似这里的\f18a这个实在是太抽象了，在大型的站点中如果这么应用，那么后续需要查看的时候，每用一次就查看一次？这不大现实吧。于是就出现了主题中所使用的这种解决方案。先用@font-face引入所需要的字体，再定义class或者id(这里的class名为fa),然后再定义一个class(fa-weibo)用来引入特定的字符。
之后在你需要使用这个字符或者icon的地方插入HTML即可，如下：

<i class="fa fa-weibo"></i>

4. @font-face的用法

   @font-face {      font-family: <YourWebFontName>;      src: url(<source>) format([<format>])[,<source> [<format>]]*;      [font-weight: <weight>];      [font-style: <style>];    }

1. font-family为我们需要引入的字体文件名
2. src字体的存放路径，可以是相对路径或者绝对路径，用url的
3. format是我们自定义的字体的格式，主要是用来给浏览器识别，主要有truetype,opentype,truetype-aat,embedded-opentype,avg等。
4. weight用来定义是否是粗体
5. styl用来自定义字体样式，如斜体。