Wzzzzzzx

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，也就是一种字体

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

自己造一个字体文件，把\f18a所对应的字符对应上你所做的字符（一般用来创造一个icon，然后将icon作为字符来展示在网页中，以节约流量，让页面更为美观）

在CSS中使用font-face引用这个字体文件

在需要显示这个字符的地方定义一个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: ;
      src: url() format([])[, []]*;
      [font-weight: ];
      [font-style: