嵌入Web字体 ---- @font-face

嵌入Web字体

一、@font-face模块介绍

@font-face主要是把自己定义的Web字体嵌入到Web页面中，这些自定义字体就被放置到了服务器上，浏览器即可根据指定命令将对应字体下载到本地缓存，用它来实现特殊字体效果。

二、@font-face兼容

@font-face最早属于css2，现如今为css3属性故，兼容性上目前主流浏览器均可实现完美支持。

三、@font-face语法

@font-face {
font-family: "MSJHBD";                                                                               --------------自定义的名称，我们取名为“ MSJHBD ”
src: url("font/MSJHBD.eot");
src: url("font/MSJHBD.eot?#iefix") format("embedded-opentype"),  --------------对应的几种路径和格式
url("font/MSJHBD.woff") format("woff"),
 url("font/MSJHBD.ttf") format("truetype"),
 url("font/MSJHBD.svg#MSJHBD") format("svg");
font-style: normal;
font-weight: normal;

}

PS：按照往常的话，需要到网上下载对应的字体格式版本然后通过某些第三方的软件进行格式翻译，或者手动抠文字这样会浪费大把的时间，目前最新出了一款更加快捷的软件：fontmin

特殊字体神器-fontmin 的使用

fontmin下载

fontmin官网：http://ecomfe.github.io/fontmin

fontmin的具体操作

1 打开软件（无需安装，打开即用）

2 输入需要采用特殊字体的文字

3 将字体拖拽到相应位置，点击“生成”

4 把生成的文件复制/剪切到指定位置即可

会生成各类字体文件，同时还有CSS文件，可以使用编辑器打开CSS文件，内容如下（我此处使用的是MSJHBD的字体）

CSS代码：

@font-face {
	font-family: "MSJHBD";
	src: url("font/MSJHBD.eot");
	src: url("font/MSJHBD.eot?#iefix") format("embedded-opentype"), 
	url("font/MSJHBD.woff") format("woff"),
	url("font/MSJHBD.ttf") format("truetype"),
	url("font/MSJHBD.svg#MSJHBD") format("svg");
	font-style: normal;
	font-weight: normal;
}

以下是页面测试的效果：