Уеб шрифтовете са чудесен начин да добавите персонализирани шрифтове към уебсайта си. Тези шрифтове може да не са налични в системата на потребителя, така че трябва да ги включите във вашия проект, като ги хоствате или препращате към тях чрез CDN.
Научете как да включите уеб шрифтове в уебсайт Next.js, като използвате тези два метода.
Използване на самостоятелно хоствани шрифтове в Next.js
За да добавите самостоятелно хоствани шрифтове в Next.js, трябва използвайте CSS правилото @font-face. Това правило ви позволява да добавяте персонализирани шрифтове към уеб страница.
Преди да използвате font-face, трябва да изтеглите шрифтовете, които искате да използвате. Има много сайтове в интернет, които предлагат безплатни шрифтове, включително уебсайтовете на Google fonts, fontspace и dafont.
След като изтеглите уеб шрифтовете, конвертирайте ги в различни формати на шрифтове, за да поддържате множество браузъри. Можеш да използваш безплатни онлайн инструменти за конвертиране на шрифтове да го направя. Съвременните уеб браузъри поддържат формати .woff и .woff2. Ако трябва да поддържате наследени браузъри, трябва също да предоставите формати .eot и .ttf.
Създайте нова папка, наречена шрифтове в директорията на вашия сайт и запазете преобразуваните файлове с шрифтове там.
Следващата стъпка е да включите лицата на шрифта в styles/global.css файл, за да ги направите достъпни за целия уебсайт. Този пример показва лицата на шрифта за русалка с удебелен шрифт:
@font-face {
шрифтово семейство: 'Русалка';
src: url('Mermaid-Bold.eot');
src: url('Mermaid-Bold.eot?#iefix') формат ('вграден отворен тип'),
url('Mermaid-Bold.woff2') формат ('уаф2'),
url('Mermaid-Bold.woff') формат ('уаф'),
url('Mermaid-Bold.ttf') формат ('истински тип');
тегло на шрифта: удебелен;
стил на шрифта: нормален;
шрифт-дисплей: размяна;
}
След като включите файловете с шрифтове, можете да използвате тези шрифтове в CSS файл на ниво компонент:
h1 {
семейство шрифтове: Mermaid;
}Включване на уеб шрифтове към Next.js чрез CDN
Някои уебсайтове обслужват уеб шрифтове чрез CDN, които можете да импортирате в приложението си. Този подход е лесен за настройка, защото не е необходимо да изтегляте шрифтове или да създавате лица на шрифтове. Освен това, ако използвате шрифтове на Google или TypeKit, Next.js автоматично обработва оптимизацията.
Можете да добавяте шрифтове от CDN, като използвате етикета за връзка или правилото @import вътре в CSS файл.
Тагът за връзка винаги влиза в тага за глава на HTML документ. За да добавите head таг в Next.js, трябва да създадете персонализиран документ. Този документ променя етикета head и body, използван за изобразяване на всяка страница.
Започнете да използвате тази функция за персонализиран документ, като създадете файла /pages/_document.js.
След това включете връзката към шрифта в главата на файла _document.js.
импортиране Документ, { Html, Head, Main, NextScript } от "следващия/документ";
класMyDocumentсе простираДокумент{
статиченасинхронен getInitialProps (ctx) {
конст initialProps = изчакайте Document.getInitialProps (ctx);
връщане { ...initialProps };
}
рендер() {
връщане (
<Html>
<Глава>
<връзка
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&дисплей=размяна"
rel="таблица със стилове"
/>
</Head>
<тяло>
<Основен />
<NextScript />
</body>
</Html>
);
}
}
износпо подразбиране MyDocument;Как да използвате правилото @import за включване на шрифтове в проект Next.js
Друг вариант е да използвате правилото @import в CSS файла, в който искате да използвате шрифта.
Например, направете шрифта достъпен в целия проект, като импортирате уеб шрифта в styles/global.css файл.
@импортиране на url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&дисплей=размяна');
Вече можете да посочите фамилията шрифтове в a CSS селектор като този:
h1 {
шрифтово семейство:'Безплатен дисплей Caslon', сериф;
}Правилото @import ви позволява да импортирате шрифт в съдържащ се CSS файл. Използването на етикета за връзка прави шрифта достъпен в целия сайт.
Трябва ли да хоствате шрифтове локално или да ги импортирате чрез CDN?
Шрифтовете, хоствани локално, обикновено са по-бързи от шрифтовете, импортирани от CDN. Това е така, защото браузърът не трябва да прави допълнителна заявка към CDN на шрифта, след като уеб страницата се зареди.
Ако искате да използвате импортирани шрифтове, заредете ги предварително, за да подобрите ефективността на сайта. Ако шрифтовете са налични в Google fonts или Typekit, можете да ги импортирате и да се възползвате от функциите за оптимизация на Next.js.