Žiniatinklio šriftai yra puikus būdas įtraukti tinkintus šriftus į savo svetainę. Šie šriftai gali būti nepasiekiami vartotojo sistemoje, todėl turite įtraukti juos į savo projektą priglobdami juos arba nurodydami juos per CDN.
Sužinokite, kaip įtraukti žiniatinklio šriftus į Next.js svetainę naudodami šiuos du metodus.
Savarankiškai priglobtų šriftų naudojimas programoje Next.js
Norėdami pridėti savarankiškai priglobtų šriftų į Next.js, turite naudokite @font-face CSS taisyklę. Ši taisyklė leidžia į tinklalapį įtraukti pasirinktinius šriftus.
Prieš naudodami font-face, turite atsisiųsti norimus naudoti šriftus. Yra daug interneto svetainėse, kuriose siūlomi nemokami šriftai, įskaitant „Google“ šriftus, šriftų erdvę ir „dafont“ svetaines.
Atsisiuntę žiniatinklio šriftus konvertuokite juos į skirtingus šriftų formatus, kad palaikytumėte kelias naršykles. Tu gali naudoti nemokami internetiniai šriftų konvertavimo įrankiai tai padaryti. Šiuolaikinės interneto naršyklės palaiko .woff ir .woff2 formatus. Jei reikia palaikyti senas naršykles, taip pat turėtumėte pateikti .eot ir .ttf formatus.
Sukurkite naują aplanką pavadinimu šriftus savo svetainės kataloge ir ten išsaugokite konvertuotus šriftų failus.
Kitas žingsnis yra įtraukti šriftų veidus į styles/global.css failą, kad jie būtų prieinami visoje svetainėje. Šiame pavyzdyje paryškinti undinės šrifto veidai:
@šrifto veidas {
šrifto šeima: 'Undinėlė';
src: url ('Mermaid-Bold.eot');
src: url ('Mermaid-Bold.eot?#iefix') formatas ('įdėtas-atvirasis tipas'),
url('Mermaid-Bold.woff2') formatas ('woff2'),
url('Mermaid-Bold.woff') formatas ('woff'),
url('Mermaid-Bold.ttf') formatas ('tikras tipas');
šrifto svoris: paryškintas;
šrifto stilius: normalus;
šrifto ekranas: keitimas;
}
Įtraukę šriftų failus, galite naudoti šiuos šriftus komponento lygio CSS faile:
h1 {
šriftų šeima: Mermaid;
}Interneto šriftų įtraukimas į Next.js per CDN
Kai kurios svetainės teikia žiniatinklio šriftus per CDN, kurį galite importuoti į savo programą. Šį metodą lengva nustatyti, nes nereikia atsisiųsti šriftų ar kurti šriftų veidų. Be to, jei naudojate „Google“ šriftus arba „TypeKit“, „Next.js“ automatiškai tvarko optimizavimą.
Galite pridėti šriftų iš CDN naudodami nuorodos žymą arba @import taisyklę CSS faile.
Nuorodos žyma visada patenka į HTML dokumento žymą head. Norėdami į Next.js pridėti galvos žymą, turite sukurti pasirinktinį dokumentą. Šiame dokumente pakeičiama antraštė ir kūno žyma, naudojama kiekvienam puslapiui pateikti.
Pradėkite naudoti šią pasirinktinę dokumento funkciją sukurdami failą /pages/_document.js.
Tada į _document.js failo antraštę įtraukite nuorodą į šriftą.
importuoti Dokumentas, { Html, Head, Main, NextScript } iš "Kitas/dokumentas";
klasėMano dokumentastęsiasidokumentas{
statinisasync getInitialProps (ctx) {
konst pradinis rekvizitas = laukti Document.getInitialProps (ctx);
grąžinti { ...initialProps };
}
render() {
grąžinti (
<HTML>
<Galva>
<nuoroda
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap"
rel="stiliaus lapas"
/>
</Head>
<kūnas>
<Pagrindinis />
<NextScript />
</body>
</Html>
);
}
}
eksportuotinumatytas „MyDocument“;Kaip naudoti @import taisyklę norint įtraukti šriftus į Next.js projektą
Kita galimybė yra naudoti @import taisyklę CSS faile, kuriame norite naudoti šriftą.
Pavyzdžiui, padarykite šriftą pasiekiamą visame projekte, importuodami žiniatinklio šriftą į styles/global.css failą.
@importuoti url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');
Dabar galite nurodyti šriftų šeimą a CSS parinkiklis kaip šitas:
h1 {
šrifto šeima:'Nemokamas Caslon ekranas', serifas;
}@import taisyklė leidžia importuoti šriftą esančiame CSS faile. Naudojant nuorodos žymą, šriftas pasiekiamas visoje svetainėje.
Ar turėtumėte priglobti šriftus vietoje arba importuoti juos per CDN?
Vietiniai šriftai paprastai yra greitesni nei iš CDN importuoti šriftai. Taip yra todėl, kad įkėlus tinklalapį naršyklė neturi pateikti papildomos užklausos šrifto CDN.
Jei norite naudoti importuotus šriftus, iš anksto įkelkite juos, kad pagerintumėte svetainės našumą. Jei šriftus galima rasti „Google“ šriftuose arba „Typekit“, galite juos importuoti ir pasinaudoti Next.js optimizavimo funkcijomis.
