likes
comments
collection
share

CSS---引用外部字体（一）---引入

作者站长头像
站长
· 阅读数 34

参考地址：css怎么引入外部字体

WHAT

在CSS中通过使用@font-face标签，可以将服务器端的字体下载到用户本机。

WHY

在展现网页时，有时会用特殊字体来进行个性表达，通常是设计师做好图片，再由我们前台工程师放到网页中。如果干活的只有你老哥一个，没有设计师给你设计图片，就退而求其次，通过font-family样式引用特殊字体。

不过这有一个前提，就是引用的字体都要先在本机安装好。比如我给标题设置的是微软雅黑字体，用户机子上如果装了微软雅黑字体就能正常显示，那我要是给标题设置的是方正郑文公碑楷书体呢？这种情况下只有用户机子上安装了此种字体才能正常显示。可我们怎么能确保每个用户的机子上都安装过我们页面需要的各种字体呢？

此时，就可以使用@font-face标签，从服务器上把字体包下载到本机。

HOW

在css中使用@font-face标签:

/*字体后缀和浏览器有关，如下所示

* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera

* .EOT，适用于Internet Explorer 4.0+

* .SVG，适用于Chrome、IPhone

*/

@font-face {
    font-family: 'qigongti';    // 启功体
    src: url('../fonts/qigongti.eot');
    src: url('../fonts/qigongti.eot?#iefix') format('embedded-opentype'),
    url('../fonts/qigongti.woff') format('woff'),
    url('../fonts/qigongti.ttf') format('truetype'),
    url('../fonts/qigongti.svg') format('svg');

    font-weight: normal;
}

在对应的节点上使用特殊字体：

div {
    font-family: 'qigongti';
    font-size: 16px;
}