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 Fonts API

Google Fonts 使用起来很简单。搜到要用的字体，点击右上角的“Select this font”，就能下载、使用这个字体了。比如选择字体 Roboto：

image.png

如上图所示，只需要在标签中嵌入链接https://fonts.googleapis.com/css?family=的样式文件即可。比如 Roboto 对应的样式文件链接是 https://fonts.googleapis.com/css?family=Roboto&display=swap 。

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

如果使用自己的服务器托管呢？
可以下载字体文件压缩包之后，利用转换工具，比如 Transfonter 生成对应的@font-face 样式文件。再把生成的字体文件和样式文件放到项目中即可。

参考阅读

• Using @font-face