Eksplorator par czcionek

Czym jest Eksplorator par czcionek?

Eksplorator par czcionek to darmowe narzędzie działające w przeglądarce dla projektantów stron, programistów i twórców treści, którzy chcą dopracowanego połączenia nagłówka i tekstu bez przekopywania bibliotek czcionek. Dwa niezależne, przeszukiwalne selektory pozwalają filtrować 48 wyselekcjonowanych Google Fonts według serif, sans, display lub mono i wybrać czcionkę do każdej roli, a kontrolki dla każdej roli ustawiają grubość, rozmiar, interlinię i odstępy między literami. Podgląd na żywo renderuje Twój nagłówek i akapit w prawdziwych czcionkach, a przycisk losowania proponuje losowe zestawienia, gdy potrzebujesz inspiracji. Gdy jesteś zadowolony, skopiuj wygenerowany CSS w preferowanym formacie — regułę @import, znacznik HTML link lub importy w stylu Fontsource — i umieść go na stronie docelowej, w motywie bloga, prezentacji lub systemie projektowym.

Jak używać Eksplorator par czcionek

1. W selektorze nagłówka filtruj według serif, sans, display lub mono, wpisz, aby wyszukać, i kliknij czcionkę, aby ją wybrać.
2. Zrób to samo w selektorze tekstu, aby wybrać uzupełniającą czcionkę do tekstu akapitu.
3. Otwórz ustawienia, aby ustawić grubość, rozmiar, interlinię i odstępy dla każdej roli.
4. Wpisz własny nagłówek i zdanie w polu przykładowym lub pozostaw puste dla tekstu domyślnego; naciśnij Losuj, aby uzyskać losowe pomysły na zestawienia.
5. Wybierz format wyjściowy — @import, <link> lub Fontsource — i skopiuj wygenerowany CSS do arkusza stylów lub projektu.

Przykłady

Nagłówek: Playfair Display 700 · Tekst: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

Format: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

Najczęściej zadawane pytania

Jak wybrać dwie czcionki?

Każda rola ma własny selektor. Filtruj katalog według serif, sans, display lub mono, wpisz część nazwy rodziny, aby wyszukać, i kliknij wynik, aby go wybrać. Nagłówek i tekst wybiera się niezależnie, a przycisk Losuj dobiera losową parę za Ciebie.

Czy mogę kontrolować grubość, rozmiar, interlinię i odstępy?

Tak. Otwórz ustawienia, aby ustawić grubość, rozmiar w pikselach, interlinię i odstępy (w em) osobno dla nagłówka i tekstu. Każda zmiana pojawia się zarówno w podglądzie na żywo, jak i w skopiowanym CSS.

Jakie formaty wyjściowe mogę skopiować?

Trzy: regułę CSS @import, znacznik HTML <link> ze wskazówkami preconnect oraz importy npm w stylu Fontsource (npm i @fontsource/… plus linie importu dla poszczególnych grubości). Wszystkie trzy zawierają te same reguły font-family, grubości, rozmiaru, interlinii i odstępów dla h1–h3 i body.

Skąd pochodzą czcionki i czy mój tekst jest prywatny?

Gdy wybierzesz zestawienie, Twoja przeglądarka ładuje tylko te dwie rodziny bezpośrednio z publicznego API Google Fonts CSS pod adresem fonts.googleapis.com — to żądanie do strony trzeciej wysyłane z Twojej przeglądarki, nie przez nasze serwery. Twój tekst przykładowy i ustawienia pozostają w całości na Twoim urządzeniu.

Jakie czcionki są dołączone?

Wyselekcjonowany zestaw 48 popularnych Google Fonts obejmujący serif, sans-serif, display i monospace — w tym Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono i inne.