如何在网页中使用自定义字体

有时候由于业务需要，或者是使页面美观，我们需要在网页中使用一些第三方的字体。
对于小面积变动不大的文字区域，我们通常都会采用图片的方式来解决。
但是对于文本内容经常改变，或者在网页中使用面积较大的情况来说，再采用图片的方式显然不是一种明智的选择。
这时候我们可以使用自定义字体来解决这个问题。

@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。