Comment charger efficacement des polices Google dans Nuxt avec différents poids de police ?

Chargement efficace des polices Google dans Nuxt

Problème :

Dans un projet NuxtJS, le L'utilisateur souhaite utiliser la police Saira Semi Condensed avec des épaisseurs de police différentes (600 et 800) pour deux composants différents. Cependant, l'importation de deux liens Google Font pour la même police avec des épaisseurs différentes entraîne une redondance et des problèmes potentiels avec l'application de l'épaisseur de police.

Solution :

L'approche recommandée est pour auto-héberger ou proxy les fichiers Google Font via l'origine de la page plutôt que d'utiliser un CDN. Nuxt fournit le module @nuxtjs/google-fonts qui permet un chargement efficace et personnalisable des polices Google. Voici comment l'utiliser :

nuxt.config.js :

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        // Other options here...
      },
    ],
  ],
}

Layout.vue (section Tête) :

<link rel="preload" href="/fonts/SairaSemiCondensed-wght@600.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/fonts/SairaSemiCondensed-wght@800.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Remarque : Remplacez /fonts par le chemin correct vers les fichiers de polices téléchargés.

ComponentA.vue ou ComponentB.vue (section Style) :

footer {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 600; /* or 800 for ComponentB */
}

Cette approche garantit que les épaisseurs de police spécifiques sont téléchargées et appliquées aux composants respectifs, éliminant ainsi le besoin de plusieurs liens CDN.

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!