The opening

With the continuous upgrade of devices, browsers are more and more supported. The popularity of web font is also an inevitable trend, his class selection, searchable, scalable, high adaptability and high performance, good user experience and other advantages make it become the front end of the web designers to achieve the unconstrained design of the first choice. Today we are going to introduce webFont and its applications, and how to optimize webFont.

introduce

In short, webFont is a technology that allows web pages to use online fonts. In the past, some special fonts used by designers in the design draft could not display the desired effect because they were not available on other people’s devices. Our solution was to replace the special fonts with images, and the emergence of Webfont solved the problem.

It introduces online fonts through the @font-face statement of CSS, and uses CSS selectors to specify the text to use the fonts. Currently there are four font formats used on the network: EOT, TTF, WOFF and WOFF2

The support is as follows:

  • WOFF 2.0 is available for browsers that support it (not yet implemented for many browsers).
  • WOFF supports most browsers.
  • TTF supports older Android browsers (version 4.4 and below).
  • The EOT supports older Internet Explorer (IE9 and below) browsers.

Note: Technically there is another format, the SVG font, but IE and Firefox have never supported it, and it seems that Chrome has dropped support for it, so ignore it for now.

font-face

Css3 introduced an at-rule attribute, @font-face, that specifies the location of a particular font resource, the style characteristics, and the Unicode subset it supports.

The syntax is as follows:

@font-face { [ font-family: <family-name>; ]  || [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ]  || [ unicode-range: <urange>#; ]  || [ font-variant: <font-variant>; ]  || [ font-feature-settings: normal | <feature-tag-value>#; ]  || [ font-variation-settings: normal | [ <string> <number>] # || [ font-stretch: <font-stretch>; ] || [ font-weight: <weight>; ] || [ font-style: <style>; ] }Copy the code

Font-family: specifies the font name. The specified font name will be used for the font or font-family property. The local() directive references, loads, and uses locally installed fonts; Format (): Indicates the font format(optional) referenced by the URL resource through this property; Unicode-range: Specifies the Unicode subset of the font to be used, thereby reducing the font load size;

@font-face {
    font-family: DIN;
    font-style: normal;
    font-weight: 400;
    src: url(.. /assets/font/DIN_Alternate_Bold.eot);src: local("DIN Alternate"),
      url(.. /assets/font/DIN_Alternate_Bold.woff)format("woff"),
      url(.. /assets/font/DIN_Alternate_Bold.ttf)format("truetype"),
      url(.. /assets/font/DIN_Alternate_Bold.svg#DINAlternateBold)format("svg")}Copy the code

When a browser to detect local no DIN fonts, he will be in the order specified cycle access provides a list of resources, if there’s one tip is to check whether the format format support, if support has loaded the resources, if we do not support the skip into the next format, if there is no format tip, no matter how will try to load the corresponding resources.

Performance optimization

The compression

A font is a collection of glyphs, each of which is a set of paths describing the shape of a letter. Each of these different glyphs often contains a large amount of common information that can be compressed. Common compression modes are: GZIP and other compatible compression modes:

  • EOT and TTF formats do not compress by default. You can enable GZIP on the server for compression.
  • WOFF has built-in compression
  • WOFF2 uses custom preprocessing and compression algorithms to compress file sizes approximately 30% more efficiently than other formats. You can choose other compression methods to reduce font size, but be careful to do your browser testing.

unicode-range

Using Unicode-range to specify a subset of encodings, the font size can be greatly reduced. Methods of use are:

  • Specifies that single character encodings are separated by commas (for example, U+416)
  • Interval ranges are delimited by bars-Represents the start of the code, for example (U+400-4ff)
  • Wildcards (e.g. U+4??) ? Represents any hexadecimal number. These three can be used together and are separated by commas. Note: Sometimes some browsers don’t support Unicode-range well, so you need to manually select a subset of the fonts you use. There are many third-party tools on the web such as FontTools.

font-display

Note: This is a new property, it is not ready to use standard (currently not supported in Safari, some versions of Chrome) this is a recently proposed solution to solve the problem of font rendering whitespace, before we talk about the loading and rendering of web fonts.

The main incentive is that the browser delays font requests until the render tree (DOM and CSSOM trees) is built, because the browser must build the render tree before it knows which fonts to use to render the text. It may also prevent the browser from rendering the text until it gets the key resources to build the render tree (in the “race” between the first rendering of the web content and the loading of the font resource, the browser will produce a rendering that leaves out all the text rendered). Of course, the whitespace problem varies from browser to browser. For example, Safari blocks text rendering until the font has been downloaded, while Chrome waits up to three seconds to enable the back font and rerenders after the font has been downloaded. The summary is as follows:

During the Block phase, the browser renders the text with an invisible font (rendering blank). At the Swap stage, the browser renders the text using a sans-serif font; In the Failure stage, fonts fail to download and the browser will use a font on the back. The problem now is that we have no control over how long these phases are and what happens when one of them fails, and font display makes that possible. It has four values: block, swap, fallback, and optional, as well as auto, which behaves like block. The values of each attribute are shown as follows:

  • Font-display: block, text will be blocked for a period of time (in browsers, Safari, Chrome, Firefox, 3 seconds; If IE is 0 seconds, it is considered that there is no block phase. Older versions of Safari have infinite duration), so called blank rendering problem (FOIT)
  • Font-display: swap, the text will not appear in the block phase, the text will immediately be displayed in the back font until the required font is loaded. Font switching effect (FOUT) will appear
  • Font-display: fallback, indicating a fallback between a block and a swap. The whitespace is shortened to 100ms, then switch to the backup font until the required font is loaded
  • Font display: optional, similar to Fallback, except that it automatically switches fonts based on network speeds (e.g., 2G networks).

When using this property, we need to use it according to the specific situation: if we use webfont for icon diagrams, we cannot accept fallback, so we need to use font-display:block.

More and more

@font-face attributes (font-weight,font-style, etc.) are also important for performance optimization. They affect the efficiency of matching resources and loading resources, as well as visual consistency, so give the browser a clear indication as accurately as possible. Of course, there are many other optimizations, including HTTP caching. Use the FontLoading API to optimize loading and rendering.

conclusion

2017 is over, I was going to write a summary. But when you’re on a Train in Europe, that’s not what you think about. It has been three or two days since 2018, and it has been almost two years since the beginning of the grocery store. Due to laziness in the later years of 2017, many articles have not kept up, and fans have not reached the small goal of 10,000 yuan per year, but there are more than 9,900 articles in total, and 112 articles are included in the column (113 articles counting this). Here we would like to thank the authors Tianfangye, Yu Qiu, Xie Ran, Ran Ran students, Jiang Huan, Lin Xin, SimplyY, Awee, Beard Daha, Wu Chengqi, LeviDing, Huang Junliang, Lin Lihuan, Danger, AHONn, etc. (in no particular order, please excuse the mistakes) for their contributions, bringing a delicious meal of knowledge to students who love the front end. The grocery store wouldn’t get so much attention without your support. I would also like to thank the thousands of fans who continue to support me and keep me going. It is my honor to meet all of you in Zhihu. I hope we can continue such tacit understanding and friendship in the coming year and make progress together for this pure hobby.