Application scenarios

The font provided in the original design is required for service brick moving. After the font package is introduced using @font-face, it is found that the font package is about 10 MB too large. Each 10 MB traffic request to the server causes server stress and affects user experience

Step 1: Use @font-face

MDN overview

This is a CSS @ rule called @font-face that allows web developers to specify online fonts for their web pages. By doing so, @font-face eliminates the need to rely on a user’s computer font. @font-face can be placed not only at the top of the CSS, but also in the conditional rule group of the @ rule.

Simply put, you can use your own font package on a web page and put it in @rules like @media media queries

usage

@font-face CSS at-rule Specifies a custom font for displaying text. Fonts can be loaded from a remote server or from a user’s locally installed font. If the local() function is provided to look up the specified font name locally from the user, and a match is found, the local font is used. Otherwise, the font uses the resources downloaded by the URL () function. By allowing authors to provide their own fonts, @font-face makes it possible to design content that is not limited by so-called “web-safe” fonts (fonts are so common that they can be used so widely). Specifying to find and use locally installed font names allows a font to be more customized than a base font, while doing so independently of the network. When using both url() and local() functions, the user’s downloaded copy of the font is searched for the font in order for the font copy that the user has installed to be used when needed. The @font-face rule can be used in any CSS conditional group rule, not just at the top level.

In short, @font-face breaks network security restrictions and gives authors the freedom to use any font they want in any CSS conditional group rule, without extending the local() function. Here is an everyday usage

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),// The suffix is the font file format common TTF SVG etc
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
Copy the code

Here provides an online font conversion site font format conversion

Step 2: Font package compression

After successful introduction, it is found that the font package is too large, here involves the font package compression, use a font package compression font-spider.

Use the font – spiders

The basic principle of

Remove the remaining unused text by matching the style used in the HTML. Achieve the purpose of compression font package.

The installation

npm install font-spider -g 
Copy the code

For those of you who have not installed Node NPM, please find out how to install it

use

@font-face {
    font-family: mysimhei;
    src: url(.. /.. /.. /simhei.ttf); }p{
    font-family: mysimhei;
}
Copy the code

Note that if it is used, it should be introduced in the CSS file first

font-spider ./demo/*.html
Copy the code

The * sign here is to indicate that all matches can also specify HTML.

font-spider ./demo/*.html ./demo/pages/index.html
Copy the code

Separate multiple files with Spaces

compressing

A backup font file and a compressed font package are generated

There is a problem

Word spider trial in local small projects

Larger projects or one-page applications are not recommended

  • Projects that do not support dynamic rendering
  • GBK encoding is not supported
  • Multi-page support is unfriendly

But github now has a library of spider extensions to give it a try.

gossip

In fact, Hong Kong business, Hong Kong win10 operating system unexpectedly no boldface, customers feel that the font is not the same impact on the experience, the font package is too large, so find out this set of fonts even compression solution. (Humble intern)