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";
}
/* Generated by Web Safe Fonts Viewer */
/* Tip: Map your favorites to tokens like --font-sans and --font-serif. */
/* System UI */
/* Modern default UI stack (fast, native feel). */
.wsf-font-1 {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Segoe UI */
/* Common Windows UI font with clean shapes. */
.wsf-font-2 {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* Arial */
/* Classic sans-serif, widely available. */
.wsf-font-3 {
font-family: Arial, Helvetica, sans-serif;
}
/* Helvetica */
/* Popular on macOS; falls back to Arial on many systems. */
.wsf-font-4 {
font-family: Helvetica, Arial, sans-serif;
}
/* Verdana */
/* Designed for screen readability with wide letterforms. */
.wsf-font-5 {
font-family: Verdana, Geneva, sans-serif;
}
/* Tahoma */
/* Compact UI-friendly sans-serif. */
.wsf-font-6 {
font-family: Tahoma, Verdana, sans-serif;
}
/* Trebuchet MS */
/* Humanist sans with friendly curves. */
.wsf-font-7 {
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}
/* Times New Roman */
/* Traditional serif used in documents. */
.wsf-font-8 {
font-family: "Times New Roman", Times, serif;
}
/* Georgia */
/* Screen-optimized serif with strong readability. */
.wsf-font-9 {
font-family: Georgia, "Times New Roman", Times, serif;
}
/* Garamond */
/* Elegant serif; availability may vary by platform. */
.wsf-font-10 {
font-family: Garamond, "Times New Roman", Times, serif;
}
/* Palatino */
/* Readable serif often used for long-form content. */
.wsf-font-11 {
font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif;
}
/* Courier New */
/* Classic monospace with clear alignment. */
.wsf-font-12 {
font-family: "Courier New", Courier, monospace;
}
/* Lucida Console */
/* UI-friendly monospace on many Windows systems. */
.wsf-font-13 {
font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, monospace;
}
/* Monaco */
/* Common monospace on macOS. */
.wsf-font-14 {
font-family: Monaco, "Lucida Console", monospace;
}
/* Comic Sans MS */
/* Playful font; best for informal contexts. */
.wsf-font-15 {
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
/* Brush Script MT */
/* Script-like strokes for decorative headings. */
.wsf-font-16 {
font-family: "Brush Script MT", "Brush Script Std", cursive;
}
/* Impact */
/* Bold display font often used for short headings. */
.wsf-font-17 {
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
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.