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.
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.
Vytvorte nový priečinok s názvom fonty 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 {
rodina písiem: 'Morská panna';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') formát ('embedded-opentype'),
url('Morská panna-Bold.woff2') formát ('woff2'),
url('Morská panna-Bold.woff') formát ('woff'),
url('Mermaid-Bold.ttf') formát ('truetype');
font-weight: bold;
štýl písma: normálny;
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: Morská panna;
}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.
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.
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.
importovať Document, { Html, Head, Main, NextScript } od "Ďalšie/dokument";
triedaMyDocumentpredlžujeDokument{
statickéasync getInitialProps (ctx) {
konšt počiatočné rekvizity = čakať Document.getInitialProps (ctx);
vrátiť { ...InitialProps };
}
render() {
vrátiť (
<Html>
<Hlava>
<odkaz
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="štýlov"
/>
</Head>
<telo>
<Hlavná />
<NextScript />
</body>
</Html>
);
}
}
exportpredvolená 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 {
rodina písiem:'Displej Libre Caslon', pätka;
}Pravidlo @import vám umožňuje importovať písmo v obsiahnutom súbore CSS. Použitím značky odkazu je písmo dostupné na celom webe.
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.
