JS FontFace对象使用指南：动态加载字体与兼容性处理

FontFace对象在字面意义上指代字体样式，它允许开发者通过JavaScript定义字体对象，从而引入客户端本地未安装的字体文件。这些字体文件可以来自服务器端或第三方字体库。

介绍

基本语法：

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

参数说明：

1.fontFamily：字符串类型，指定应用于页面或元素的自定义字体名称；
2.fontUrl：字符串类型，指向字体文件的路径。该路径可以是第三方字体文件，但请求地址的服务器需开启跨域访问（CORS）。此值必须使用url()函数包裹；
3.ArrayBuffer：用于描述外部资源构建的二进制编码数组；
4.descriptions：对象形式，为可选参数，用于设置字体所属的属性规则，如字体样式、加粗程度、字符范围及显示行为等；可设置的值包括：
family：定义字体名称。此处设置会被第一个参数值覆盖，但可通过实例对象的fontFace.family属性进行更改。
style：设置当前字体规则的font-style值。即当应用该规则的元素设置了相应值时，将加载此字体规则，取值对应CSS中的font-style；
weight：设置字体的粗细值，对应CSS中的font-weight取值；
stretch：设置字体的拉伸方式，对应CSS中的font-stretch取值；
unicodeRange：定义字体支持的UNICODE字符范围；
variant：variant
featureSettings：Feature settings
display：设置字体在加载完成前的显示规则，取值如下；

auto 字体显示策略由用户代理定义。

block 为字体提供一个短暂的阻塞周期和无限的交换周期。即字体加载完成后，显示效果会自动更新为该字体。

swap 为字体提供一个非常小的阻塞周期和无限的交换周期。即字体加载完成后，显示效果会自动更新为该字体。

fallback 为字体提供一个非常小的阻塞周期和短暂的交换周期。即字体加载超过一定交互周期后，即使加载完成也不更新显示。

optional 为字体提供一个非常小的阻塞周期，且没有交换周期。即字体加载完成后不进行显示更新。

兼容性

从图中可以看出，这是一个较新的对象方法。IE及Edge 18-等低版本浏览器基本不兼容此对象。若需兼容，可使用下文介绍的异步加载方式；

创建FontFace对象

创建FontFace对象与创建普通对象基本相同，使用new关键字即可创建。

实例：

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

FontFace对象属性

从图中可以看出，FontFace对象的属性与descriptions参数基本相同。我们可以通过对象属性来更改这些值。例如，可以通过fontFace.family="newName"来更改之前new实例化时定义的第一个参数的值。

FontFace对象方法

load()：FontFace对象提供了一个方法，表示当字体文件加载完毕后的回调，它返回一个Promise对象，并使用当前的FontFace对象进行解析。

将创建的FontFace字体添加到页面中

创建完对象后并不能直接在页面中生效，需要通过FontFaceSet对象方法将字体添加到页面，才能使页面中的字体生效。我们可以使用document.fonts隐式引用FontFaceSet对象，并调用其add()方法将字体添加到页面。

通过字体Promise回调添加

语法：

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

上述代码使用了load()方法，当字体文件加载完毕后再执行添加操作。

通过Ajax获取字体文件后回调添加

这里也可以使用异步方式加载字体文件。

语法：

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中定义，另一种是通过JavaScript动态更改。

css事先定义好

<!-- 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>

通过js更改元素的字体

// 页面加载完以后加载字体文件
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";
    }
  });
}

参考网站 https://webplatform.github.io/docs/tutorials/typography/fontface/

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

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

介绍

兼容性