LudzkaStronaBiblioteka komponentówPrywatna biblioteka
← Do katalogu

Komponent · Typografia

Próbnik kroju

Próbnik skali typograficznej z lokalnie bundlowanym fontem DM Sans Variable.

ID zasobucmp-dm-sans-specimen-01
Eksperymentalny

Podgląd

Rozmiar
Powiększenie100%

Oddzielny kontekst prezentacyjny; podgląd uruchamia zaufany kod biblioteki.

Szczegóły technicznePliki, warianty, zależności i sposób użycia

O komponencie

Ocena hierarchii tekstu i gęstości typografii przed przeniesieniem do projektu Astro.

Warianty

Skala wag

Plik podglądu previews/weights.astro

  • Fonty DM Sans Variable 400, 500, 600 i 700

Układ redakcyjny

Plik podglądu previews/editorial.astro

  • Fonty DM Sans Variable; lokalnie dostarczany przez pakiet npm

Pliki

Folder zasobu wyznacza własne pliki, które można skopiować niezależnie od wspólnych zależności.

  • Źródłosrc/content/resources/dm-sans-specimen/TypographySpecimen.astro
  • Plik podglądusrc/content/resources/dm-sans-specimen/previews/weights.astro
  • Plik podglądusrc/content/resources/dm-sans-specimen/previews/editorial.astro
  • Grafikasrc/content/resources/dm-sans-specimen/assets/thumbnail.svg

Główny plik: src/content/resources/dm-sans-specimen/TypographySpecimen.astro

Zależności

Współdzielone

Brak.

Pakiety zewnętrzne

  • @fontsource-variable/[email protected]Dostępny

    Dostarcza font DM Sans Variable bundlowany lokalnie przez Astro/Vite; wymagany przez źródłowy komponent.

Jak użyć w Astro

Integracja nie została jeszcze zweryfikowana.

  1. Zainstaluj @fontsource-variable/[email protected] w projekcie docelowym, np. pnpm add @fontsource-variable/[email protected], i zachowaj wymaganą licencję fontu.
  2. Skopiuj TypographySpecimen.astro do komponentów projektu Astro. Import @fontsource-variable/dm-sans/wght.css jest już w komponencie i powinien pozostać w grafie bundlera.
  3. Zaimportuj komponent na stronie Astro i użyj <TypographySpecimen /> albo <TypographySpecimen editorial />. Sprawdź, czy lokalny font został dołączony do builda i czy wagi 400–700 renderują się w docelowym layoucie.

Fonty, grafiki i style

Fonty

  • DM Sans Variable, wagi 400–700, z @fontsource-variable/dm-sans

Grafiki

  • assets/thumbnail.svg — miniatura karty katalogu

Pochodzenie i licencja

Źródło
Opracowano na potrzeby prywatnej biblioteki demonstracyjnej.
Autor / uznanie
Własny materiał demonstracyjny
Licencja
Materiał autorski; font ma osobne warunki dystrybucji opisane w pakiecie.