Лигатуры в CSS

Лигатуры в CSS

Проблема

Так же как и люди, не все глифы хорошо уживаются вместе. Взять, например, символы f и i в большинстве шрифтов с засечками. Точка, принадлежащая символу i, часто налезает на верхний выносной элемент символа f, из-за чего эта пара выглядит некрасиво (первый пример на рисунке). Чтобы устранить это недоразумение, в дизайн шрифтов часто включают дополнительные глифы, называемые лигатурами.

Это индивидуально разработанные пары и тройки глифов, которые программа набора текста автоматически подставляет, когда соответствующие символы находятся друг рядом с другом. Например, на рисунке вы видите несколько распространенных лигатур. Обратите внимание, насколько лучше они смотрятся, чем просто находящиеся рядом эквивалентные глифы.

лигатуры в css

 

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

В действительности до недавнего времени единственным способом задействовать любую лигатуру было добавление в код эквивалентного символа Unicode: например,  fi для лигатуры fi. Но этот метод создает больше проблем, чем решает:
очевидно, что разметку становится трудно читать и еще сложнее писать (попробуйте догадаться, что за слово кроется в шифре  define !);
если текущий шрифт не включает символ для данной лигатуры, то результат начинает смахивать на анонимки из вырезанных газетных букв не для каждой лигатуры существует эквивалентный стандартизированный символ Unicode.

Например, лигатуре ct не  соответствует никакой символ Unicode, и в любых шрифтах, включающих ее, этот символ должен быть помещен в блок Unicode PUA (Private User Area, область частного использования); это снижает доступность текста, в том числе для копирования и вставки, поиска и программ голосового чтения экрана.

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

Многие приложения достаточно умны, чтобы правильно обрабатывать такие символы, но далеко не все. Поиск может даже сломаться в некоторых браузерах. Определенно, в наше время должен существовать способ получше!

Решение

В CSS 3 старое доброе свойство  font-variant было преобразовано в сокращение, включающее множество новых полных свойств. Одно из них — это  font-variant-ligatures , разработанное специально с цельювключения и выключения лигатур. Для того чтобы включить все возможные лигатуры, необходимо использовать три идентификатора: font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

Это свойство наследуется. Если вы вдруг обнаружите, что дискретные лигатуры ухудшают читабельность, то можете выключить только их. Для этого используйте: font-variant-ligatures: common-ligatures; Вы можете даже явно выключить оставшиеся два типа: font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures;font-variant-ligatures также принимает значение  none , которое отключает любые типы лигатур.

Не используйте  none , если только у вас нет абсолютного понимания того, что вы делаете. Чтобы сбросить  font-variant-ligatures до первоначального значения, следует использовать  normal , а не  none.


ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/ligatures

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: