关于css:引用外部字体

参考地址：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;
}