JavaScript中FontFace對(duì)象的使用方式

更新時(shí)間：2022年08月11日 17:09:34 作者：75624839

這篇文章主要介紹了JavaScript中FontFace對(duì)象的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

介紹

基本語法：

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

參數(shù)說名：

1.fontFamily：字符串，自定義的要應(yīng)用到頁面或者元素中得字體名稱；
2.fontUrl：字符串，字體文件的路徑，可以是第三方字體文件路徑,但是需要請(qǐng)求的地址服務(wù)器開啟跨越訪問，此值必須要用url()包裹起來；
3.ArrayBuffer：用于描述的外部資源構(gòu)建的二進(jìn)制編碼數(shù)組
4.descriptions：對(duì)象形式，可選值，用來設(shè)置字體歸屬于那種屬性下的字體規(guī)則，如字體樣式，字體加粗，字體字符串范圍等，還有該規(guī)則的顯示行為等；可以設(shè)置得值：
family：定義字體名稱，這里的設(shè)置會(huì)被第一個(gè)參數(shù)值替代，但是我們可以通過實(shí)例對(duì)象的fontFace.family屬性進(jìn)行更改。
style：設(shè)置當(dāng)前字體規(guī)則的font-style值，也就是當(dāng)應(yīng)用改規(guī)則的元素設(shè)置了相對(duì)于的值將加載改字體規(guī)則，取值為對(duì)應(yīng)css中的font-style取值；
weight：設(shè)置字體的粗細(xì)值，對(duì)應(yīng)css中的font-weight取值；
stretch：設(shè)置如何拉伸字體，對(duì)應(yīng)css中的font-stretch取值；
unicodeRange：定義字體支持的UNICODE字符范圍
variant：variant
featureSettings：Feature settings
display：設(shè)置字體在沒有加載完的顯示規(guī)則取值如下；

auto 字體顯示策略由用戶代理定義。

block 為字體提供一個(gè)短暫的阻塞周期和無限的交換周期。也就是說等字體加載完以后字體顯示效果會(huì)自動(dòng)更新成改字體

swap 為字體提供一個(gè)非常小的阻塞周期和無限的交換周期。也就是說等字體加載完以后字體顯示效果會(huì)自動(dòng)更新成改字體

fallback 為字體提供一個(gè)非常小的阻塞周期和短暫的交換周期。也就是說等字體加載在過了一定的交互周期后加載完字體將不進(jìn)行更新顯示

optional 為字體提供一個(gè)非常小的阻塞周期，并且沒有交換周期。也就是說等字體加載不進(jìn)行更新顯示

兼容性

從圖上可以看出這是一個(gè)新的對(duì)象方法，IE，Edge18-，等低版本瀏覽器基本不兼容這個(gè)對(duì)象，如果我們要做兼容可以使用下邊介紹的異步加載方式；

創(chuàng)建FontFace對(duì)象

創(chuàng)建FontFace對(duì)象和創(chuàng)建普通對(duì)象基本相同，用new 關(guān)鍵字創(chuàng)建

實(shí)例：

var myFonts = new FontFace('myFontName', 'url(ShouShu.ttf)', {
    style: 'italic',  //表示該字體規(guī)則為斜體規(guī)則，只有在應(yīng)用此規(guī)則字體的元素中設(shè)置了`font-style:italic`時(shí)應(yīng)用該規(guī)則
    weight: 700,  //表示改字體規(guī)則為粗體規(guī)則，只有在應(yīng)用此規(guī)則字體的元素中設(shè)置了`font-weight:700|bold`時(shí)應(yīng)用改規(guī)則
    display: 'swap',
    family: 'ali',  //這個(gè)值被第一個(gè)參數(shù)代替
});

FontFace對(duì)象屬性

從圖上可以看出，F(xiàn)ontFace對(duì)象的屬性跟descriptions參數(shù)基本相同。我們可以通過對(duì)象屬性來更改這些值。比如可以通過fontFace.family="newName"來更改之前我們new實(shí)例化時(shí)定義得第一個(gè)參數(shù)的值。

FontFace對(duì)象方法

load()：FontFace對(duì)象為我們提供了一個(gè)方法，表示當(dāng)字體文件加載完畢以后的方法，它返回一個(gè)Promise對(duì)象，并且使用當(dāng)前的FontFace對(duì)象進(jìn)行解析

將創(chuàng)建的FontFace字體添加到頁面中

我們創(chuàng)建完對(duì)象以后并不能直接在頁面中生效，需要我們通過FontFaceSet對(duì)象方法將字體添加到頁面中，才能使頁面中的字體生效，我們可以通過使用document.fonts隱式引用FontFaceSet對(duì)象，并且使用它的add()方法將字體添加到頁面。

通過字體Promise回調(diào)添加

語法：

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

上面代碼我們使用了load()方法，當(dāng)字體文件加載完畢以后再執(zhí)行添加操作。

通過Ajax獲取字體文件后回調(diào)添加

這里我們也可以使用異步的方式加載字體文件

語法：

var xhr = new XMLHttpRequest(); // 定義一個(gè)異步對(duì)象
xhr.open('GET', 'ShouShu.ttf', true); // 異步GET方式加載字體
xhr.responseType = "arraybuffer"; //把異步獲取類型改為arraybuffer二進(jìn)制類型
xhr.onload = function(){
  // 這里做了一個(gè)判斷：如果瀏覽器支持FontFace方法執(zhí)行
  if(typeof FontFace != 'undefined'){
    var buffer = this.response;  //獲取字體文件二進(jìn)制碼
    var myFonts = new FontFace('myFontName', buffer);  // 通過二進(jìn)制碼實(shí)例化字體對(duì)象
    document.fonts.add(myFonts); // 將字體對(duì)象添加到頁面中
  }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中定義，另一種是通過js改變

css事先定義好

<!-- css -->
<style>
  .box{
    font-family: myFont; /*這里我們先定義好使用的字體*/
  }
</style>

<!-- html -->
<div class="box">執(zhí)子之手，方知子丑，淚流滿面，子不走我走</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設(shè)置字體樣式 Arial為后補(bǔ)字體
    document.body.style.fontFamily = 'myFont, Arial';
    //或者單獨(dú)給元素設(shè)置
    var box = document.getElementsByClassName("box");
    for (var i = 0; i < box.length; i++) {
      box[i].style.fontFamily = "myFont, Arial";
    }
  });
}

參考網(wǎng)站 https://webplatform.github.io/docs/tutorials/typography/fontface/

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: