Shulou(Shulou.com)06/01 Report--

This article mainly introduces what the html5 web font loading scheme has, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to know about it.

Code:

@ font-face {font-family: 'family-name'; src: url (' ${url}');} .main {font-family: 'family-name';}

However, in the actual development process, we often encounter more problems, such as switching fonts and adding a loding effect.

Here is a summary of the problems with web font loading, as well as best practices.

FOIT

In general, browsers use alternate fonts to display text before the font file is loaded, which is called FOIT (Flash of Unstyled Text). However, it seems that all browsers except IE will wait 3 seconds to display system fonts, resulting in a 3-second text flash, which is a poor user experience.

Font-display

To fix this, CSS Fonts Module Level 3 adds a font-display attribute that allows browsers to use alternate fonts immediately, replace them as soon as the web fonts are loaded, and re-render.

The related introduction is as follows:

Auto: use browser default behavior

Block: the browser first replaces the text on the page with invisible text and waits for the font to be loaded before displaying it

Swap: if the set font is not yet available, the browser will first use the alternate font to display and replace the alternate font when the set font is loaded

Fallback: the behavior is roughly the same as the swap property value, but the browser will set the loading time limit for the set font, and once the loading time is longer than this limit, the set font will not replace the alternate font for display. Set this time to 3s in Webkit and Firefox

Optional: when using this property value, if the set font is not loaded within the limited time, the current page will always use an alternate font, and the set font will continue to be loaded in the background so that the next time you browse, you can directly use the set font.

So we can use it as follows:

@ font-face {font-family: 'family-name'; src: url (' ${url}'); font-display: swap;}

CSS Font Loading API

On the other hand, there is also a corresponding font solution at the JavaScript level. CSS Font Loading API can listen for load events, and the effect of font-display: swap can be achieved by replacing class after loading.

API is relatively easy to use, without much introduction:

Const font = new window.FontFace ('fontFamilyName',' url (${url})'); document.fonts.add (font); font.load () .then (info = > {document.body.style.fontFamily = 'fontFamilyName';}) .catch (err = > {console.log (err);})

AJAX + Base64

The above two methods can solve the problem of whitening fonts on the Internet, and CSS Font Loading API can also monitor the font loading process to facilitate functions such as dynamic font loading or font switching.

The above two schemes are new and will have some compatibility. in addition, you can also use AJAX to load fonts and convert them to base64 to monitor the font loading process.

Function fetchFont (url) {return fetch (url) .then (response = > {if (response.status! = = 200) {return Promise.reject (response);} return response.blob ();})} function font2base64 (blob) {return new Promise ((resolve, reject) = > {const reader = new FileReader (); reader.onloadend = _ = > {resolve (reader.result);} Reader.onerror = err = > {reject (err);} reader.readAsDataURL (blob);} fetchFont (url) .then (blob = > {return font2base64 (blob);}) .then (res = > {const base64Url = ('+ res). Replace (_ 'data:application/octet-stream;base64',' data:application/x-font-woff;charset=utf-8;base64') / / generate font-face definition without overwriting document.body.style.fontFamily = 'fontFamilyName';}) .catch (err = > {console.log (err);})

Take fetch as an example, you can use other AJAX frameworks.

In addition, the base64 string generated here needs to be processed. The MIME generated here is application/octet-stream, and application/octet-stream refers to an unknown application file. You need to manually specify the type as the font, otherwise the font definition will become invalid.

Thank you for reading this article carefully. I hope the article "what is the loading scheme of web fonts in html5" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.