WHY

HTML的字体可以使用 font-family 属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

对于传统的web开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 Web-safe 字体。

但，安全同时意味着不够有新意，如果我们希望部分业务功能使用自定义的外部字体，如较艺术的英文手写体（英文字体的外部引入较为常见，毕竟就 26 个字母，文件不大）。

那，通过 CSS 我们如何引入外部字体？是否已有较为成熟的解决方案？

WHAT

首先，字体的来源？网络上提供了不少的开源字体，可自行 google。

网页字体

关于网页字体有两件重要的事情要记住：

  1. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
  2. 字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。

注意： Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！

Google Fonts

其次，成熟的（免费…）解决方案？ Google Fonts

HOW

参考：Web字体-From WDN

CSS 引入

1. 最深层兼容： 定义字体 @font-face，并在其他样式文件之前引入。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

使用字体：

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

2.更实用的方案： 由于 WOFF/WOFF2 格式的字体文件兼容性比较好，且加载起来相对较快，所以我们可只使用这两个格式：

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Google Font

Google Fonts 使用起来很简单。主要提供：

  1. 搜索字体（可筛选不同语言、风格等），并可输入特定文字进行字体预览
  2. 在线存储/下载字体；支持粗细调整&字符集展示

可直接复制对应生成的 <link> 代码至你的 html 头中，参考示例如下：

To embed a font, copy the code into the <head> of your html

CSS rules to specify families

  1. font-family: ‘Roboto’, sans-serif;

关于此链接的参数说明，详看 Get Started with the Google Fonts API

若使用自己的服务器托管？可以自行下载字体文件压缩包，把生成的字体文件和样式文件放到项目中即可。

下载解压后为 .ttf 字体文件；可利用转换工具，比如 Transfonter 生成对应的@font-face 样式