Właściwość font-size-adjust

Właściwość font-size-adjust pozwala kontrolować rozmiar czcionki, przy niezmienionym font-size (zwiększać lub zmniejszać).

Zastosowanie: niech w font-family ustawione są dwie czcionki przez przecinek, na przykład, Georgia, "Times New Roman". Niech na komputerze użytkownika nie ma czcionki Georgia - w tym przypadku zastosuje się "Times New Roman". Jednak, czeka nas problem - przy tej samej wartości font-size czcionki będą wyglądać inaczej. W przykładzie poniżej obu akapitom ustawiono font-size na 16px, ale różne font-family. Spójrz, jak różnią się rozmiary:

html<p style="font-size: 16px; font-family: Georgia;">
  Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
  Lorem ipsum dolor sit amet.
</p>

Результат:

Dzieje się tak dlatego, że wyświetlany rozmiar czcionki zależy w większym stopniu nie od właściwości font-size, które określa jedynie ogólny rozmiar czcionki, a od stosunku wartości właściwości font-size i wielkości x-height (x-height - to różnica między rozmiarem małej litery "x" i wielkiej litery "X" dla określonej czcionki).

Ten stosunek nazywa się aspektem czcionki i oblicza się według wzoru: aspekt = font-size / x-height.

Problem rozmiarów rozwiązuje właściwość font-size-adjust (pozwala zmieniać aspekt czcionki), które sprawi, że druga czcionka będzie wyglądać takiego samego rozmiaru, jak pierwsza.

Zróbmy tak, aby czcionka Times New Roman była takiego samego rozmiaru, jak i Georgia. Znamy aspekt Georgia - to 0.5 (patrz tabela poniżej).

Ustawmy font-size-adjust dla tekstu z Times New Roman na wartość 0.5 i zobaczymy, że drugi tekst stał się takiego samego rozmiaru, jak pierwszy:

html<p style="font-size: 16px; font-family: Georgia;">
  Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
  Lorem ipsum dolor sit amet.
</p>

Результат:

Składnia

cssselektor {
  font-size-adjust: liczba | none;
}

Wartości

Wartość domyślna: none.

Jak określić wartość aspektu dla czcionki?

Spójrz na fragment specyfikacji W3C: Współczynnik proporcjonalności (aspekt) dla wybranych czcionek może być obliczony przez porównanie tego samego tekstu, ale z różną wartością font-size-adjust. Jeśli wartość właściwości jest dobrana prawidłowo, to przy tym samym rozmiarze czcionki tekst pozostanie niezmieniony dla wszystkich używanych na stronie czcionek.

Przedstawiam znane mi wartości aspektu dla niektórych czcionek: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Przykład

Porównaj jak wygląda tekst z różną wartością font-size-adjust i tym samym font-size i font-family:

html<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: none;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.5;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.6;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Результат:

Przykład . Zastosowanie w prawdziwym życiu

Kod poniżej sprawia, że w przypadku braku na komputerze użytkownika czcionki Georgia, zastosowana czcionka Times New Roman była takiego samego rozmiaru, jak Georgia:

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>

cssp {
  font-size: 16px;
  font-family: Georgia, "Times New Roman";
  font-size-adjust: 0.5;
}

Результат: