Remember webFONT requirements optimization once

1. The browser requests HTML documents. 2. The browser starts parsing the HTML response and building the DOM. 3. The browser finds CSS, JS, and other resources and dispatches requests. 4. The browser builds the CSSOM after receiving all the CSS content, and then merges it with the DOM tree to build the render tree. 5. Font requests are dispatched after the render tree indicates which font variants are needed to render the specified text on the web page. The browser performs the layout and draws the content onto the screen. 7. If the font is not yet available, the browser may not render any text pixels. 8. After the font is available, the browser will draw text pixels.Copy the code

Usually, the size of a font file is about 2-3m, so when the front end is making requirements, if it meets the requirements of special fonts, it usually asks the designer to cut these fonts into pictures and then load them in the form of pictures. However, this situation applies to the case of fixed text and a small number of fonts. Now if you look at the requirements below, it’s not usable.

With so many font packages on one page at a time, optimization is necessary. I tried a lot of methods and read a lot of documents, but the basic formula didn’t change.

Font pack volume

We were going to use spider at first, but spider reduces package size by deleting characters that you don’t use. In this project, we don’t know what titles the user entered, so there is no way. This method is pass. Fontmin, a tool similar to the word spider, is better, in my opinion. In this case, the font package size can only be gzip compressed.

compatibility

The problem of IE is inevitable, but only compatible with IE9, the current mainstream font formats are TTF, OTF, WOFF, Woff2, EOT and so on. Eot is a font for Internet Explorer, so I wanted to use two formats,.eot and.ttf.

@font-face{
  font-family: My Font;
  src: url('./font/font.eot') format('embedded-opentype'),url('./font/font.ttf') format('truetype');
}Copy the code

But the code above introduces another kind of error. Code-named CSS3114, @font-face failed to complete the OpenType insertion permission check. A bit like the file read-only write-only property, described in this article. Then how did I know so much about a front-end, and later found a tool that can provide permission control and convert the format fontConverter. There is also the much-recommended font Squirrel. I chose the former, the latter is not tried.

If you make a mistake converting the font format, you might get CSS3111. If you encounter this error, first check if the font package is abnormal.

Woff and.woff2 are pretty good, because.woff happens to be IE9+, and.woff has compression, which is smaller than.tFF, and.woff2 has better font compression than.woff, but IE11+, So I had to give it up and use.woff.

@font-face{
  font-family: My Font;
  src: url('./font/font.woff') format('woff');
}Copy the code

This solves the compatibility problem.

Resource to load

With so many font packages, no amount of compression is guaranteed to be too large, so be sure to consider resource loading. After referring to a lot of information on the Internet, I finally adopted the following methods based on my own project: 1. First, I uploaded the font package to the CDN server. 2. Use Link rel=”preload” to preload content on the page before the font is needed. 3. After entering the current page, use the browser’s cache to achieve the effect of fast loading rendering.

function preLoad(href){
  const preloadLink = document.createElement("link");
  preloadLink.href = href;
  preloadLink.rel = "preload";
  preloadLink.as = "font";
  preloadLink.type = "font/woff";
  preloadLink.crossorigin = "anonymous"
  document.head.appendChild(preloadLink);
}Copy the code

Web performance optimization (6) — WebFont Font optimization (wOFF2