Odkrywaj i przeglądaj piękne pary czcionek Google Fonts z podglądem tekstu na żywo i kopiowaniem kodu CSS jednym kliknięciem
Narzędzia CSS
O tym narzędziu
Narzędzie do doboru czcionek CSS pomaga znaleźć idealne połączenie czcionek nagłówkowych i tekstowych spośród 16 starannie wybranych par Google Fonts. Filtruj według kategorii, przeglądaj tekst na żywo, dostosowuj rozmiar czcionki i kopiuj gotowy kod CSS z dyrektywą @import.
Główne funkcje
- 16 starannie wybranych par czcionek Google Fonts (nagłówek + tekst)
- Filtrowanie według kategorii: Wszystkie, sans-serif, serif, monospace, display
- Podgląd tekstu na żywo z konfigurowalną treścią
- Regulowany rozmiar czcionki z podglądem na żywo
- Kopiowanie kodu CSS z @import jednym kliknięciem
- Szczegółowe informacje o każdej czcionce
Przypadki użycia
- Znajdowanie idealnych par czcionek do projektów stron internetowych
- Porównywanie kombinacji czcionek obok siebie
- Szybkie generowanie kodu CSS @import
- Eksploracja czcionek Google Fonts według kategorii
- Podejmowanie decyzji dotyczących typografii z podglądem na żywo
fonts
typography
css
google-fonts
FAQ
Co to jest dobór czcionek?
Dobór czcionek to sztuka łączenia dwóch lub więcej czcionek, które wzajemnie się uzupełniają. Zazwyczaj obejmuje wybór czcionki nagłówkowej dla tytułów i czcionki tekstowej dla treści, tworząc hierarchię wizualną i harmonię w projektowaniu stron internetowych.
Czy mogę używać tych czcionek za darmo?
Tak, wszystkie czcionki w tym narzędziu pochodzą z Google Fonts, które są darmowe i open source. Możesz ich używać w projektach osobistych i komercyjnych bez żadnych kosztów licencyjnych.
Jak wybrać odpowiednią parę czcionek?
Szukaj kontrastu przy jednoczesnym zachowaniu harmonii. Popularne podejścia obejmują łączenie czcionki szeryfowej z bezszeryfową, używanie różnych grubości tej samej rodziny czcionek lub wybieranie czcionek o podobnych proporcjach, ale różnych stylach.
Czy mogę dostosować wyświetlany tekst?
Tak, możesz wpisać własny tekst, aby zobaczyć, jak każda para czcionek wygląda z Twoją treścią. Pomaga to ocenić czytelność i estetykę z rzeczywistym tekstem.
Jak wyeksportować kod CSS?
Każda para czcionek zawiera przycisk kopiowania, który kopiuje kompletny kod CSS z dyrektywą @import i rodzinami czcionek. Po prostu kliknij przycisk kopiowania i wklej kod do swojego arkusza stylów.