@font-face之解决web页面自定义字体问题

在前端开发中，也许你有被客户要求用各种不用的字体。但实际开发中，每个浏览器都有自己的安全字体（这个对字体（font-family）的定义就是一个安全字体。每种操作系统都有自己默认安装的字体，浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同，有的甚至名称都不一样，在这种情况下，我们必须定义安全字体，使字体在所有的浏览器中都能够正常显示。），这也就不能满足多个用户的需求。世上无难事，只怕有心人。css3为我们解决了这个问题，而且兼容性杠杠的，接下来就和我一起见证你想要的各种字体的呈现。

@font-face是css3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？其实这个功能早在IE4就支持了。就像我文章前面呈现图片一样，就是我做的一个字体demo，所以大家完全可以放心使用。

第一步：你需要下载字体，目前@font-face支持包括ttf,woff,eot等格式的字体，大家可以去网上下载，也可以继续往下看，下载我给大家分享的字体包。

第二步：在你的样式文件中引入字体（如下图）。

1表示：你的字体名称（可以随意命名）

2表示：引入的字体地址（可以是本地地址，也可以是线上地址）

3表示：字体是否加粗（可省略）

4表示：字体样式（是否倾斜字体，可省略）

第三步：在你需要引入样式的程序段中引入字体（如下图，我给一个class名为t3的代码引入名字为"Kestoy Selfie"的字体）。

第四步：打开你的页面，欣赏你引入的各种字体。