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

This article will explain in detail the example analysis of loading acceleration in CSS fonts. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

In addition to a variety of specific font families, such as Times, Verdana, Helvetica, or Arial, CSS defines five common font families:

Serif font

These fonts are proportional and have upper and lower short lines. If all characters in the font have different widths according to their sizes, the characters are proportional. For example, lowercase I and lowercase m have different widths. The upper and lower dash is the decoration at the end of each character's stroke, such as the top and bottom of lowercase l, or the bottom of both legs of uppercase A. Examples of Serif fonts include Times, Georgia, and New Century Schoolbook.

Sans-serif font

These fonts are proportional and have no upper and lower dashes. Examples of Sans-serif fonts include Helvetica, Geneva, Verdana, Arial, or Univers.

Monospace font

Monospace fonts are not proportional. They are often used to simulate typewriter text, the output of old dot matrix printers, and even older video display terminals. With these fonts, each character must be exactly the same width, so lowercase I and lowercase m have the same width. These fonts may or may not have upper and lower dashes. If a font has exactly the same character width, it is classified as a Monospace font, regardless of whether there are upper and lower dashes. Examples of Monospace fonts include Courier, Courier New, and Andale Mono.

Cursive font

These fonts try to imitate human handwriting. Typically, they consist mainly of curves and stroke decorations that are not found in Serif fonts. For example, capital A may have a small bend at the bottom of its left leg, or it may consist entirely of flower body parts and small curved parts. Examples of Cursive fonts include Zapf Chancery, Author, and Comic Sans.

Fantasy font

These fonts cannot be defined by any feature, only one thing is certain, that is, we cannot easily plan them into any other font family. Such fonts include Western, Woodblock, and Klingon.

In theory, any font family installed by the user will fall into one of these generic series, but in practice this may not be the case, although exceptions, if any, tend to be rare.

However, it seems that most websites use non-default fonts these days, but who can blame them? System fonts are very boring, using custom fonts can add a lot of color to a website. The problem with using custom fonts is that it slows down the loading of your site. Font files are relatively large and may require separate font files, bold and italic, and prevent rendering if the developer does not resolve them. Let me tell you a faster way to load.

1. Put the font on the CDN

To speed up the site, a simple solution is to use CDN, which makes no difference to fonts. It is important to make sure that CDN has appropriate CORS settings

The code is as follows:

# Apache config

Header set Access-Control-Allow-Origin "*"

# nginx config

If ($filename ~ * ^. *?\. (eot) | (ttf) | (woff) $) {

Add_header Access-Control-Allow-Origin *

}

If the CORS setting of CDN is incorrect, you will see the AJAX/ cross-domain error console.

two。 Load CSS with non-blocking

Essentially, using media=none allows us to download the stylesheet in the browser without blocking rendering, so when the stylesheet loads, the settings required for media to set it will appear on the screen

3. Separate font selector

If the font is not loaded when it is used, the user will see white space until the font is loaded. This, of course, is not a good thing if font loading fails. At the very least, the user will stare in the empty space for a few seconds. It is best to declare custom fonts after loading with the fonts added to body:

CSS

H2 {font-family: Arial, serif;} / * system font * /

.fontsfont h2 {font-family: 'MySpecialFont', serif;} / * Custom Font * /

By declaring the above strategy using fonts, system loading fonts will initially be enabled only if custom loading fonts will be enabled, so the screen will not display empty content for any period of time. I suggest creating a Stylus/Sass/Less mixed settings font setting, custom selector automatic settings.

This is the end of the sample analysis of loading acceleration in CSS fonts. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.