Why intercept fonts?
Compared with English fonts, Chinese fonts have multiple contours and are complex. A file can take more than 10 MB. Some scenarios, such as active pages, must implement rich text. So we’ll crop out a subset of the fonts we use.
Font carrier, FontKit, Fontmin and other font clipping schemes can only rely on server capabilities, which is really inconvenient. In fact, most of these projects are also based on Opentype.js. Opentype. js can parse TTF OTF Woff into a font class in the browser, while clipping the font can be done in the browser. Screenshots of the plug-in are as follows:
The font thing
Font format
The vera.ttf and otf
The Outline description methods of OpenType fonts mainly include TrueType and Postscript. The suffix name of the former font library file is generally TTF, and the suffix name of the latter is generally OTF. OTF extends TTF by providing many functions that TTF does not. For example, OTF’s format allows storing up to 65,000 characters. The main difference between OTF and TTF is the advanced typography capabilities. OTF has decorations such as hyphens and alternate characters (also known as glyphs).
WOFF
Excerpted from wikipedia:
Web Open Font Format (WOFF) is a Font Format standard used in Web pages. Developed in 2009, this font format was standardized by the Web Fonts Working Group of the World Wide Web Consortium and is now a recommendation. This font format not only makes effective use of compression to reduce file size, but also does not contain encryption and is DRM free.
WOFF 1.0 uses Zlib compression and file sizes are typically 40% smaller than TTF. WOFF 2.0 uses Brotli compression and is 30% smaller than the previous version.
The WOFF and TTF formats are similar, mainly compressed.
How are font files stored
The font file itself is a binary file, internally composed of several tables. Taking TrueType as an example, the most critical one is glyf table, which stores the outline information of the font and contains the control points of the quadratic Bezier curve. The clipping plugin also collects this information to generate new files again.
You can be herephotopea.github.ioTake a look at font parsing
Open the console and see the result of Opentype parsing.
CSS @font-face
The font formats are “woff”, “Woff2 “,” TrueType “, “Opentype “,” Embedd-Opentype “and” SVG “. Woff + TTF is usually enough for most browsers (IOS doesn’t support Woff2).
@font-face {
font-family:'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
url('/fonts/awesome.woff') format('woff'),
url('/fonts/awesome.ttf') format('truetype'),
url('/fonts/awesome.eot') format('embedded-opentype');
}
Copy the codeLoad order
The order in which the fonts are specified is important, and the browser will pick the first format it supports. So if you want compatible browsers to use WOFF2, place the WOFF2 declaration on top of WOFF, and so on.
Font loading
Font lazy loading can have the problem of delayed text rendering: the browser must build the render tree (which relies on DOM and CSSOM trees) before it knows which font resources need to be used to render the text. As a result, font requests will lag far behind other critical resource requests and may prevent browsers from rendering text until the resource is extracted.
If we know which text is used on the page, we can also take advantage of a new feature: that triggers requests for web fonts early in key render paths without waiting for CSSOM to be created.
<head> <! -- Other tags... --> <link rel="preload" href="/fonts/awesome-l.woff2" as="font"> </head>Copy the codeThe timing of the display of the font
Fonts take time to download, so if it takes a long time and the page is rendered, how will the text with those fonts look?
In fact, the browser loading font can be divided into three stages:
-
Blocking period: If the font is not loaded, any element that tries to use it must render an alternate font that is not visible. If the font is successfully loaded during this time, it can be used normally.
-
Swap period: If the font is not loaded, any element that tries to use it must show the alternate font. If the font is successfully loaded during this time, it can be used normally.
-
Expiry date; If the font is not loaded, the loading fails and the font is rolled back.
The font – display attributes of CSS allows us to control the several stages of strategy, the attribute accepts five values auto | block | swap | fallback | optional (the default value is auto, behavior and similar to block). The differences are as follows:
| Blocking period | Exchange period | |
|---|---|---|
| block | short | up |
| swap | There is no | up |
| fallback | Extremely short (~100ms) | Short (~ 3 s) |
| optional | A very short | There is no |
Cutting principle
The font file is first converted into an arrayBuffer, which is passed to the parse function of opentype.js to obtain the parsing result of the font file. Use the stringToGlyphs(String) method to get a list of glyphs to crop. Combine the Font name and other information to create a new Font to get a subset of the Font. Finally, a subset of the TTF and WOFF formats will be downloaded.
Font preview is to get the path of the text by using the getPath method, and then call the Draw method under Path to draw the text on the canvas.
The project address
Github.com/zhangchen91…
FontSubset download CRX file installation can. Welcome to try, to a point ⭐ ~
References:
-
Microsoft OTF specification
www.microsoft.com/typography/…
-
Apple Truetype specification documentation
Developer.apple.com/fonts/TTRef…
-
OTF vs TTF
www.makeuseof.com/tag/otf-vs-…
-
sfnt2WOFF
Github.com/odemiral/wo…
-
optimize-webfonts
Developers.google.com/web/fundame…
-
How are fonts stored?
zhuanlan.zhihu.com/p/53036815
The welfare of
Article in the “big turn FE” public number will also be sent, and the public number has a lucky draw, this prize is around a memorial T-shirt or around a random hand do, any one of them, welcome to pay attention to (°▽°) Blue ✿