Comment charger efficacement des polices Google avec plusieurs poids dans un projet Nuxt ?

Chargement efficace des polices Google dans Nuxt

Vous rencontrez des problèmes pour appliquer différentes épaisseurs de police à vos polices Google dans un projet Nuxt. Le problème vient de l'importation de plusieurs liens de police pour la même police avec des poids différents, ce qui introduit une redondance.

Recommandation :

La solution optimale est d'éviter d'utiliser un CDN pour chargement des polices. L'auto-hébergement ou le proxy des polices Google via l'origine de la page est une approche plus efficace. Pour faciliter cela, pensez à utiliser le module @nuxtjs/google-fonts.

Configuration du module :

Dans votre fichier nuxt.config.js, ajoutez le code suivant :

<code class="js">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        subsets: ['latin'],
        display: 'swap',
      },
    ],
  ]
}</code>

Cette configuration spécifie que les deux épaisseurs de police (600 et 800) doivent être chargées pour la famille de polices « Saira Semi Condensed ».

Configuration CSS :

Dans votre Layout.vue, importez la famille de polices une fois :

<code class="css">@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed');</code>

Assurez-vous également d'ajouter des règles CSS pour appliquer les épaisseurs de police spécifiques dans les composants respectifs :

ComponentA.vue :

<code class="css">footer {
  font-weight: 600;
}</code>

ComponentB.vue :

<code class="css">footer {
  font-weight: 800;
}</code>

Remarque :

Si des épaisseurs de police spécifiques ne parviennent pas à être téléchargées, mettez à jour le package @nuxtjs/google-fonts vers la version v3.0.0-1 ou définissez overwriting: true dans la configuration du module.

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!