前端有时候会涉及到使用特殊字体，因为浏览器本身不支持，所以需要单独安装。
这里简单说一下使用，重点讲的是可能踩到的坑。
一.字体使用代码（简单演示，非本文重点）
主要是考虑一下不同浏览器的兼容
二.采坑和解决（使用react框架） （1）如何验证是否生效 除靠人眼识别外，可使用浏览器的Elements-computed查看，要看最下面的Rendered Font才是最终使用的字体。如下图，font-family显示使用的是PingFang SC字体，但因为字体没有安装成功，最终渲染的依然是浏览器自带的微软雅黑
（2）没有安装成功时的排查
首先查看字体文件是否加载，查看控制台network-font。如果字体文件加载成功，查看console控制台，如果字体安装失败会显示下图错误
（3）排查network-font字体文件的响应头的Content-Type，最初值是text/html；Content-Type是告诉浏览器使用对应的格式解析识别文件，那值错了自然就失败失败。这里需要更改nginx配置，添加一个add_header Content-Type配置，如下图
（4）最终成功后，可以在network-font-preview预览字体（当前字体只作用于数字和英文字母）
