Лигатуры в CSS

Оцените материал
(0 голосов)

Проблема

Так же как и люди, не все глифы хорошо уживаются вместе. Взять, например, символы 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

Десерт на сегодня - видео про то, как ребята не совсем удачно искупались

Прочитано 393 раз Последнее изменение Воскресенье, 09 апреля 2017 13:54
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+