Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

От автора: многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт 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 указывает желаемую высоту глифов на основе шрифта. Для масштабируемого шрифта применяется коэффициент для вычисления размера шрифта. Однако для немасштабируемого шрифта абсолютная единица размера шрифта соответствует установленному размеру шрифта.

Синтаксис:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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 указывает, что размер шрифта элемента необходимо изменить на основе высоты строчных букв, а не максимума прописных букв.

Синтаксис:

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 другого шрифта.

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

На изображении выше к тексту слева был применен шрифт Comic Sans со значением аспекта 0,53. Напротив, текст с правой стороны был использован со шрифтом Calibri, который имеет значение аспекта 0,47. Это дает очень мелкий текст. В нижней строке был применен параметр font-size-adjust, равный 0,53, из-за чего размер шрифта на нижней стороне теперь изменен в соответствии с указанным соотношением сторон.

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Значение свойства 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.

Примечание. Установка слишком высокой высоты строки может привести к наложению строк текста.

Пример

Совместимость с браузерами

Давайте поговорим о поддержке 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.

Ниже приведена таблица, в которой перечислены основные браузеры вместе с версиями, поддерживающими эту функцию:

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

Проверка размера шрифта в браузерах

С помощью LambdaTest вы можете легко проверять размер шрифта в браузерах на настольных и мобильных устройствах, выполняя кросс-браузерное тестирование совместимости. На скриншотах ниже мы реализуем свойство font-size-adjust на платформе Netlify и попытаемся получить к нему доступ в разных браузерах.

Войдите в панель управления LambdaTest. Вы можете бесплатно зарегистрироваться здесь.

Выберите «Тестирование в реальном времени» и оптимизируйте нужные конфигурации.

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

Предварительный просмотр CSS font-size-adjust в несовместимом и совместимом браузере.

Google Chrome (несовместимый)

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

Firefox (совместимый)

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

С помощью функции тестирования в реальном времени, доступной на платформе LambdaTest, вы можете выполнить кросс-браузерное тестирование и проверить его совместимость с CSS font-size-adjust.

Заключение!

Теперь вы, возможно, имеете представление о том, что делает свойство CSS font-size-adjust, почему оно важно, и как определить значение аспекта для различных шрифтов.

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

Надеемся, вы нашли эту статью информативной. Если у вас есть какие-либо вопросы, не стесняйтесь задать их в разделе комментариев ниже. Если вам понравилась эта статья, поделитесь ею в социальных сетях, чтобы помочь другим найти ее. На этом пока все. Удачного тестирования!

Автор: Nimritee

Источник: www.lambdatest.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.