Font size adjust: font-size-adjust — CSS: Cascading Style Sheets

CSS font size adjust

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯

Пример

При указании свойства Font-readjust (размер шрифта) браузер будет изменять размер шрифта одинаково независимо от семейства шрифтов («Verdana» имеет значение аспекта 0,58)

div {
    font-size-adjust: 0.58;
}

Определение и использование

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

Если шрифт недоступен, обозреватель использует второй указанный шрифт. Это может привести к большим изменениям размера шрифта. Чтобы предотвратить это, используйте свойство font-size-adjust.

Все шрифты имеют «значение аспекта», которое является размер-разница между строчной буквы «x» и прописной буквы «x».

Когда браузер знает «значение аспекта» для первого выбранного шрифта, обозреватель может выяснить, какой размер шрифта для использования при отображении текста со вторым шрифтом выбора.

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Синтаксис

font-size-adjust: number|none|initial|inherit;

Значения свойств

Значение	Описание
number	Определяет используемое значение аспекта
none	Значение по умолчанию. Нет регулировки размера шрифта
initial	Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit	Наследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

HTML DOM Справочник: fontSizeAdjust Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

Свойство font-size-adjust — контроль размера шрифта

Свойство font-size-adjust позволяет контролировать размер шрифта, при неизменном font-size (увеличивать или уменьшать).

Применение: пусть в font-family задано два шрифта через запятую, например, Georgia, «Times New Roman». Пусть на компьютере пользователя нет шрифта Georgia — в этом случае применится «Times New Roman». Однако, нас ждет проблема — при одинаковом значении font-size шрифты будут выглядеть по-разному. В примере ниже обоим абзацам задан font-size в 16px, но разные font-family. Посмотрите, как отличаются размеры:

<p> Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet. </p>

:

Это происходит из-за того, что отображаемый размер шрифта зависит в большей степени не от свойства font-size, которое определяет лишь общий размер шрифта, а от соотношения значений свойства font-size и величины x-height (x-height — это разница между размером строчной буквы «x» и прописной буквы «X» для определенного шрифта).

Это соотношение называется аспектом шрифта и рассчитывается по формуле: аспект = font-size / x-height.

Проблему размеров решает свойство font-size-adjust (оно позволяет менять аспект шрифта), которое заставит выглядеть второй шрифт такого же размера, как и первый.

Давайте сделаем так, чтобы шрифт Times New Roman был такого же размера, как и

Установим font-size-adjust для текста с Times New Roman в значение 0.5 и увидим, что второй текст стал такого же размера, как и первый:

<p> Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet. </p>

:

Синтаксис

селектор { font-size-adjust: число | none; }

Значения

Значение	Описание
Число	Число задает аспект шрифта.
none	Нет регулировки размера шрифта.

Значение по умолчанию: none.

Как определить значение аспекта для шрифта?

Посмотрите отрывок из спецификации W3C: Коэффициент пропорциональности (аспект) для выбранных шрифтов может быть высчитан путем сравнения одного и того же текста, но с разным значением font-size-adjust. Если значение свойства font-size-adjust подобрано верно, то при одинаковом размере шрифта текст останется неизменным для всех используемых на странице шрифтов.

Привожу известные мне значения аспекта для некоторых шрифтов: Georgia — 0.5, Times New Roman — 0.46, Verdana — 0.58.

Пример

Сравните как выглядит текст с разным значением font-size-adjust и одинаковом font-size и font-family:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.

:

Пример . Применение в реальной жизни

Код ниже делает так, чтобы в случае отсутствия на компьютере у пользователя шрифта Georgia, применившийся шрифт Times New Roman был такого же размера, как и Georgia:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire aenean a dapibus magna, ac interdum nisl suspendisse egetile. </p>p { font-size: 16px; font-family: Georgia, "Times New Roman"; font-size-adjust: 0.5; }

:

font-size-adjust — CSS: Каскадные таблицы стилей

Свойство CSS font-size-adjust

 /* Использовать указанный размер шрифта */
настройка размера шрифта: нет;
/* Используйте размер шрифта, который делает строчные буквы
   буквы половины указанного размера шрифта */
настройка размера шрифта: 0,5;
/* Два значения — добавлены в спецификации уровня 5 */
настройка размера шрифта: экс-высота 0,5;
/* Глобальные значения */
настройка размера шрифта: наследовать;
настройка размера шрифта: начальный;
настройка размера шрифта: вернуться;
настройка размера шрифта: восстановить слой;
настройка размера шрифта: не установлено;
 

Свойство полезно, поскольку разборчивость шрифтов, особенно малых размеров, больше определяется размером строчных букв, чем размером прописных. Разборчивость может стать проблемой, когда первое выбранное семейство шрифтов недоступно, а его замена имеет значительно другое соотношение сторон (отношение размера строчных букв к размеру шрифта).

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

 размер шрифта: 14 пикселей;
настройка размера шрифта: 0,5;
 

Это действительно указывает, что строчные буквы шрифта должны быть 7px в высоту (0,5 × 14px). Это по-прежнему будет давать приемлемые результаты в браузерах, не поддерживающих font-size-adjust , где будет использоваться шрифт 14px .

Значения

нет

Выберите размер шрифта на основе только свойства font-size .

экс-высота | высота крышки | ch-ширина | ic-ширина | ic-высота

Указывает метрику шрифта для нормализации. По умолчанию ex-height . Один из:

экс-высота

Нормализуйте значение аспекта шрифтов, используя высоту x, деленную на размер шрифта.

высота крышки

Нормализуйте высоту заглавных букв шрифтов, используя высоту заглавных букв по размеру шрифта.

ширина канала

Нормализуйте горизонтальный узкий шаг шрифтов, используя переднюю ширину «0» (ZERO, U+0030), деленную на размер шрифта.

ic-ширина

Нормализуйте ширину шрифта по горизонтали, используя предварительную ширину «水» (водная идеограмма CJK, U+6C34), деленную на размер шрифта.

ic-высота

Нормализуйте ширину шрифта по вертикали, используя предварительную высоту «水» (водная идеограмма CJK, U+6C34), деленную на размер шрифта.

<номер>

Выберите размер шрифта таким образом, чтобы строчные буквы (определяемые высотой x шрифта) были в указанное число раз больше размера шрифта .

Указанное число обычно должно быть соотношением сторон (отношение x-высоты к размеру шрифта) первого выбора font-family . Это означает, что шрифт первого выбора, когда он доступен, будет отображаться в браузерах того же размера, независимо от того, поддерживают ли они font-size-adjust .

0 дает текст нулевой высоты (скрытый текст).

 настройка размера шрифта = 
 нет | 
 <число [0,∞]> 

Настройка размера строчных букв

HTML

 

  В этом тексте используется шрифт Times (10 пикселей), который трудно читать при маленьком размере. 


  В этом тексте используется шрифт Verdana (10 пикселей), который имеет относительно большие строчные буквы.
  буквы.


  Это 10px Times, но теперь настроено на то же соотношение сторон, что и
  Вердана.

 

CSS

 .times {
  семейство шрифтов: Times, с засечками;
  размер шрифта: 10 пикселей;
}
.вердана {
  семейство шрифтов: Verdana, без засечек;
  размер шрифта: 10 пикселей;
}
.adjtimes {
  семейство шрифтов: Times, с засечками;
  настройка размера шрифта: экс-высота 0,58;
  размер шрифта: 10 пикселей;
}
 

Результаты

 настройка размера шрифта: номер|нет|начальный|наследовать;