欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中FontFace對象的使用方式

 更新時間：2022年08月11日 17:09:34   作者：75624839  
這篇文章主要介紹了JavaScript中FontFace對象的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

介紹

基本語法：

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

參數(shù)說名：

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

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

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

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

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

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

兼容性

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

創(chuàng)建FontFace對象

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

實例：

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

FontFace對象屬性

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

FontFace對象方法

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

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

我們創(chuàng)建完對象以后并不能直接在頁面中生效，需要我們通過FontFaceSet對象方法將字體添加到頁面中，才能使頁面中的字體生效，我們可以通過使用document.fonts隱式引用FontFaceSet對象，并且使用它的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(); // 定義一個異步對象
xhr.open('GET', 'ShouShu.ttf', true); // 異步GET方式加載字體
xhr.responseType = "arraybuffer"; //把異步獲取類型改為arraybuffer二進制類型
xhr.onload = function(){
  // 這里做了一個判斷：如果瀏覽器支持FontFace方法執(zhí)行
  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中定義，另一種是通過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為后補字體
    document.body.style.fontFamily = 'myFont, Arial';
    //或者單獨給元素設(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/

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

相關(guān)文章

最新評論