Webová písma jsou skvělý způsob, jak přidat vlastní písma na váš web. Tato písma nemusí být v systému uživatele k dispozici, takže je musíte zahrnout do svého projektu tak, že je budete hostovat nebo na ně odkazovat prostřednictvím sítě CDN.
Naučte se, jak zahrnout webová písma na web Next.js pomocí těchto dvou metod.
Používání písem s vlastním hostitelem v Next.js
Chcete-li do Next.js přidat písma s vlastním hostitelem, musíte to udělat použijte pravidlo CSS @font-face. Toto pravidlo vám umožňuje přidat na webovou stránku vlastní písma.
Před použitím font-face si musíte stáhnout fonty, které chcete použít. Je jich mnoho stránky na internetu, které nabízejí bezplatná písma, včetně písem Google, prostoru písem a webových stránek dafont.
Jakmile si stáhnete webová písma, převeďte je do různých formátů písem, aby podporovaly více prohlížečů. Můžeš použít bezplatné online nástroje pro převod písem udělat to tak. Moderní webové prohlížeče podporují formáty .woff a .woff2. Pokud potřebujete podporovat starší prohlížeče, měli byste poskytnout také formáty .eot a .ttf.
Vytvořte novou složku s názvem fonty v adresáři vašeho webu a uložte tam převedené soubory písem.
Dalším krokem je zahrnutí řezů písem do styles/global.css soubor, aby byly dostupné pro celý web. Tento příklad ukazuje řezy písma pro písmo mořské panny tučně:
@font-face {
rodina písem: 'Mořská panna';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') formát('embedded-opentype'),
url('Mermaid-Bold.woff2') formát('woff2'),
url('Mermaid-Bold.woff') formát('woff'),
url('Mermaid-Bold.ttf') formát('truetype');
váha písma: tučné;
styl písma: normální;
font-display: swap;
}
Jakmile zahrnete soubory písem, můžete tato písma použít v souboru CSS na úrovni komponenty:
h1 {
font-family: Mořská panna;
}Včetně webových písem do Next.js prostřednictvím CDN
Některé weby poskytují webová písma prostřednictvím CDN, které můžete importovat do své aplikace. Tento přístup je snadné nastavit, protože nemusíte stahovat písma ani vytvářet obličeje písem. Pokud navíc používáte fonty Google nebo TypeKit, Next.js se automaticky postará o optimalizaci.
Písma z CDN můžete přidat pomocí značky odkazu nebo pravidla @import uvnitř souboru CSS.
Značka odkazu se vždy nachází uvnitř značky head dokumentu HTML. Chcete-li přidat značku head do Next.js, musíte vytvořit vlastní dokument. Tento dokument upravuje tag head a body používaný k vykreslení každé stránky.
Začněte používat tuto funkci vlastního dokumentu vytvořením souboru /pages/_document.js.
Poté vložte odkaz na písmo do záhlaví souboru _document.js.
import Dokument, { Html, Head, Main, NextScript } z "další/dokument";
třídaMůj dokumentrozšiřujeDokument{
statickýasynchronní getInitialProps (ctx) {
konst initialProps = čekat Document.getInitialProps (ctx);
vrátit se { ...initialProps };
}
poskytnout() {
vrátit se (
<Html>
<Hlava>
<odkaz
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="šablona stylů"
/>
</Head>
<tělo>
<Hlavní />
<NextScript />
</body>
</Html>
);
}
}
vývoznívýchozí MůjDokument;Jak používat pravidlo @import k zahrnutí písem do projektu Next.js
Další možností je použít pravidlo @import v souboru CSS, ve kterém chcete písmo použít.
Například zpřístupněte písmo v celém projektu importem webového písma do styles/global.css soubor.
@importovat url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
Nyní můžete odkazovat na rodinu písem v a Selektor CSS takhle:
h1 {
rodina písem:'Libre Caslon Display', patka;
}Pravidlo @import vám umožňuje importovat písmo v obsaženém souboru CSS. Použití značky odkazu zpřístupní písmo na celém webu.
Měli byste hostovat písma lokálně nebo je importovat přes CDN?
Písma hostovaná místně jsou obvykle rychlejší než písma importovaná z CDN. Je to proto, že prohlížeč nemusí po načtení webové stránky provádět další požadavek na CDN písma.
Pokud chcete použít importovaná písma, načtěte je předem, abyste zlepšili výkon webu. Pokud jsou písma dostupná na Google fonts nebo Typekit, můžete je importovat a využívat optimalizační funkce Next.js.
