Tīmekļa fonti ir lielisks veids, kā savai vietnei pievienot pielāgotus fontus. Šie fonti var nebūt pieejami lietotāja sistēmā, tāpēc tie ir jāiekļauj savā projektā, mitinot tos vai atsaucoties uz tiem, izmantojot CDN.
Uzziniet, kā iekļaut tīmekļa fontus Next.js vietnē, izmantojot šīs divas metodes.
Pašmitināto fontu izmantošana vietnē Next.js
Lai vietnē Next.js pievienotu pašmitinātus fontus, tas ir nepieciešams izmantojiet @font-face CSS kārtulu. Šis noteikums ļauj tīmekļa lapai pievienot pielāgotus fontus.
Pirms font-face izmantošanas jums ir jālejupielādē fonti, kurus vēlaties izmantot. Tur ir daudz vietnes internetā, kas piedāvā bezmaksas fontus, tostarp Google fontus, fontspace un dafont vietnes.
Kad esat lejupielādējis tīmekļa fontus, konvertējiet tos dažādos fontu formātos, lai atbalstītu vairākas pārlūkprogrammas. Tu vari izmantot bezmaksas tiešsaistes fontu konvertēšanas rīki darīt tā. Mūsdienu tīmekļa pārlūkprogrammas atbalsta .woff un .woff2 formātus. Ja nepieciešams atbalstīt mantotās pārlūkprogrammas, nodrošiniet arī .eot un .ttf formātus.
Izveidojiet jaunu mapi ar nosaukumu fonti savas vietnes direktorijā un saglabājiet konvertētos fontu failus tur.
Nākamais solis ir iekļaut fontu sejas styles/global.css failu, lai tie būtu pieejami visai vietnei. Šajā piemērā ir parādītas sirēna fonta fontu sejas treknrakstā:
@font-face {
fontu ģimene: 'Nāriņa';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') formāts ('iegultais-opentype'),
url('Mermaid-Bold.woff2') formāts ('woff2'),
url('Mermaid-Bold.woff') formāts ('woff'),
url('Mermaid-Bold.ttf') formāts ('patiesaistips');
fonta svars: treknrakstā;
fonta stils: normāls;
fontu displejs: maiņa;
}
Kad esat iekļāvis fontu failus, varat izmantot šos fontus komponenta līmeņa CSS failā.
h1 {
fontu saime: Mermaid;
}Ieskaitot tīmekļa fontus uz Next.js, izmantojot CDN
Dažas vietnes piedāvā tīmekļa fontus, izmantojot CDN, ko varat importēt savā lietotnē. Šo pieeju ir viegli iestatīt, jo jums nav jālejupielādē fonti vai jāizveido fontu sejas. Turklāt, ja izmantojat Google fontus vai TypeKit, Next.js automātiski veic optimizāciju.
Varat pievienot fontus no CDN, izmantojot saites tagu vai @import kārtulu CSS failā.
Saites tags vienmēr atrodas HTML dokumenta tagā head. Lai vietnē Next.js pievienotu head tagu, jums ir jāizveido pielāgots dokuments. Šis dokuments maina katras lapas renderēšanai izmantoto head un body tagu.
Sāciet izmantot šo pielāgotā dokumenta līdzekli, izveidojot failu /pages/_document.js.
Pēc tam faila _document.js galvenē iekļaujiet saiti uz fontu.
imports Dokuments, { Html, Head, Main, NextScript } no "Nākamais/dokumentu";
klasēMansDokumentspagarinaDokuments{
statisksasinhrons getInitialProps (ctx) {
konst SākotnējaisProps = gaidīt Document.getInitialProps (ctx);
atgriezties { ...initialProps };
}
render() {
atgriezties (
<HTML>
<Galva>
<saite
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&displejs=swap"
rel="stila lapa"
/>
</Head>
<ķermeni>
<Galvenā />
<NextScript />
</body>
</Html>
);
}
}
eksportētnoklusējuma MyDocument;Kā izmantot @import kārtulu, lai iekļautu fontus Next.js projektā
Vēl viena iespēja ir izmantot @import kārtulu CSS failā, kurā vēlaties izmantot fontu.
Piemēram, padariet fontu pieejamu visā projektā, importējot tīmekļa fontu mapē styles/global.css failu.
@importēt url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&displejs=swap');
Tagad varat atsaukties uz fontu saimi sadaļā a CSS atlasītājs kā šis:
h1 {
fontu ģimene:'Bezmaksas Caslon displejs', serifs;
}@import kārtula ļauj importēt fontu ietvertā CSS failā. Izmantojot saites tagu, fonts ir pieejams visā vietnē.
Vai jums vajadzētu mitināt fontus lokāli vai importēt tos, izmantojot CDN?
Lokāli mitinātie fonti parasti ir ātrāki nekā no CDN importētie fonti. Tas ir tāpēc, ka pēc tīmekļa lapas ielādes pārlūkprogrammai nav jāveic papildu pieprasījums fonta CDN.
Ja vēlaties izmantot importētos fontus, iepriekš ielādējiet tos, lai uzlabotu vietnes veiktspēju. Ja fonti ir pieejami pakalpojumā Google fonti vai Typekit, varat tos importēt un izmantot Next.js optimizācijas funkcijas.