Podgląd Web Safe Fonts
Przetestuj wszystkie web safe fonts: Arial, Times New Roman, Georgia, Verdana i inne. Podgląd w różnych rozmiarach i stylach. CSS font-family. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćPodgląd web safe fonts – czcionki systemowe dla każdej przeglądarki
Web safe fonts to czcionki preinstalowane na większości systemów operacyjnych (Windows, macOS, Linux, Android, iOS) – dostępne bez Google Fonts. Idealnie do fallback stacks i stron bez zewnętrznych zasobów fontów.
Czym są web safe fonts
Web safe = czcionki zainstalowane na >95% urządzeń. Windows: Arial, Times New Roman, Courier New, Georgia, Verdana, Trebuchet MS, Comic Sans MS. macOS/iOS: Helvetica, Geneva, Monaco, Palatino. Wszystkie platformy: Arial, Times New Roman, Courier New (core web fonts, Microsoft 1996). Linux: często zestaw Liberation Fonts (Arial-compatible).
Najpopularniejsze web safe fonts
Arial: humanistyczna sans-serif, neutralna. Alternatywa Helvetica. Helvetica: macOS default, elegant. Times New Roman: szeryfowa, formalna. Georgia: szeryfowa do ekranów (Miller 1993). Verdana: humanistyczna, legibility na ekranach. Courier New: monospace (kod, terminale). Trebuchet MS: humanistyczna, przyjazna. Palatino/Book Antiqua: klasyczna szeryfowa.
Font stacks – bezpieczne kombinacje
Sans-serif: font-family: Arial, Helvetica, sans-serif. Systemowy: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif. Szeryfowy: font-family: Georgia, "Times New Roman", serif. Monospace: font-family: Consolas, Monaco, "Courier New", monospace. System-ui: font-family: system-ui (automatycznie system font).
Web safe fonts vs Google Fonts
Web safe: zerowy czas ładowania, brak zależności, privacy-friendly. Google Fonts: ogromny wybór, spójny wygląd między OS, wymaga HTTP request (~100ms). Kompromis: Google Fonts z preload + display=swap. Font subsetting: załaduj tylko potrzebne glify. Variable fonts: jeden plik = wiele wag.
Najczęstsze pytania
Jak ustawić font-family w CSS?
font-family: Arial, Helvetica, sans-serif; (font stack). Użyj cudzysłowów dla nazw z spacjami: "Times New Roman". Ostatni: generic family (serif, sans-serif, monospace, cursive, fantasy, system-ui). Browser: szuka pierwszego dostępnego czcionki na liście.
Co to jest system font stack w 2024?
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif. Alternatywnie: font-family: system-ui, sans-serif (uproszczone, modern CSS). GitHub używał tej długiej listy. Teraz preferuje system-ui.
Jak sprawdzić zainstalowane czcionki?
Windows: C:/Windows/Fonts. macOS: Aplikacja Font Book. Linux: fc-list komenda. CSS: nie ma API do sprawdzania. JavaScript: document.fonts (Font Loading API) – sprawdza czy załadowane. Hack: canvas fingerprinting sprawdza zainstalowane fonty (privacy concern). Narzędzie pokazuje jak wygląda każda web safe font w Twojej przeglądarce.
Jak załadować Google Fonts optymalnie?
. . . display=swap: pokaż fallback font, podmień gdy załadowany. Lokalnie: @font-face z local() sprawdza najpierw systemową.
Co to są variable fonts?
Variable font: jeden plik czcionki zawiera continuum wagowo/szerokościowy. Oszczędność: zamiast bold.woff2 + regular.woff2 = jeden plik ~50% rozmiaru. CSS: font-variation-settings: "wght" 700; lub font-weight: 700 (działa z variable). Obsługa: Chrome/Firefox/Safari od ~2018. Google Fonts: wiele fontów ma wersje variable.
Powiązane narzedzia: generator CSS czcionek, podglad fukcji CSS i generator font-face.