Czcionki internetowe to świetny sposób na dodanie niestandardowych czcionek do witryny. Te czcionki mogą nie być dostępne w systemie użytkownika, więc musisz uwzględnić je w swoim projekcie, udostępniając je lub odwołując się do nich za pośrednictwem sieci CDN.
Dowiedz się, jak dołączyć czcionki internetowe do witryny Next.js przy użyciu tych dwóch metod.
Korzystanie z samodzielnie hostowanych czcionek w Next.js
Aby dodać samodzielnie hostowane czcionki w Next.js, musisz to zrobić użyj reguły CSS @font-face. Ta reguła umożliwia dodawanie niestandardowych czcionek do strony internetowej.
Przed użyciem font-face musisz pobrać czcionki, których chcesz użyć. Jest wiele witryn internetowych oferujących bezpłatne czcionki, w tym czcionek Google, przestrzeni czcionek i stron internetowych dafont.
Po pobraniu czcionek internetowych przekonwertuj je na różne formaty czcionek, aby obsługiwać wiele przeglądarek. Możesz użyć bezpłatne narzędzia online do konwersji czcionek to zrobić. Nowoczesne przeglądarki internetowe obsługują formaty .woff i .woff2. Jeśli potrzebujesz obsługi starszych przeglądarek, powinieneś również podać formaty .eot i .ttf.
Utwórz nowy folder o nazwie czcionki w katalogu witryny i zapisz tam przekonwertowane pliki czcionek.
Następnym krokiem jest uwzględnienie krojów czcionek w pliku style/global.css plik, aby były dostępne dla całej witryny. W tym przykładzie pogrubioną czcionką syreny pokazano kroje czcionek:
@czcionka-twarz {
rodzina czcionek: 'Syrena';
źródło: URL('Mermaid-Bold.eot');
źródło: URL('Mermaid-Bold.eot?#iefix') formatuj('osadzony typ otwarty'),
URL('Syrena-Bold.woff2') formatuj('wow2'),
URL('Syrenka-Bold.woff') formatuj('wow'),
URL('Mermaid-Bold.ttf') formatuj('prawdziwy typ');
grubość czcionki: pogrubiona;
styl czcionki: normalny;
wyświetlanie czcionek: zamiana;
}
Po dołączeniu plików czcionek możesz użyć tych czcionek w pliku CSS na poziomie komponentu:
h1 {
rodzina czcionek: Syrenka;
}Dołączanie czcionek internetowych do Next.js za pośrednictwem sieci CDN
Niektóre witryny udostępniają czcionki internetowe za pośrednictwem sieci CDN, którą można zaimportować do swojej aplikacji. To podejście jest łatwe do skonfigurowania, ponieważ nie trzeba pobierać czcionek ani tworzyć krojów czcionek. Dodatkowo, jeśli używasz czcionek Google lub TypeKit, Next.js automatycznie obsługuje optymalizację.
Czcionki można dodawać z sieci CDN za pomocą tagu łącza lub reguły @import w pliku CSS.
Tag linku zawsze znajduje się wewnątrz tagu head dokumentu HTML. Aby dodać tag head w Next.js, musisz utworzyć niestandardowy dokument. Ten dokument modyfikuje tag head i body używany do renderowania każdej strony.
Zacznij korzystać z tej niestandardowej funkcji dokumentu, tworząc plik /pages/_document.js.
Następnie umieść link do czcionki w nagłówku pliku _document.js.
import Dokument, {Html, Head, Main, NextScript} z "Następny/dokument";
klasaMój dokumentrozciąga sięDokument{
statycznyasynchroniczny getInitialProps (ctx) {
konst początkoweWłaściwości = czekać na Document.getInitialProps (ctx);
powrót { ...własności początkowe };
}
renderowanie() {
powrót (
<HTML>
<Głowa>
<połączyć
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&wyświetlanie = zamiana"
rel="arkusz stylów"
/>
</Head>
<ciało>
<Główny />
<następny skrypt />
</body>
</Html>
);
}
}
eksportdomyślny Mój dokument;Jak używać reguły @import do dołączania czcionek do projektu Next.js
Inną opcją jest użycie reguły @import w pliku CSS, w którym chcesz użyć czcionki.
Na przykład udostępnij czcionkę w całym projekcie, importując czcionkę internetową w pliku style/global.css plik.
@adres URL importu ('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&wyświetlanie = zamiana');
Możesz teraz odwoływać się do rodziny czcionek w pliku Selektor CSS lubię to:
h1 {
rodzina czcionek:'Wolny wyświetlacz Caslon', szeryf;
}Reguła @import umożliwia zaimportowanie czcionki w zawartym pliku CSS. Użycie tagu linku sprawia, że czcionka jest dostępna w całej witrynie.
Czy powinieneś hostować czcionki lokalnie lub importować je przez CDN?
Czcionki hostowane lokalnie są zwykle szybsze niż czcionki importowane z sieci CDN. Dzieje się tak, ponieważ przeglądarka nie musi wysyłać dodatkowego żądania do CDN czcionek po załadowaniu strony internetowej.
Jeśli chcesz używać zaimportowanych czcionek, załaduj je wstępnie, aby poprawić wydajność witryny. Jeśli czcionki są dostępne w Google Fonts lub Typekit, możesz je zaimportować i skorzystać z funkcji optymalizacji Next.js.
