JavaScript FontFace API 详解：动态加载与自定义字体应用

concat fontFace  = new FontFace('fontFamily', 'url(fontUrl) | ArrayBuffer', descriptors);

var myFonts = new FontFace('myFontName', 'url(ShouShu.ttf)', {
    style: 'italic',  //表示该字体规则为斜体规则，只有在应用此规则字体的元素中设置了`font-style:italic`时应用该规则
    weight: 700,  //表示改字体规则为粗体规则，只有在应用此规则字体的元素中设置了`font-weight:700|bold`时应用改规则
    display: 'swap',
    family: 'ali',  //这个值被第一个参数代替
});

var myFonts = new FontFace('myFontName', 'url(ShouShu.ttf)',{});
myFonts.load().then(function(loadFace){
  document.fonts.add(loadFace);
});

var xhr = new XMLHttpRequest(); // 定义一个异步对象
xhr.open('GET', 'ShouShu.ttf', true); // 异步GET方式加载字体
xhr.responseType = "arraybuffer"; //把异步获取类型改为arraybuffer二进制类型
xhr.onload = function(){
  // 这里做了一个判断：如果浏览器支持FontFace方法执行
  if(typeof FontFace != 'undefined'){
    var buffer = this.response;  //获取字体文件二进制码
    var myFonts = new FontFace('myFontName', buffer);  // 通过二进制码实例化字体对象
    document.fonts.add(myFonts); // 将字体对象添加到页面中
  }else{
    // 如果浏览器不支持FontFace方法，直接添加样式到页面
    var styles = document.createElement('style');
    styles.innerHTML = '@font-face{font-family:"myFontName";src:url("ShouShu.ttf") format("truetype");font-display:swap;}';
    console.log(document.getElementsByTagName('head'));
    document.getElementsByTagName('head')[0].appendChild(styles);
  }
}
xhr.send();

<!-- css -->
<style>
  .box{
    font-family: myFont; /*这里我们先定义好使用的字体*/
  }
</style>

<!-- html -->
<div class="box">执子之手，方知子丑，泪流满面，子不走我走</div>

<!-- js -->
<script>
  // 页面加载完以后加载字体文件
  window.onload = function(){
    var myFonts = new FontFace('myFont', 'url(ShouShu.ttf)',{display: 'swap'});
    myFonts.load().then(function(loadFace){
      document.fonts.add(loadFace);
    });
  }
</script>

// 页面加载完以后加载字体文件
window.onload = function(){
  var myFonts = new FontFace('myFont', 'url(ShouShu.ttf)',{display: 'swap'});
  myFonts.load().then(function(loadFace){
    document.fonts.add(loadFace);
    // 给body设置字体样式 Arial为后补字体
    document.body.style.fontFamily = 'myFont, Arial';
    //或者单独给元素设置
    var box = document.getElementsByClassName("box");
    for (var i = 0; i < box.length; i++) {
      box[i].style.fontFamily = "myFont, Arial";
    }
  });
}