@font-face处理字体不兼容

问题描述：在跨端或浏览器开发是，会遇到一些字体不兼容端情况，推荐利用@font-face处理。

1 安装

安装所需字体包（譬如搜索安装ttf/woff字体包）

2 格式转换

网址：https://www.fontsquirrel.com/tools/webfont-generator
打开安装端字体包（已ttf为例），搜索所需字体=》选中文件=》导出字体到本地

打开网站https://www.fontsquirrel.com/tools/webfont-generator，上传上一步下载到.ttf文件，步骤如下

PS：关键到一步，在@font-face属性里，一般要引入.eot + .ttf /.otf + svg + woff 才能达到完美支持，因此还需以下操作
选中export自定义所需字体文件

根据所需进行选择，然后可以安心到下载了

下载完成后，得到所需到所有字体文件，然后在代码中引入。

3 使用

# 自定义所需字体，然后引入上面下载到字体文件
@font-face {
  font-family: 'DINCond';
  src: url('../../images/DINCond-Bold.eot');
  src: url('../../images/DINCond-Bold.eot?#iefix') format('embedded-opentype'),
    url('../../images/DINCond-Bold.woff') format('woff'),
    url('../../images/DINCond-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
...
...
...
.myClass {
   ...
   font-family: 'DINCond';
 }

参考：
https://blog.csdn.net/qq_34254618/article/details/51132995?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242