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: <YourWebFontName>;
src: url(<source>) format([<format>])[,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

font-family

为我们需要引入的字体文件名

src

字体的存放路径，可以是相对路径或者绝对路径，用url的

format

是我们自定义的字体的格式，主要是用来给浏览器识别，主要有truetype,opentype,truetype-aat,embedded-opentype,avg等。

weight

用来定义是否是粗体

styl

用来自定义字体样式，如斜体。