Veebifondid on suurepärane viis oma veebisaidile kohandatud fontide lisamiseks. Need fondid ei pruugi kasutaja süsteemis saadaval olla, seega peate need oma projekti kaasama, majutades neid või viidates neile CDN-i kaudu.
Siit saate teada, kuidas neid kahte meetodit kasutades lisada Next.js veebisaidile veebifonte.
Isehostitud fontide kasutamine rakenduses Next.js
Isehostitud fontide lisamiseks rakenduses Next.js peate seda tegema kasutage @font-face CSS-reeglit. See reegel võimaldab teil lisada veebilehele kohandatud fonte.
Enne font-face kasutamist peate alla laadima fondid, mida soovite kasutada. Seal on palju tasuta fonte pakkuvad saidid Internetis, sealhulgas Google'i fonte, fondiruumi ja dafonti veebisaite.
Kui olete veebifondid alla laadinud, teisendage need erinevateks fondivorminguteks, et toetada mitut brauserit. Sa võid kasutada tasuta veebipõhised fontide teisendamise tööriistad seda teha. Kaasaegsed veebibrauserid toetavad vorminguid .woff ja .woff2. Kui teil on vaja toetada pärandbrausereid, peaksite esitama ka .eot- ja .ttf-vormingud.
Looge uus kaust nimega fonte oma saidi kataloogi ja salvestage sinna oma teisendatud fondifailid.
Järgmine samm on lisada fondi näod styles/global.css faili, et muuta need kättesaadavaks kogu veebisaidile. See näide näitab merineitsi fondi fondinähte paksus kirjas:
@font-nägu {
font-perekond: 'Merineitsi';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') vorming ('manustatud-avatud tüüp'),
url('Merineitsi-Bold.woff2') vorming ('woff2'),
url('Merineitsi-Bold.woff') vorming ('woff'),
url('Merineitsi-Bold.ttf') vorming ('tõsitüüp');
fondi kaal: paks;
fondi stiil: tavaline;
font-kuva: vahetus;
}
Kui olete fondifailid kaasanud, saate neid fonte kasutada komponenditaseme CSS-failis.
h1 {
fondiperekond: Merineitsi;
}Kaasake Web Fonts faili Next.js CDN-i kaudu
Mõned veebisaidid teenindavad veebifonte CDN-i kaudu, mille saate oma rakendusse importida. Seda lähenemist on lihtne seadistada, kuna te ei pea fonte alla laadima ega fondi nägusid looma. Lisaks, kui kasutate Google'i fonte või TypeKiti, tegeleb Next.js optimeerimisega automaatselt.
Saate CDN-ist fonte lisada, kasutades lingimärgendit või reeglit @import CSS-failis.
Lingimärgend läheb alati HTML-dokumendi peasildi sisse. Pea märgendi lisamiseks rakenduses Next.js peate looma kohandatud dokumendi. See dokument muudab iga lehe renderdamiseks kasutatavat head ja body silti.
Alustage selle kohandatud dokumendifunktsiooni kasutamist, luues faili /pages/_document.js.
Seejärel lisage fondi link faili _document.js päisesse.
importida Dokument, { Html, Head, Main, NextScript } alates "järgmine/dokument";
klassMinuDokumentulatubDokument{
staatilineasünkr getInitialProps (ctx) {
konst esialgsed rekvisiidid = ootama Document.getInitialProps (ctx);
tagasi { ...initialProps };
}
render() {
tagasi (
<HTML>
<Pea>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&kuva=vahetus"
rel="stiilileht"
/>
</Head>
<keha>
<Peamine />
<NextScript />
</body>
</Html>
);
}
}
eksportidavaikimisi MyDocument;Kuidas kasutada @import reeglit fontide kaasamiseks Next.js projekti
Teine võimalus on kasutada reeglit @import CSS-failis, mille fonti soovite kasutada.
Näiteks muutke font kättesaadavaks kogu projekti ulatuses, importides veebifondi faili styles/global.css faili.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&kuva=vahetus');
Nüüd saate viidata fondiperele jaotises a CSS-i valija nagu nii:
h1 {
font-perekond:'Tasuta Casloni ekraan', serif;
}@import-reegel võimaldab importida fondi sisalduvasse CSS-faili. Lingimärgendi kasutamine muudab fondi juurdepääsetavaks kogu saidil.
Kas peaksite fonte hostima kohapeal või importima need CDN-i kaudu?
Lokaalselt hostitud fondid on tavaliselt kiiremad kui CDN-ist imporditud fondid. Seda seetõttu, et brauser ei pea pärast veebilehe laadimist fondi CDN-ile lisapäringut esitama.
Kui soovite kasutada imporditud fonte, laadige need saidi toimivuse parandamiseks eellaadimiseks. Kui fondid on Google'i fontides või Typekitis saadaval, saate need importida ja kasutada Next.js'i optimeerimisfunktsioone.
