Kā pievienot tīmekļa fontus vietnei Next.js

Kā pievienot tīmekļa fontus vietnei Next.js

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.





DIENAS VIDEO MAKEUSEOF

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 tā darī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 { 
font-family: 'Mermaid';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
url('Mermaid-Bold.woff2') format('woff2'),
url('Mermaid-Bold.woff') format('woff'),
url('Mermaid-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}

Kad esat iekļāvis fontu failus, varat izmantot šos fontus komponenta līmeņa CSS failā.

h1 { 
font-family: 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.

kā mainīt iTunes dublējuma atrašanās vietu
import Document, { Html, Head, Main, NextScript } from "next/document"; 
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default 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 url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap'); 

Tagad varat atsaukties uz fontu saimi sadaļā a CSS atlasītājs kā šis:

h1 { 
font-family:'Libre Caslon Display', serif;
}

@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.