Webes betűtípusok hozzáadása Next.js webhelyhez

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.

MAKEUSEOF A NAP VIDEÓJA

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.

nem törölhető, mert a fájl használatban van

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

Miután felvette a betűtípusfájlokat, használhatja azokat egy összetevő szintű CSS-fájlban:

h1 { 
    font-family: Mermaid; 
}

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.

Betűtípusok importálása Next.js projektbe linkcímke használatával

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.

miért ilyen hangos a rajongóm

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

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.

csatlakozik, de nincs internet -hozzáférés Windows 7

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 { 
    font-family:'Libre Caslon Display', 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-n 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.