Улучшение веб-типографики с помощью настройки размера шрифта CSS

Эта статья была рецензирована Panayotis Matsinopoulos . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

Свойство font-size-adjust в CSS позволяет разработчикам указывать font-size Это может значительно улучшить читаемость текста в Интернете.

В этой статье вы узнаете о важности свойства font-size-adjust

Важность font-size-Adjust

Большинство веб-сайтов, которые вы посещаете, состоят в основном из текста. Поскольку письменное слово является важной частью веб-сайта, имеет смысл обратить особое внимание на шрифт, который вы используете для отображения вашей информации. Выбор правильного шрифта может привести к приятному чтению. Однако неправильное использование может сделать сайт неразборчивым. После того, как вы определили тип шрифта, который хотите использовать, вы обычно выбираете для него подходящий размер.

Свойство font-sizefont-family Тем не менее, в большинстве случаев он выбирается таким образом, что ваш первый вариант font-family Проблема возникает, когда первый вариант по какой-то причине недоступен, а браузер отображает текст, используя один из запасных шрифтов, перечисленных в документе CSS.

Например, учитывая это правило CSS:

 body {
  font-family: 'Lato', Verdana, sans-serif;
}

Если «Lato», который ваш браузер загружает из Google Fonts , недоступен, вместо него будет использоваться следующий запасной шрифт, в данном случае Verdana. Тем не менее, вполне вероятно, что значение font-size

Какова ценность аспекта веб-шрифта?

Видимый размер шрифта, а также его разборчивость могут сильно различаться при постоянном значении font-size Это особенно верно для таких сценариев, как латиница, которые различают прописные и строчные буквы. В таких случаях отношение высоты строчных букв к их заглавным копиям является важным фактором при определении разборчивости данного шрифта. Это соотношение обычно называют аспектным значением шрифта.

Как я упоминал ранее, после установки значения font-size Однако это может повлиять на удобочитаемость резервного шрифта, если его значение аспекта слишком отличается от значения аспекта шрифта первого выбора.

Роль свойства font-size-adjustвысоты всех шрифтов, тем самым улучшая их разборчивость.

Выбор правильного значения для font-size-Adjust

Теперь, когда вы знаете важность использования свойства font-size-adjust Это свойство имеет следующий синтаксис:

 font-size-adjust: none | <number>

Начальное значение font-size-adjustnone Значение nonefont-sizefont-familyfont-size-adjust

Вы также можете установить значение свойства font-size Это число используется для вычисления x-высоты всех шрифтов на веб-странице к одному значению. Высота х равна заданному числу, умноженному на font-size-adjust Это может немного улучшить читаемость шрифтов при небольших размерах. Вот пример использования свойства font-size: 20px;
font-size-adjust: 0.6;

 font-size

 .adjusted-a {
  font-size-adjust: 0.4;
}

.adjusted-b {
  font-size-adjust: 0.495;
}

.adjusted-c {
  font-size-adjust: 0.6;
}