current position:Home>Small tips: detection of JS font loading failure or completion

Small tips: detection of JS font loading failure or completion

2022-04-29 09:45:38Xin space

font Font cover image takes up bitmap

One 、 Come to the point

For custom fonts , If you haven't finished loading , let Unicode Character display , It is possible to display messy characters , After a period of time, the mapped effect will be displayed .

This experience is not very good .

Also, developers want to know if the font file fails to load , You need to report when loading exceptions .

The implementation of the above two scenarios can use the browser native FontFace API.

The specific code is as follows :

   //  Compatibility judgment , prevent  IE  An error is reported in the browser 
if (window.FontFace) {
    var fontFile = new FontFace('Some Font Name', 'url(someFontUrl.woff2)');

    fontFile.load().then(function () {
        console.log(' success ');
    }, function (err) {
        console.log(' Failure :' + err);

I made a special experience demo, You can click here :FontFace load() Loading succeeded or failed demo

You can edit the... In the input box URL Address to judge whether the font loading is successful or not .

GIF Screen recording diagram :

 Font loading detection diagram

Turn on network monitoring , After clicking the button, you can see the font request :

 Request and detection

Two 、 understand FontFace API

FontFace API Relative to handle CSS @font-face Some uncontrollable strategies have moved to JS in , So that we can flexibly set .

Some of its support API Properties and @font-face Rules support CSS Attributes are one-to-one .

for example :

  • FontFace.display Corresponding CSS font-display attribute ;
  • Corresponding font-family attribute ;
  • FontFace.featureSettings Corresponding font-feature-settings attribute ;
  • FontFace.stretch Corresponding font-stretch attribute ;
  • Corresponding font-style attribute ;
  • FontFace.unicodeRange Corresponding unicode-range attribute ;
  • FontFace.variant Corresponding font-variant attribute ;
  • FontFace.variationSettings Corresponding font-variation-settings attribute ;
  • FontFace.weight Corresponding font-weight attribute ;
  • FontFace.ascentOverride Corresponding ascent-override attribute ;
  • FontFace.descentOverride Corresponding descent-override attribute ;
  • FontFace.lineGapOverride Corresponding line-gap-override attribute ;

Actually , At the end of the list above 3 individual CSS You may not have seen , See this article “ascent-override descent-override line-gap-override One pot ” Get to know .

in addition ,FontFace The interface also has the following read-only properties and methods :

Return to one Promise, Triggered after the custom font is loaded or fails . I feel a little chicken ribs , With load() Method , What's the use of this property ? And this method is based on my test , Seems to be carrying out load() It works .
Returns the status of the font , The value may be one of the following : "unloaded", "loading", "loaded" perhaps "error".
Trigger custom font loading , It can be URL Address , It can also be a font buffer resources , The return value is Promise, After success, return to the current FontFace object .

Simple instructions for use :

   var fontFile = new FontFace('Some Font Name', 'url(someFontUrl.woff2)');

fontFile.load().then(function (fontface) {
    //  The print value is  'Some Font Name'


Except for some relatively new attribute values ,FontFace API The compatibility of is shown in the figure below , browser 2014 Has supported .

FontFace API Interface compatibility

3、 ... and 、 beat a retreat

Looked at the , There's another one named FontFaceSet Of API, This API In general, and document.fonts Use it together , It is mainly used for batch processing of user-defined fonts in documents

In the future, I will make relevant introduction when meeting relevant needs .

in addition , If you want compatibility IE browser , You can use the traditional XMLHttpRequest GET Request simulation ,onLoad Then perform relevant processing , schematic :

   //  Traditional realization 
var xhr = new XMLHttpRequest();'get', 'someFontUrl.woff2');
xhr.onload = function () {
    console.log(' Loading successful !');
xhr.onerror = function () {
    console.log(' Loading failed !');

May day is just a few days away , Already at home 40 It's been many days .

The community is still positive every day , I guess I'll see you on children's day at the earliest !

I really want to go fishing !

( This is the end of this article. )

copyright notice
author[Xin space],Please bring the original link to reprint, thank you.

Random recommended