有时候由于业务需要，或者是使页面美观，我们需要在网页中使用一些第三方的字体。
对于小面积变动不大的文字区域，我们通常都会采用图片的方式来解决。
但是对于文本内容经常改变，或者在网页中使用面积较大的情况来说，再采用图片的方式显然不是一种明智的选择。
这时候我们可以使用自定义字体来解决这个问题。
@font-face属性允许用户在页面中使用自定义字体，示例代码如下：
/*声明*/
@font-face{
font-family: 'MyFont';
src: url('./my-font.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
/*引用*/
.cool-text{
font-family: 'MyFont';
}
上述代码的意思是：
- 告诉浏览器，我们使用了@font-face代码块声明一种自定义字体，字体名为MyFont。
- MyFont的字体源文件是当前目录下的my-font.ttf，字体源文件使用truetype（不能写ttf）格式去解析，将字体宽度默认设为600、风格设为常规。
- 然后哪里的font-family样式如果引用了MyFont，就以这种字体来显示。
属性值
在@font-face代码块中，font-family属性和src属性是必须的。
其中：
font-family属性指定自定义字体的名称，值是一个字符串。
src属性指定自定义字体的源，url里指定是数据源，format里指定的是数据格式，下述的写法也是可以的：
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot') format('eot'); /*IE*/
src: url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype'); /*non-IE*/
}
需要注意的几点
@font-face代码块不能写在样式块里，比如下面的代码是不生效的：
.some-class{
@font-face{
font-family: 'MyFont';
src: url('./my-font.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
}
.ttf字体对应的format()格式是truetype，不是ttf。
