Малоизвестное свойство CSS3, зависящее от размера шрифта

Когда-либо хотели использовать резервные шрифты на вашем CSS с разными пропорциями без их огромного (или крошечного)? Возможно, это сверкающее новое свойство CSS- font-size-adjust CSS3.

Что такое font-size-adjust ?

Во-первых, позвольте мне предупредить вас: вам нужно будет использовать Firefox для правильного просмотра примеров на этой странице. Да, не Safari, Firefox!

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

Взгляните на изображение ниже:

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

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

Не путайте font-size-adjust с помощью -webkit-text-size-adjust , который используется для указания регулировки размера текста на iPhone.

Как определить правильное значение font-size-adjust

Пример спецификации W3C очень прост:

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

Я собираюсь в основном повторить свой пример здесь.

Давайте рассмотрим следующий код, в котором у нас есть параграф с двумя span .

CSS:

1
2
3
4
5
p { font-family:Times New Roman; font-size:400px; }
             
span { border:solid 1px red; }
             
.adjust { font-size-adjust:0.5; }

HTML:

1
<p><span>a</span><span class="adjust">a</span></p>

Оба span s наследуют семейство font-family от его родителя (элемент p ), но второй span имеет свойство font-size-adjust применяемое к нему, со случайным значением .

Если вы посмотрите на примерную страницу , посмотрите на пример слева: красные поля не соответствуют размеру по высоте - неправильное значение font-size-adjust .

[Делают ли все окна на странице примера одинаковой высоты? Что я говорил? Fire Fox…]

После нескольких экспериментов я пришел к значению «0,455». Теперь вот CSS для второго примера (справа):

CSS:

1
2
3
4
5
p { font-family:Times New Roman; font-size:400px; }
             
span { border:solid 1px green; }
             
.adjust { font-size-adjust:0.455; }

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

Пример

Вот быстрый пример, который я создал, чтобы показать это, работая над фактическим текстом.

Стек шрифта состоит из: Calibri, Lucida Sans и Verdana (и это порядок, по которому шрифты отображаются на странице).

Отображение страницы Safari:

И Firefox:

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

Я не заинтересован в выравнивании текста, цель этого примера - показать, как font-size-adjust может повлиять на согласованность размера шрифта и четкости шрифта .

Кроме того, хотя первый div имеет правильный стек шрифта, мне пришлось вручную указать Lucida Sans и Verdana для других div s, поэтому вы (и я) можете увидеть разницу, даже если у нас установлены все три шрифта.

Последние комментарии

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

Признаюсь, я еще не тестировал его в «реальном» проекте, поэтому я был бы рад услышать ваши мысли.

На данный момент это поддерживается только Firefox для Windows от версии 1.0 и от 3.0 на всех платформах. Для исправления этой проблемы есть ошибка, поданная для Webkit .

Ссылки и дальнейшее чтение