CSS3 设置特殊字体的方法@font-face

问题：
在开发过程中我们经常在设计图 中看到一些特殊字体，这些字体并不是系统自带的字体，那要怎么引用特殊字体呢？？
兼容性 ：
IE9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.
注意： IE 8 及更早IE版本不支持@font-face 规则.

简单上手的使用过程：
1.先看文件放置位置，这里font文件夹下有一个PWChal.ttf 字体，并且是TrueType格式。


设置css @font-face

<style>
        @font-face{
            font-family: myFirstFont;   //'myFirstFont'是自己起得特殊字体的名称
            src: url(font/PWChalk.ttf) format('truetype'); //url(引入字体路径，相对和绝对路径都可以，路径正确就可以了，)；format（字体类型）
            font-weight:100;
             font-style:normal;
        }
        .fonts{
            font-size: 30px;
            font-family: myFirstFont;  // 给dom设置特殊字体font-family：值就是上边自己为特殊字体起的名称
        }
    </style>

html代码

<div class="fonts">HelloWord!00888999</div>

参考链接：https://blog.csdn.net/cddcj/article/details/77506408

简单介绍@font-face语法规则：

@font-face {
      font-family: YourWebFontName;
      //src: <source> [<format>],<source> [<format>];
      src: url('fontName.woff') format('woff'),
          url('fontName.ttf') format('truetype'),
          url('fontName.svg#fontName') format('svg');
      font-weight: <weight>;
      font-style: <style>;
    }

font-family: <YourWebFontName> ：自定义字库名称（一般设置为所引入的字库名），后续样式规则中则通过该名称来引用该字库。
src ：设置字体的加载路径和格式，通过逗号分隔多个加载路径和格式   （多个字体类型的话还可以分成很多个@font-face 单个单个命名字体名称）
srouce ：字体的加载路径，可以是绝对或相对URL。
format ：字体的格式，主要用于浏览器识别，一般有以下几种——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使用的是一致的。 
src属性后还有一个 local(font name) 字段，表示从用户系统中加载字体，失败后才加载webfont。

src: local(font name), url("font_name.ttf")

详细讲解 ：
语法规则，兼容浏览器，字体格式说明，字体下载网站参考链接 https://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html 均有详细介绍