Verkkokirjasimet ovat loistava tapa lisätä mukautettuja kirjasimia verkkosivustollesi. Nämä kirjasimet eivät välttämättä ole saatavilla käyttäjän järjestelmässä, joten sinun on sisällytettävä ne projektiisi isännöimällä niitä tai viittaamalla niihin CDN: n kautta.
Opi lisäämään verkkokirjasimia Next.js-verkkosivustoon näillä kahdella menetelmällä.
Itseisännöityjen fonttien käyttäminen Next.js: ssä
Jos haluat lisätä itse isännöityjä kirjasimia Next.js: ään, sinun on tehtävä se käytä @font-face CSS-sääntöä. Tämän säännön avulla voit lisätä mukautettuja kirjasimia verkkosivulle.
Ennen font-facen käyttöä sinun on ladattava fontit, joita haluat käyttää. On olemassa monia Internetin sivustot, jotka tarjoavat ilmaisia fontteja, mukaan lukien Google-fontit, fontspace- ja dafont-sivustot.
Kun olet ladannut verkkofontit, muunna ne eri kirjasinmuotoihin tukemaan useita selaimia. Voit käyttää ilmaiset online-kirjasinten muunnostyökalut tehdä niin. Nykyaikaiset verkkoselaimet tukevat .woff- ja .woff2-muotoja. Jos haluat tukea vanhoja selaimia, sinun tulee tarjota myös .eot- ja .ttf-muotoja.
Luo uusi kansio nimeltä fontit sivustosi hakemistoon ja tallenna muunnetut kirjasintiedostot sinne.
Seuraava vaihe on sisällyttää kirjasinpinnat styles/global.css tiedostoa, jotta ne ovat käytettävissä koko verkkosivustolla. Tässä esimerkissä Mermaid-kirjasimen kirjasinpinnat näkyvät lihavoituna:
@font-face {
font-family: 'Merenneito';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') muoto('upotettu-avointyyppi'),
url('Mermaid-Bold.woff2') muoto('woff2'),
url('Mermaid-Bold.woff') muoto('woff'),
url('Mermaid-Bold.ttf') muoto('tosityyppi');
fontin paino: lihavoitu;
font-tyyli: normaali;
fontin näyttö: swap;
}
Kun olet sisällyttänyt kirjasintiedostot, voit käyttää niitä komponenttitason CSS-tiedostossa:
h1 {
kirjasinperhe: Merenneito;
}Web-fontit sisällytetään Next.js-tiedostoon CDN: n kautta
Jotkut verkkosivustot tarjoavat verkkofontteja CDN: n kautta, jonka voit tuoda sovellukseesi. Tämä lähestymistapa on helppo ottaa käyttöön, koska sinun ei tarvitse ladata kirjasimia tai luoda fontteja. Lisäksi, jos käytät Google-fontteja tai TypeKitiä, Next.js hoitaa optimoinnin automaattisesti.
Voit lisätä fontteja CDN: stä käyttämällä CSS-tiedoston sisällä olevaa linkkitunnistetta tai @import-sääntöä.
Linkkitunniste menee aina HTML-dokumentin head-tunnisteen sisään. Jos haluat lisätä head-tunnisteen Next.js-tiedostoon, sinun on luotava mukautettu asiakirja. Tämä asiakirja muuttaa kunkin sivun hahmontamiseen käytettyä head- ja body-tunnistetta.
Aloita tämän mukautetun asiakirjaominaisuuden käyttäminen luomalla tiedosto /pages/_document.js.
Lisää sitten linkki fonttiin _document.js-tiedoston päähän.
tuonti Asiakirja, { Html, Head, Main, NextScript } alkaen "Seuraava/asiakirja";
luokkaaMyDocumentulottuuAsiakirja{
staattinenasynk getInitialProps (ctx) {
konst originalProps = odottaa Document.getInitialProps (ctx);
palata { ...initialProps };
}
render() {
palata (
<HTML>
<Pää>
<linkki
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&näyttö=vaihto"
rel="tyylisivu"
/>
</Head>
<kehon>
<Pää/>
<NextScript />
</body>
</Html>
);
}
}
viedäoletuksena MyDocument;@import-säännön käyttäminen kirjasimien sisällyttämiseen Next.js-projektiin
Toinen vaihtoehto on käyttää @import-sääntöä CSS-tiedostossa, jonka fonttia haluat käyttää.
Voit esimerkiksi asettaa fontin saataville koko projektissa tuomalla verkkokirjasimen hakemistoon styles/global.css tiedosto.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&näyttö=vaihto');
Voit nyt viitata kirjasinperheeseen kohdassa a CSS-valitsin kuten tämä:
h1 {
font-family:'Ilmainen Caslon-näyttö', serif;
}@import-säännön avulla voit tuoda kirjasimen CSS-tiedostoon. Linkkitunnisteen avulla fontti on käytettävissä koko sivustolla.
Pitäisikö sinun isännöidä fontteja paikallisesti vai tuoda ne CDN: n kautta?
Paikallisesti isännöidyt fontit ovat yleensä nopeampia kuin CDN: stä tuodut kirjasimet. Tämä johtuu siitä, että selaimen ei tarvitse tehdä lisäpyyntöä fontin CDN: lle, kun verkkosivu on latautunut.
Jos haluat käyttää tuotuja kirjasimia, esilataa ne parantaaksesi sivuston suorituskykyä. Jos fontit ovat saatavilla Google-fonteissa tai Typekitissä, voit tuoda ne ja hyödyntää Next.js: n optimointiominaisuuksia.