background

In order to enrich the copywriting effect of the page or in order to unify the font package preset by different client devices, customers will see different copywriting effect. Front-end developers use a custom font family, @font-face, to solve the problem.

Problems with custom font families

The use of custom fonts has not been perfect so far, and we are going through each stage of the process over time.

The first stage

The problem

The size of a full font package is usually ten pieces large. For example, in Source bold, only TTF file formats have proprietary heavy fonts (regular, bold…). That adds up to 10M+, which is often more than the package size of our entire project. If you use the full font package directly, you will encounter two problems: FOIT and FOUT

The solution

Since the full font package is large and takes too long to download, our preferred solution is to only extract the characters we need for our project. A font-spider should come in. The general principle of this tool is to statically parse the built Web package, find the CSS selectors for the custom fonts, match and extract the characters under the HTML elements that use these selectors, and compress a new font package through Fontmin to replace the original full font package.

The second stage

The problem

The above scheme currently works for parsing web packages, which already contain all the characters we expect, but for SPA projects, which currently account for a percentage of the market, most of the copywriting content on a page is rendered by requesting it back from a server-side interface.

The solution

Since the usage scenarios for static parsing are not comprehensive enough, we will use dynamic parsing. Font spider- Plus is derived from dynamically parsing specified characters in web packages to extract and compress them. Its working principle is to use Puppeteer to render the locally built Web package in headless mode for the specified page, persisting the complete HTML content to the local, and then using font-spider to adapt to the SPA project.

The third stage

The problem

So far, we have transitioned from static to dynamic parsing. But consider the drawbacks of the current font spider-Plus scheme:

  • It is necessary for the developer to specify the corresponding page content of all urls that can be rendered under SPA, but it is not friendly for a large SPA project, and some large SPA projects will have dozens of pages. Another, more important issue is that the characters rendered by pages in different states are obviously not always the same. This is also an inevitable disadvantage of not using full font packages
  • There is still a need for explicit command line operations on packages built using webPack and other front-end resource packaging tools, which is obviously not very friendly to the current front-end project development process

The solution

Since both the full font package and the reduced font package that results from parsing (static or dynamic) projects have flaws, our goal is clear, to have both.

Core ideas: For the home page (or url collection exposed to the outside world), dynamically parse out the reduced font package and pack the font package together into the constructed Web package, solving the FOIT and FOUT problems of the home page, while loading the full package in the back, so that when the user switches to a non-home page, You’ll also see rendered characters from our custom font series. At the same time, these processes are developed as plug-ins of Webpack, which are integrated into the packaging and construction process of Webpack, and developers do not need to conduct secondary operations on the constructed Web package

Spa-font spider-webpack-plugin was developed. For details, please search spa-font spider-webpack-plugin on NPM or check the Readme user manual in Github repository.

conclusion

Finally, this is suitable for SPA project, and integrated with webpack plug-in web font extraction, compression tool to help you, for improvement suggestions, please leave a comment. At the same time, please point out if there is any wrong description in the article. The author will reply immediately after seeing it and consider changing it