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

This article mainly introduces "how to load fonts in Vue.js applications". In daily operation, I believe many people have doubts about how to load fonts in Vue.js applications. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to load fonts in Vue.js applications". Next, please follow the editor to study!

Correctly declare the font of font-face

Ensuring that fonts are declared correctly is an important aspect of loading fonts. This is done by using the font-face property to declare the font of your choice. In your Vue project, this declaration can be done in your root CSS file. Before we get into this question, let's take a look at the structure of the Vue application.

/ root public/ fonts/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff index.html src/ assets/ main.css components/ router/ store/ views/

We can make a font-face declaration in main.css like this:

/ / src/assets/main.css @ font-face {font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: auto; unicode-range: Uzz000-5FF; src: local ("Roboto"), url ("/ fonts/Roboto/Roboto-Regular.woff2") format ("woff2"), url ("/ fonts/Roboto/Roboto-Regular.woff") format ("woff");}

The first thing to notice is font-display:auto. Using auto as the value allows browsers to display fonts using the most appropriate strategy. This depends on some factors, such as network speed, device type, idle time, and so on.

To have more control over how fonts are loaded, you should use font-display: block, which instructs the browser to hide the text briefly until the font is fully downloaded. Other possible values are swap, fallback, and optional. You can read more about them here.

One thing to note is unicode-range: Ubun000-5FF, which instructs the browser to load only the required glyph range (Ubun000-U+5FF). You also want to use woff and woff2 font formats, which are optimized formats that can be used in most modern browsers.

Another thing to note is the src order. First, we check that the local copy of the font is available (local ("Roboto")) and use it. Many Android devices are pre-installed with Roboto, in which case we will use a pre-installed copy. If you do not have a local copy, continue to download the woff2 format with browser support. Otherwise, it jumps to the next font in the supported declaration.

Preload font

Once your custom font is declared, you can use to tell the browser to preload the font in advance. In public/index.html, add the following:

Rel = "preload" instructs the browser to start fetching resources as soon as possible, and as = "font" tells the browser that this is a font, so it gives priority to requests. Also pay attention to crossorigin= "anonymous", because without this property, preloaded fonts will be discarded by the browser. This is because browsers get fonts anonymously, so you can request them anonymously using this property.

Using link=preload increases the chances that custom fonts will be downloaded before they are needed. This small adjustment greatly speeds up the loading time of fonts, thus speeding up the rendering of text in your Web application.

Use link = preconnect managed fonts

When using managed fonts from sites such as Google fonts, you can get faster load times by using link=preconnect. It tells the browser to establish a connection to the domain name in advance.

If you are using the Roboto font provided by the Google font, you can do the following in public/index.html:

...

This allows you to establish an initial connection to the origin https://fonts.gstatic.com, which is established when the browser needs to get resources from the origin. You can see the difference between the two from the picture below.

When loading fonts without using link=preconnect, you can see how long it takes to connect (DNS lookup, initial connection, SSL, etc.). When using link=preconnect like this, the results look very different.

Here, you will find that the time spent on DNS lookup, initial connection, and SSL no longer exists, because the connection has already been made.

Use service workers to cache fonts

Fonts are static resources and do not change much, so they are good candidates for caching. Ideally, your Web server should set a longer max-age expires header for fonts so that browsers cache fonts for longer. If you are building a progressive web application (PWA), you can use service workers to cache fonts and serve them directly from the cache.

To start building PWA using Vue, use the vue-cli tool to generate a new project:

Vue create pwa-app

Select the Manually select features option, and then select Progressive Web App (PWA) Support:

These are the only things we need to generate PWA templates. When you are done, you can change the directory to pwa-app and then serve app.

Cd pwa-app yarn serve

You will notice that there is a file registerServiceWorker in the src directory that contains the default configuration. Under the root directory of the project, if vue.config.js does not exist, create it, and if so, add the following:

/ / vue.config.js module.exports = {pwa: {workboxOptions: {skipWaiting: true, clientsClaim: true,}

The vue-cli tool uses PWA plugin to generate service worker. At the bottom, it uses Workbox to configure service worker and the elements it controls, the caching policy to use, and other necessary configurations.

In the code snippet above, we want to make sure that our application is always controlled by the latest version of service worker. This is necessary because it ensures that our users always view the latest version of the application. You can check out the Workbox configuration document to gain more control over the generated service worker behavior.

Next, we add the custom font to the public directory. I have the following structure:

Root/ public/ index.html fonts/ Roboto/ Roboto-Regular.woff Roboto-Regular.woff2

Once you have completed the development of the Vue application, you can build it by running the following command from the terminal:

Yarn build

This outputs the results to the dist folder. If you check the contents of the folder, you will notice something similar to

Precache-manifest.1234567890.js 's file. It contains a list of assets to cache, which is just a list of key-value pairs of revisions and URL.

Self.__precacheManifest = (self.__precacheManifest | | []) .concat ([{"revision": "3628b4ee5b153071e725", "url": "/ fonts/Roboto/Roboto-Regular.woff2"},...])

Everything in the public/ folder is cached by default, including custom fonts. With this place, you can use packages like service to serve your application, or host the dist folder on a web server to view the results. You can find a screenshot of the application below.

In subsequent access, fonts are loaded from the cache, which speeds up the loading time of the application.

Conclusion

In this article, we examined some best practices for loading fonts in Vue applications. Using these practices will ensure that the fonts you provide look good without affecting the performance of the application.

At this point, the study on "how to load fonts in Vue.js applications" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.