Szybki przewodnik po wygładzaniu jasnego tekstu na ciemnym tle i zapobieganiu nadmiernemu pogrubieniu tekstu na ekranach macOS.
Standardowy fragment antyaliasingu
body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Wartości właściwości i zachowanie renderowania
WebKit i Blink (-webkit-font-smoothing)
| Wartość | Zachowanie renderowania |
|---|---|
auto |
Domyślny antyaliasing subpikselowy przeglądarki |
none |
Całkowicie wyłącza wygładzanie (pikselowane krawędzie) |
antialiased |
Renderuje tekst z wygładzaniem w skali szarości zamiast subpikseli |
Firefox na macOS (-moz-osx-font-smoothing)
| Wartość | Zachowanie renderowania |
|---|---|
auto |
Domyślne renderowanie subpikselowe |
grayscale |
Renderuje tekst z antyaliasingiem w skali szarości |
Dobre praktyki
- Tryb ciemny / Ciemne tła: Wygładzanie w skali szarości jest wysoce skuteczne w przypadku jasnego tekstu na ciemnym tle, zapobiegając rozlewaniu się czcionek na ekranach Retina.
- Jasne tła: Dla standardowego ciemnego tekstu na białym tle wartość domyślna (auto / subpiksel) zapewnia lepszą ostrość.