Web-fonttien lisääminen Next.js-verkkosivustoon

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

PÄIVÄN VIDEON TEKEMINEN

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.

lähettää ilmaisia tekstiviestejä matkapuhelimeen

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: '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; 
}

Kun olet sisällyttänyt kirjasintiedostot, voit käyttää niitä komponenttitason CSS-tiedostossa:

h1 { 
    font-family: Mermaid; 
}

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öä.

Fonttien tuominen Next.js-projektiin linkkitunnisteen avulla

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.

miksi pelini kaatuvat jatkuvasti

Aloita tämän mukautetun asiakirjaominaisuuden käyttäminen luomalla tiedosto /pages/_document.js.

Lisää sitten linkki fonttiin _document.js-tiedoston päähän.

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;

@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&display=swap');

Voit nyt viitata kirjasinperheeseen kohdassa a CSS-valitsin kuten tämä:

h1 { 
    font-family:'Libre Caslon Display', 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.

hiiren osoitin ei toimi windows 10

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.