在 css 中使用 @font-face

@font-face允许用户使用自定义的字体。在css中定义时，表示让浏览器下载指定的字体，并且显示。定义需要放在文件的开头。

字体文件有许多种格式。有的浏览器只支持某几种格式。

下面的定义，可以最大兼容浏览器支持：

@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;
}

-

https://css-tricks.com/snippets/css/using-font-face/

--

-