Comment charger efficacement des polices Google avec différents poids dans NuxtJS ?

Comment charger efficacement les polices Google dans Nuxt

Énoncé du problème

Vous rencontrez des difficultés pour charger des polices Google avec des épaisseurs de police différentes dans une application NuxtJS . Vous avez importé plusieurs liens pour la même police avec des épaisseurs différentes, mais seule la police de base s'applique, ce qui entraîne un manque de personnalisation de l'épaisseur de police souhaitée.

Solution

L'approche recommandée pour charger Google les polices dans Nuxt est d'éviter d'utiliser un CDN et d'auto-héberger les polices ou de les proxy via l'origine de votre page. Pour ce faire, envisagez d'utiliser le module @nuxtjs/google-fonts, qui fournit une solution simple pour l'auto-hébergement des polices Google.

Configuration du module Nuxt (nuxt.config.js)

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

Cette configuration téléchargera les épaisseurs de police 600 et 800 de la famille de polices 'Saira Semi Condensed' et les rendra disponibles pour une utilisation dans l'application.

Utilisation CSS

Une fois les polices sont téléchargés, vous pouvez les référencer dans votre CSS en utilisant la règle @font-face.

<code class="css">@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Regular.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Regular.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Regular.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Bold.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Bold.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Bold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}</code>

Remplacez /fonts par le répertoire dans lequel vous avez téléchargé les fichiers de polices.

Utilisation dans les composants

Dans vos composants Vue, vous pouvez définir les propriétés font-family et font-weight pour appliquer la police souhaitée :

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 600;">I am Component A</h1>
</template></code>

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 800;">I am Component B</h1>
</template></code>

En suivant ces étapes, vous pouvez charger et personnalisez les polices Google avec différentes épaisseurs de police dans votre application NuxtJS.

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!