От автора: многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт Bold Comic Sans для заголовков и шрифт Roboto для текста. Однако из-за этого ваш веб-сайт может выглядеть неаккуратным, поскольку многие браузеры не поддерживают все шрифты. Свойство CSS font-size-adjust поможет избежать такой ситуации, сделав размер шрифта автоматически настраиваемым.
CSS font-size-adjust принимает несколько единиц измерения, в которых отображаются размеры шрифта, включая пиксели, em, rem, ключевые слова и единицы области просмотра. Его можно применять к классам и идентификаторам CSS, но и к самим элементам. Таким образом, его можно использовать как отличный прием, чтобы предотвратить значительное уменьшение размера шрифта, если ваш первый выбранный шрифт не загружается.
Однако, прежде чем рассматривать свойство CSS font-size-adjust, давайте быстро взглянем на свойство CSS font-size.
Свойство CSS font-size указывает желаемую высоту глифов на основе шрифта. Для масштабируемого шрифта применяется коэффициент для вычисления размера шрифта. Однако для немасштабируемого шрифта абсолютная единица размера шрифта соответствует установленному размеру шрифта.
Синтаксис:
font-size: <absolute-size> | <relative-size> | <length-percentage>
absolute-number: это значение относится к вычисленным размерам шрифта.
relative-size: он принимает значение относительно вычисленного font-size и таблицы font-size.
length-percentage: указывает, что размер шрифта является абсолютным.
Свойство CSS font-size-adjust
Свойство CSS font-size-adjust предоставляет разработчикам возможность управлять размером шрифта, позволяя им изменять размер шрифта, когда изначально выбранный тип шрифта недоступен.
В таких ситуациях происходит откат шрифта, и браузер использует второй указанный шрифт. Это может привести к большой проблеме, если будет разница между соотношением сторон исходного и используемого шрифта. В таких обстоятельствах, когда нам нужно позаботиться о внешнем виде и поддерживать читабельность текста, можно использовать свойство CSS font-size-adjust.
Свойство CSS font-size-adjust указывает, что размер шрифта элемента необходимо изменить на основе высоты строчных букв, а не максимума прописных букв.
Синтаксис:
font-size-adjust: none | < number >
none: указывает, что высота шрифта по оси x не сохраняется.
число: это значение относится к числу аспекта первого использованного шрифта, а затем остальные доступные шрифты будут масштабированы в соответствии со следующей формулой: c = (a/a’) s
где:
c — скорректированный размер шрифта для использования
а — значение аспекта, заданное свойством font-size-adjust
а’ — значение аспекта фактического шрифта
s — значение размера шрифта
Пример
Если Roboto 15 пикселей (со значением аспекта 0,50) был недоступен, а следующий заданный шрифт имел значение аспекта 0,40, размер используемого заменяющего шрифта был бы 15 * (0,50 / 0,40) = 18,75 пикселей.
Как работает CSS font-size-adjust?
Вот демонстрация того, как работает font-size-adjust, позволяя автоматически настраивать размер шрифта. Ниже приведен пример, в котором сравниваются два разных типа шрифтов с разным соотношением сторон. Высота по оси x строчных букв двух шрифтов может быть изменена для соответствия высоте по оси x другого шрифта.
На изображении выше к тексту слева был применен шрифт Comic Sans со значением аспекта 0,53. Напротив, текст с правой стороны был использован со шрифтом Calibri, который имеет значение аспекта 0,47. Это дает очень мелкий текст. В нижней строке был применен параметр font-size-adjust, равный 0,53, из-за чего размер шрифта на нижней стороне теперь изменен в соответствии с указанным соотношением сторон.
Значение свойства CSS font-size-adjust влияет на используемое значение font-size, но не влияет на его значение перечисления. Оно влияет на размеры относительных единиц, поддерживаемых метриками шрифтов, такими как ex и ch шрифтов, доступных в первую очередь, но не искажает масштаб единиц em.
Поскольку числовые значения line-height проверяются с вычисленным размером font-size, свойство CSS font-size-adjust не изменяет используемое значение line-height; скорее, он автоматически регулирует размер шрифта.
В CSS авторы часто указывают «высоту строки» как кратную размеру шрифта. Поскольку свойство CSS font-size-adjust влияет на используемое значение font-size, авторы должны обязательно установить высоту строки при использовании CSS font-size-adjust.
Примечание. Установка слишком высокой высоты строки может привести к наложению строк текста.
Пример
<!doctype html>
<head>
<title>font-size-adjust Example</title> <link rel="stylesheet" href="style.css">
</head>
<body>
<p>Font Without adjustment.</p>
<p class="adjust">Font With adjustment.</p>
<hr>
<p>Previewed on {Browser}.</p>
</body>
</html>p { font: 20px Verdana, Helvetica, sans-serif;
}
.adjust { font-size-adjust: 0.78; }Совместимость с браузерами
Давайте поговорим о поддержке CSS в браузерах. В настоящее время только Firefox по умолчанию поддерживает свойство CSS font-size-adjust. Начиная с версий 43 и 30, Chrome и Opera также поддерживают это свойство с флагом «Экспериментальные функции веб-платформы», который можно включить в chrome: // flags. Edge и Safari вообще не поддерживают свойство CSS font-size-adjust.
Свойство CSS font-size-adjust изначально было введено в CSS2, но позже было удалено в CSS2.1, а затем снова введено в CSS3.
Ниже приведена таблица, в которой перечислены основные браузеры вместе с версиями, поддерживающими эту функцию:
Проверка размера шрифта в браузерах
С помощью LambdaTest вы можете легко проверять размер шрифта в браузерах на настольных и мобильных устройствах, выполняя кросс-браузерное тестирование совместимости. На скриншотах ниже мы реализуем свойство font-size-adjust на платформе Netlify и попытаемся получить к нему доступ в разных браузерах.
Войдите в панель управления LambdaTest. Вы можете бесплатно зарегистрироваться здесь.
Выберите «Тестирование в реальном времени» и оптимизируйте нужные конфигурации.
Предварительный просмотр CSS font-size-adjust в несовместимом и совместимом браузере.
Google Chrome (несовместимый)
Firefox (совместимый)
С помощью функции тестирования в реальном времени, доступной на платформе LambdaTest, вы можете выполнить кросс-браузерное тестирование и проверить его совместимость с CSS font-size-adjust.
Заключение!
Теперь вы, возможно, имеете представление о том, что делает свойство CSS font-size-adjust, почему оно важно, и как определить значение аспекта для различных шрифтов.
Поскольку CSS font-size-adjust изящно заменяется на резервный вариант в старых браузерах, вы сможете переместить и начать использовать его сегодня, чтобы повысить читаемость текста на рабочих веб-сайтах. Однако у него есть серьезные ограничения, связанные с поддержкой только некоторыми браузерами, как вы теперь убедились, выполнив тестирование совместимости. В таких ситуациях вам следует выбирать шрифты практически с одинаковым соотношением, чтобы избежать разницы в размере. Это руководство по кросс-браузерному тестированию в старых браузерах также может помочь.
Надеемся, вы нашли эту статью информативной. Если у вас есть какие-либо вопросы, не стесняйтесь задать их в разделе комментариев ниже. Если вам понравилась эта статья, поделитесь ею в социальных сетях, чтобы помочь другим найти ее. На этом пока все. Удачного тестирования!
Автор: Nimritee
Источник: www.lambdatest.com
Редакция: Команда webformyself.