Kako dodati spletne pisave na spletno mesto Next.js

Kako dodati spletne pisave na spletno mesto Next.js

Spletne pisave so odličen način za dodajanje pisav po meri na vaše spletno mesto. Te pisave morda niso na voljo v uporabnikovem sistemu, zato jih morate vključiti v svoj projekt tako, da jih gostite ali jih navedete prek CDN.





Naučite se vključiti spletne pisave v spletno mesto Next.js z uporabo teh dveh metod.



MAKEUSEOF VIDEO DNEVA

Uporaba samostojnih pisav v Next.js

Če želite v Next.js dodati samogostiteljske pisave, morate uporabite pravilo CSS @font-face . To pravilo vam omogoča dodajanje pisav po meri na spletno stran.





Preden uporabite font-face, morate prenesti pisave, ki jih želite uporabiti. Veliko jih je spletna mesta na internetu, ki ponujajo brezplačne pisave , vključno s spletnimi mesti Google fonts, fontspace in dafont.

Ko prenesete spletne pisave, jih pretvorite v različne oblike pisav za podporo več brskalnikov. Lahko uporabiš brezplačna spletna orodja za pretvorbo pisav narediti tako. Sodobni spletni brskalniki podpirajo formata .woff in .woff2. Če morate podpirati podedovane brskalnike, zagotovite tudi formata .eot in .ttf.



Ustvarite novo mapo z imenom pisave v imenik svojega spletnega mesta in tja shranite svoje pretvorjene datoteke s pisavami.

Naslednji korak je vključitev obrazov pisave v styles/global.css datoteko, da bodo na voljo celotnemu spletnemu mestu. Ta primer prikazuje obraze pisave za pisavo sirene v krepkem tisku:



@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; 
}

Ko vključite datoteke s pisavami, jih lahko uporabite v datoteki CSS na ravni komponente:

h1 { 
    font-family: Mermaid; 
}

Vključitev spletnih pisav v Next.js prek CDN

Nekatera spletna mesta ponujajo spletne pisave prek CDN, ki jih lahko uvozite v svojo aplikacijo. Ta pristop je enostaven za nastavitev, ker vam ni treba prenesti pisav ali ustvariti obrazov pisav. Poleg tega, če uporabljate Googlove pisave ali TypeKit, Next.js samodejno obravnava optimizacijo.



Dodate lahko pisave iz CDN z uporabo oznake povezave ali pravila @import znotraj datoteke CSS.

Oznaka povezave je vedno znotraj oznake glave dokumenta HTML. Če želite v Next.js dodati oznako head, morate ustvariti dokument po meri. Ta dokument spreminja oznako glave in telesa, ki se uporabljata za upodabljanje vsake strani.

Začnite uporabljati to funkcijo dokumenta po meri tako, da ustvarite datoteko /pages/_document.js.

Nato vključite povezavo do pisave v glavo datoteke _document.js.

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;

Kako uporabiti pravilo @import za vključitev pisav v projekt Next.js

Druga možnost je uporaba pravila @import v datoteki CSS, v kateri želite uporabiti pisavo.

Na primer, naredite pisavo na voljo v celotnem projektu tako, da uvozite spletno pisavo v styles/global.css mapa.

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

Zdaj se lahko sklicujete na družino pisav v a Izbirnik CSS Všečkaj to:

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

Pravilo @import vam omogoča uvoz pisave v vsebovano datoteko CSS. Z uporabo oznake povezave je pisava dostopna na celotnem spletnem mestu.

Bi morali pisave gostiti lokalno ali jih uvoziti prek CDN?

Pisave, ki gostujejo lokalno, so običajno hitrejše od pisav, uvoženih iz CDN. To je zato, ker brskalniku ni treba narediti dodatne zahteve CDN pisave, ko se spletna stran naloži.

zakaj moje sporočilo ne prinaša

Če želite uporabiti uvožene pisave, jih vnaprej naložite, da izboljšate delovanje spletnega mesta. Če so pisave na voljo v storitvi Google fonts ali Typekit, jih lahko uvozite in izkoristite funkcije optimizacije Next.js.