A webes betűtípusok nagyszerű módja annak, hogy egyéni betűtípusokat adjon webhelyéhez. Előfordulhat, hogy ezek a betűtípusok nem érhetők el a felhasználó rendszerén, ezért be kell őket foglalnia a projektbe úgy, hogy tárolja őket, vagy hivatkozzon rájuk egy CDN-en keresztül.
Ismerje meg, hogyan lehet webes betűtípusokat beilleszteni egy Next.js webhelyre e két módszer segítségével.
Saját tárolt betűtípusok használata a Next.js-ben
Saját tárolt betűtípusok hozzáadásához a Next.js-ben meg kell tennie használja a @font-face CSS-szabályt. Ez a szabály lehetővé teszi egyéni betűtípusok hozzáadását egy weboldalhoz.
A font-face használata előtt le kell töltenie a használni kívánt betűtípusokat. Sokan vannak ingyenes betűtípusokat kínáló webhelyek az interneten, beleértve a Google fontokat, fontspace-t és dafont webhelyeket.
Miután letöltötte a webes betűtípusokat, konvertálja azokat különböző betűtípusokká, hogy több böngészőt támogasson. Te tudod használni ingyenes online font konvertáló eszközök
hogy ezt tegye. A modern webböngészők támogatják a .woff és a .woff2 formátumokat. Ha támogatnia kell a régebbi böngészőket, akkor .eot és .ttf formátumot is meg kell adnia.Hozzon létre egy új mappát, melynek neve betűtípusok a webhely könyvtárába, és mentse oda az átalakított betűtípus-fájlokat.
A következő lépés a betűtípusok beépítése a styles/global.css fájlt, hogy azok elérhetőek legyenek a teljes webhely számára. Ez a példa a Mermaid betűtípus betűtípusait félkövérrel mutatja:
@font-face {
betűtípus család: 'Sellő';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') formátum('beágyazott-nyitott típus'),
url('Mermaid-Bold.woff2') formátum('woff2'),
url('Mermaid-Bold.woff') formátum('woff'),
url('Mermaid-Bold.ttf') formátum('igaztípus');
betűsúly: félkövér;
betűstílus: normál;
font-megjelenítés: csere;
}
Miután felvette a betűtípusfájlokat, használhatja azokat egy összetevő szintű CSS-fájlban:
h1 {
font-család: Sellő;
}Webes betűtípusok hozzáadása a Next.js-hez CDN-en keresztül
Egyes webhelyek webbetűkészleteket szolgálnak ki az alkalmazásba importálható CDN-en keresztül. Ezt a megközelítést könnyű beállítani, mert nincs szükség betűtípusok letöltésére vagy betűtípusok létrehozására. Ezenkívül, ha Google betűtípusokat vagy TypeKit-et használ, a Next.js automatikusan elvégzi az optimalizálást.
Betűtípusokat adhat hozzá CDN-ből a linkcímke vagy a CSS-fájlon belüli @import szabály segítségével.
A link címke mindig a HTML-dokumentum head címkéjébe kerül. Head címke hozzáadásához a Next.js-ben létre kell hoznia egy egyéni dokumentumot. Ez a dokumentum módosítja az egyes oldalak megjelenítéséhez használt head és body címkét.
Kezdje el használni ezt az egyéni dokumentum funkciót a fájl létrehozásával /pages/_document.js.
Ezután írja be a betűtípusra mutató hivatkozást a _document.js fájl fejlécébe.
import Dokumentum, { Html, Head, Main, NextScript } tól től "következő/dokumentum";
osztályMyDocumentkiterjedDokumentum{
statikusasync getInitialProps (ctx) {
const kezdetiProps = várja Document.getInitialProps (ctx);
Visszatérés { ...initialProps };
}
Vakol() {
Visszatérés (
<HTML>
<Fej>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="stíluslap"
/>
</Head>
<test>
<Fő />
<NextScript />
</body>
</Html>
);
}
}
exportalapértelmezett MyDocument;Az @import szabály használata betűtípusok beépítésére a Next.js projektbe
Egy másik lehetőség az @import szabály használata abban a CSS-fájlban, amelyben használni szeretné a betűtípust.
Például tegye elérhetővé a betűtípust a teljes projektben úgy, hogy importálja a webes betűtípust a styles/global.css fájlt.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
Most már hivatkozhat a betűtípuscsaládra a CSS-választó mint ez:
h1 {
betűtípus család:'Ingyenes Caslon kijelző', serif;
}Az @import szabály lehetővé teszi egy betűtípus importálását egy tartalmazott CSS-fájlba. A linkcímke használatával a betűtípus elérhető az egész webhelyen.
Helyben tárolja a betűtípusokat, vagy importálja őket CDN-en keresztül?
A helyben tárolt betűtípusok általában gyorsabbak, mint a CDN-ből importált betűtípusok. Ennek az az oka, hogy a böngészőnek nem kell további kérést intéznie a font CDN-hez, miután a weboldal betöltődött.
Ha importált betűtípusokat szeretne használni, töltse be őket előre a webhely teljesítményének javítása érdekében. Ha a betűtípusok elérhetők a Google fontokban vagy a Typekitben, importálhatja őket, és kihasználhatja a Next.js optimalizálási funkcióit.
