So laden Sie Google-Schriftarten effizient in Nuxt
Bei der Arbeit mit NuxtJS ist es wichtig, die Best Practices zum Laden von Google-Schriftarten zu berücksichtigen, um dies sicherzustellen optimale Leistung. Sich auf ein CDN zu verlassen, ist nicht der empfohlene Ansatz, wie Vitaly Friedmans Leistungscheckliste 2021 hervorhebt. Stattdessen ist Selbsthosting oder Proxying über den Seitenursprung die bevorzugte Methode.
Eine sehr empfehlenswerte Option ist die Verwendung des @ nuxtjs/google-fonts-Modul, das eine praktische Lösung für die Integration von Google-Schriftarten in Ihre Nuxt-Projekte bietet. So können Sie es in Ihrer nuxt.config.js-Datei konfigurieren:
<code class="js">export default {
buildModules: [
[
'@nuxtjs/google-fonts',
{
families: {
Mali: {
wght: [400, 600, 700],
},
},
subsets: ['latin'],
display: 'swap',
prefetch: false,
preconnect: false,
preload: false,
download: true,
base64: false,
},
],
],
}</code>Diese Konfiguration übernimmt automatisch das Laden der Mali-Schriftfamilie mit verschiedenen Stärken und stellt so sicher, dass auf jedes Element die richtige Stärke angewendet wird in Ihren Vue-Komponenten.
Bitte beachten Sie, dass Sie bei Problemen mit bestimmten Gewichtungen, die nicht heruntergeladen werden, entweder die Overwriting-Eigenschaft in Ihrer Modulkonfiguration auf „true“ setzen oder Ihre Paketversion auf v3.0.0-1 aktualisieren können.
Das obige ist der detaillierte Inhalt vonWie können Sie Google-Schriftarten effizient in Ihr Nuxt-Projekt laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
