Comment charger efficacement les polices Google dans Nuxt.js ?

Meilleur moyen de charger efficacement des polices Google dans Nuxt

Lorsque vous travaillez avec plusieurs composants nécessitant des épaisseurs de police différentes à partir de la même police Google, il est Il est important d'éviter la pratique redondante consistant à importer plusieurs liens dans Layout.vue.

Pour résoudre ce problème et optimiser le chargement des polices dans les projets NuxtJS, il est recommandé d'utiliser le module @nuxtjs/google-fonts. Ce module offre une approche efficace et centralisée pour gérer les importations de polices Google.

Utilisation du module @nuxtjs/google-fonts

1. Installez le module :

npm install @nuxtjs/google-fonts

2. Ajoutez le module à votre fichier nuxt.config.js :

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        display: 'swap', // Load fonts as soon as possible
        prefetch: false, // Don't prefetch fonts
        preconnect: false, // Don't preconnect to font server
        preload: false, // Don't preload fonts
        download: true, // Download fonts for offline use
        base64: false, // Don't base64 encode fonts
      },
    ],
  ],
}

3. Importez les polices dans le style de votre composant à l'aide de la @font -face règle :

@font-face {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 600;
  font-style: normal;
  src: local('Saira Semi Condensed'), local('SairaSemiCondensed-Wght600'),
  url("https://fonts.gstatic.com/s/sairasemicondensed/v15/E6qS90ZBdhyxr0K917oteYGc.woff2") format('woff2');
}

Remarques supplémentaires :

• Si des épaisseurs de police spécifiques ne sont pas téléchargées, définissez l'écrasement : vrai dans le module configuration ou mettez à jour le package vers la v3.0.0-1.
• L'auto-hébergement de Google Fonts est généralement préférable à l'utilisation d'un CDN pour l'optimisation des performances. Pensez à utiliser google-webfonts-helper pour l'auto-hébergement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!