Własność CSS font-optical-sizing

Własność CSS font-optical-sizing włącza lub wyłącza funkcję optymalizacji wyglądu tekstu pod kątem różnych rozmiarów pisma.

Przy mniejszym rozmiarze litery lepiej wyglądają, kiedy mają grubsze linie i większe szeryfy (w przypadku fontów szeryfowych), a przy większym rozmiarze stają się atrakcyjniejsze wizualnie, kiedy mają subtelniejsze linie i szeryfy. Własność font-optical-sizing pozwala wybrać, czy włączyć funkcję dostosowującą wygląd liter do ich rozmiaru według tych zasad, czy nie.

Domyślnie optyczna optymalizacja tekstu jest włączona, więc własność font-optical-sizing służy głównie do jej wyłączania. W fontach zmiennych ta właściwość jest reprezentowana przez oś opsz i należy pamiętać, że przeglądarki jej nie syntetyzują, tzn. aby można było używać tej funkcji, musi ona być wprost obsługiwana przez font.

Przykład

Poniżej znajduje się prosty przykład użycia własności font-optical-sizing:

p {
  font-optical-sizing: none;
}

Poniższa ilustracja przedstawia efekt działania tego ustawienia dla fontu o nazwie Robot Flex. Tak wygląda tekst po wyłączeniu optycznej optymalizacji tekstu^*:

A tak wygląda ten sam tekst po włączeniu optycznej optymalizacji tekstu:

Wartości i składnia

Jako wartość własność font-optical-sizing przyjmuje jedno z następujących słów kluczowych:

auto

Włącza funkcję optycznej optymalizacji tekstu.

none

Wyłącza funkcję optycznej optymalizacji tekstu.

Zastosowanie

Własność CSS font-optical-sizing ma zastosowanie do Wszystkie elementy HTML.

Podsumowanie

* Źródło cytatu: Jan Himilsbach, Kombatanci