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

由于追求美观或者业务需要，有时我们需要在网页中使用一些特殊的字体。

使用自定义字体的几种情况

• 对于少量固定文案，可采用图片的方式。

• 但对文案不确定、频繁变动、字数多的情况，可使用自定义字体。

使用 @font-face 来注册自定义字体

@font-face 是一种CSS规则，用于定义自定义字体的加载和显示方式。通过 @font-face，可以引入自定义字体文件（支持多种格式），并在网页中使用这些字体。

以下代码注册了一种名为MyFont的字体（字族）

/* 使用@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。
• 字体文件不宜过大，否则会影响页面加载性能。如果只需要使用某个字体里的某些字，可以使用 FontMin工具 精简字体文件.