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

1、安装

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

2、格式转换

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

打开网站www.fontsquirrel.com/tools/webfo…
，上传上一步下载到.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';
 }

复制代码