Ako pridať webové písma na webovú stránku Next.js

Webové písma sú skvelým spôsobom, ako pridať vlastné písma na váš web. Tieto písma nemusia byť dostupné v systéme používateľa, takže ich musíte zahrnúť do svojho projektu tak, že ich budete hostiť alebo na ne odkazovať prostredníctvom siete CDN.

Naučte sa, ako zahrnúť webové písma na webovú lokalitu Next.js pomocou týchto dvoch metód.

VYUŽITIE VIDEA DŇA

Používanie písiem s vlastným hosťovaním v súbore Next.js

Ak chcete do Next.js pridať písma s vlastným hosťovaním, musíte to urobiť použite pravidlo CSS @font-face . Toto pravidlo vám umožňuje pridať na webovú stránku vlastné písma.

Pred použitím font-face si musíte stiahnuť fonty, ktoré chcete použiť. Je ich veľa stránky na internete, ktoré ponúkajú bezplatné písma , vrátane písiem Google, priestoru písiem a webových stránok dafont.

Po stiahnutí webových písiem ich preveďte do rôznych formátov písiem, aby podporovali viacero prehliadačov. Môžeš použiť bezplatné online nástroje na konverziu fontov urobiť tak. Moderné webové prehliadače podporujú formáty .woff a .woff2. Ak potrebujete podporovať staršie prehliadače, mali by ste poskytnúť aj formáty .eot a .ttf.

zoznamky pre 18 -ročných

Vytvorte nový priečinok s názvom písma v adresári vašej lokality a uložte si tam konvertované súbory s písmom.

Ďalším krokom je zahrnutie písma do styles/global.css aby boli dostupné pre celú webovú stránku. Tento príklad zobrazuje písma pre písmo morskej panny tučným písmom:

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

Po zahrnutí súborov písiem môžete tieto písma použiť v súbore CSS na úrovni komponentov:

h1 { 
    font-family: Mermaid; 
}

Vrátane webových písiem do Next.js cez CDN

Niektoré webové stránky poskytujú webové písma prostredníctvom siete CDN, ktorú môžete importovať do svojej aplikácie. Tento prístup sa ľahko nastavuje, pretože nemusíte sťahovať písma ani vytvárať písma. Navyše, ak používate Google fonty alebo TypeKit, Next.js automaticky zvládne optimalizáciu.

Písma z CDN môžete pridať pomocou značky odkazu alebo pravidla @import v súbore CSS.

Ako importovať písma do projektu Next.js pomocou značky odkazu

Značka odkazu sa vždy nachádza v značke head dokumentu HTML. Ak chcete pridať značku head do Next.js, musíte vytvoriť vlastný dokument. Tento dokument upravuje značku hlavy a tela používanú na vykreslenie každej stránky.

USB zariadenie stále odpojuje a znova pripája Windows 10

Začnite používať túto funkciu vlastného dokumentu vytvorením súboru /pages/_document.js.

Potom do hlavičky súboru _document.js zahrňte odkaz na písmo.

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;

Ako používať pravidlo @import na zahrnutie písiem do projektu Next.js

Ďalšou možnosťou je použiť pravidlo @import v súbore CSS, v ktorom chcete písmo použiť.

Napríklad sprístupnite písmo v celom projekte importovaním webového písma do styles/global.css súbor.

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

Teraz môžete odkazovať na rodinu písiem v a Selektor CSS Páči sa ti to:

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

Pravidlo @import vám umožňuje importovať písmo v obsiahnutom súbore CSS. Použitie značky odkazu sprístupní písmo na celej stránke.

Mali by ste hostiť písma lokálne alebo ich importovať cez CDN?

Písma hosťované lokálne sú zvyčajne rýchlejšie ako písma importované z CDN. Je to preto, že prehliadač nemusí po načítaní webovej stránky zadávať ďalšiu požiadavku na CDN písma.

Ak chcete použiť importované písma, vopred ich načítajte, aby ste zlepšili výkon stránky. Ak sú fonty dostupné na Google fonts alebo Typekit, môžete ich importovať a využiť optimalizačné funkcie Next.js.