Używanie niestandardowych czcionek

Ten przewodnik pokaże Ci, jak dodać czcionki internetowe do swojego projektu i używać ich w swoich komponentach.

Używanie lokalnego pliku czcionki

Ten przykład zademonstruje dodanie niestandardowej czcionki za pomocą pliku czcionki DistantGalaxy.woff.

Dodaj swój plik czcionki do public/fonts/.

Dodaj następującą deklarację @font-face do swojego CSS. Może to być w globalnym pliku .css, który importujesz, w bloku <style is:global>, lub w bloku <style> w konkretnym układzie graficznym lub komponencie, w którym chcesz użyć tej czcionki.

/* Zarejestruj swoją niestandardową czcionkę i powiedz przeglądarce, gdzie ją znaleźć. */
@font-face {
  font-family: 'DistantGalaxy';
  src: url('/fonts/DistantGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Użyj wartości font-family z deklaracji @font-face, aby stylizować elementy w swoim komponencie lub układzie graficznym. W tym przykładzie nagłówek <h1> będzie miał zastosowaną niestandardową czcionkę, podczas gdy akapit <p> nie.
src/pages/example.astro
```
---
---

<h1>W odległej, dalekiej galaktyce...</h1>

<p>Niestandardowe czcionki sprawiają, że moje nagłówki są o wiele fajniejsze!</p>

<style>
h1 {
  font-family: 'DistantGalaxy', sans-serif;
}
</style>
```

Używanie Fontsource

Projekt Fontsource upraszcza używanie Google Fonts i innych czcionek open-source. Dostarcza on moduły npm, które możesz zainstalować dla czcionek, których chcesz używać.

Znajdź czcionkę, której chcesz użyć, w katalogu Fontsource. Ten przykład użyje Twinkle Star.
Zainstaluj pakiet dla wybranej czcionki.
- npm
- pnpm
- Yarn
Okno terminala
npm install @fontsource/twinkle-star
Okno terminala
pnpm add @fontsource/twinkle-star
Okno terminala
yarn add @fontsource/twinkle-star
Poprawną nazwę paczki znajdziesz w sekcji „Quick Installation” na stronie każdej czcionki w witrynie Fontsource. Zaczyna się ona od @fontsource/ lub @fontsource-variable/ i danej nazwy czcionki.
Zaimportuj paczkę czcionki w komponencie, w którym chcesz użyć czcionki. Zazwyczaj chcesz to zrobić w wspólnym komponencie layoutu, aby upewnić się, że czcionka jest dostępna w całej witrynie.

Import automatycznie doda niezbędne reguły @font-face potrzebne do ustawienia czcionki.
src/layouts/BaseLayout.astro
```
---
import '@fontsource/twinkle-star';
---
```
Użyj nazwy czcionki, jak pokazano w przykładzie body na stronie Fontsource, jako wartości font-family. To zadziała wszędzie tam, gdzie możesz pisać CSS w swoim projekcie Astro.
```
h1 {
  font-family: "Twinkle Star", cursive;
}
```

Aby zoptymalizować czasy renderowania Twojej witryny, możesz chcieć preładować czcionki, które są niezbędne do początkowego wyświetlenia strony. Zobacz przewodnik Fontsource dotyczący preładowania czcionek po więcej informacji na temat jego zastosowania.

Rejestrowanie czcionek w Tailwind

Jeśli używasz integracji Tailwind, możesz użyć dowolnej z poprzednich metod na tej stronie, aby zainstalować swoją czcionkę, z pewnymi modyfikacjami. Możesz albo dodać deklarację @font-face dla lokalnej czcionki albo użyć strategii import Fontsource, aby zainstalować swoją czcionkę.

Aby zarejestrować swoją czcionkę w Tailwind:

Postępuj zgodnie z jednym z powyższych przewodników, ale pomiń ostatni krok dodawania font-family do swojego CSS.

Dodaj nazwę kroju pisma do tailwind.config.mjs.

Ten przykład dodaje Inter do stosu czcionek sans-serif, z domyślnymi czcionkami zapasowymi z Tailwind CSS.

import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [],
}

Teraz cały tekst sans-serif (domyślny w Tailwind) w Twoim projekcie będzie używał wybranej przez Ciebie czcionki, a klasa font-sans również zastosuje czcionkę Inter.

Zobacz dokumentację Tailwind dotyczącą dodawania niestandardowych czcionek po więcej informacji.

Więcej zasobów

Dowiedz się, jak działają czcionki internetowe w przewodniku MDN po czcionkach internetowych..
Wygeneruj CSS dla swojej czcionki za pomocą Generatora Webfont Font Squirrel.

Pomóż nam

Społeczność