FontFace字面理解就是字體臉，也就是文字字體樣式的意思，它是通過(guò)使用javascript來(lái)定義字體對(duì)象，并且引入客戶端沒(méi)有安裝得字體文件，可以是者服務(wù)器端，或者是第三方字體庫(kù)文件。

介紹

基本語(yǔ)法：

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

參數(shù)說(shuō)名：

• 1.fontFamily：字符串，自定義的要應(yīng)用到頁(yè)面或者元素中得字體名稱；
• 2.fontUrl：字符串，字體文件的路徑，可以是第三方字體文件路徑,但是需要請(qǐng)求的地址服務(wù)器開(kāi)啟跨越訪問(wèn)，此值必須要用url()包裹起來(lái)；
• 3.ArrayBuffer：用于描述的外部資源構(gòu)建的二進(jìn)制編碼數(shù)組
• 4.descriptions：對(duì)象形式，可選值，用來(lái)設(shè)置字體歸屬于那種屬性下的字體規(guī)則，如字體樣式，字體加粗，字體字符串范圍等，還有該規(guī)則的顯示行為等；可以設(shè)置得值：
• family：定義字體名稱，這里的設(shè)置會(huì)被第一個(gè)參數(shù)值替代，但是我們可以通過(guò)實(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è)置字體在沒(méi)有加載完的顯示規(guī)則取值如下；

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

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

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

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

optional 為字體提供一個(gè)非常小的阻塞周期，并且沒(méi)有交換周期。也就是說(shuō)等字體加載不進(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ù)基本相同。我們可以通過(guò)對(duì)象屬性來(lái)更改這些值。比如可以通過(guò)fontFace.family="newName"來(lái)更改之前我們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字體添加到頁(yè)面中

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

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

語(yǔ)法：

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

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

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

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

語(yǔ)法：

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);  // 通過(guò)二進(jìn)制碼實(shí)例化字體對(duì)象
    document.fonts.add(myFonts); // 將字體對(duì)象添加到頁(yè)面中
  }else{
    // 如果瀏覽器不支持FontFace方法，直接添加樣式到頁(yè)面
    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();

頁(yè)面中使用我們添加的字體

我們使用字體文件有兩種方式，一種是事先在css中定義，另一種是通過(guò)js改變

css事先定義好

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

<!-- html -->
<div class="box">執(zhí)子之手，方知子丑，淚流滿面，子不走我走</div>

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

通過(guò)js更改元素的字體

// 頁(yè)面加載完以后加載字體文件
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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論