CSS font-size-adjust Property
The font-size-adjust property gives you better control of the font size when the first selected font is not available.
When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use the font-size-adjust property.
All fonts have an «aspect value» which is the size-difference between the lowercase letter «x» and the uppercase letter «X».
When the browser knows the «aspect value» for the first selected font, the browser can figure out what font-size to use when displaying text with the second choice font.
| Default value: | none |
|---|---|
| Inherited: | yes |
| Animatable: | yes. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.fontSizeAdjust=»0.58″ Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Syntax
Property Values
| Value | Description |
|---|---|
| number | Defines the aspect value to use |
| none | Default value. No font size adjustment |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
font-size-adjust
The font-size-adjust CSS property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).
The property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. Legibility can become an issue when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).
To use this property in a way that is compatible with browsers that do not support font-size-adjust , it is specified as a number that the font-size property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, consider this style sheet:
font-size: 14px; font-size-adjust: 0.5;
It is really specifying that the lowercase letters of the font should be 7px high (0.5 × 14px). This will still produce reasonable results in browsers that do not support font-size-adjust , where a 14px font will be used.
Syntax
/* Use the specified font size */ font-size-adjust: none; /* Use a font size that makes lowercase letters half the specified font size */ font-size-adjust: 0.5; /* Two values - added in the Level 5 spec */ font-size-adjust: ex-height 0.5; /* Global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: revert; font-size-adjust: revert-layer; font-size-adjust: unset;
Values
Choose the size of the font based only on the font-size property.
ex-height | cap-height | ch-width | ic-width | ic-height
Specifies the font metric to normalize on. Defaults to ex-height . One of:
Normalize the aspect value of the fonts, using the x-height divided by the font size.
Normalize the cap-height of the fonts, using the cap-height by the font size.
Normalize the horizontal narrow pitch of the fonts, using the advance width of «0» (ZERO, U+0030) divided by the font size.
Normalize the horizontal wide pitch of the font, using the advance width of «水» (CJK water ideograph, U+6C34) divided by the font size.
Normalize the vertical wide pitch of the font, using the advance height of «水» (CJK water ideograph, U+6C34) divided by the font size.
Choose the size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the font-size .
The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice font-family . This means that the first-choice font, when available, will appear the same size in browsers, whether or not they support font-size-adjust .
0 yields text of zero height (hidden text).
Formal definition
Как автоматически настроить размер шрифта с помощью 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 указывает желаемую высоту глифов на основе шрифта. Для масштабируемого шрифта применяется коэффициент для вычисления размера шрифта. Однако для немасштабируемого шрифта абсолютная единица размера шрифта соответствует установленному размеру шрифта.
Онлайн курс по JavaScript
Научитесь создавать приложения со сложными интерфейсами
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
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 другого шрифта.
На изображении выше к тексту слева был применен шрифт 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.
Примечание. Установка слишком высокой высоты строки может привести к наложению строк текста.