Я заметил эту тему woo, например, она установлена в теге HTML, и поэтому весь текст сайта установлен. Я читал, что это может вызвать проблемы с производительностью, но это было давно. Некоторые люди предлагали добавить его только в заголовки и большой текст.
Теперь изменились ли правила? Работают ли браузеры с ним?
Нет. На протяжении многих лет на разных платформах было много ошибок, из-за которых текст не отображался или отображался некорректно (см. ниже). Если ваша цель - включить лигатуры, на самом деле существует стандартное свойство font-variant-ligatures, определенное в CSS-шрифты уровня 3, который предлагает полный контроль:
font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
См. font-variant для других типографских функций, которые могут быть включены, например, маленькие шапки, альтернативные формы букв и т.д.
До font-variant-ligatures и связанные с ним свойства были добавлены, более старое свойство font-feature-settings разрешило включить ту же функцию. Это интерфейс более низкого уровня и больше не рекомендуется, за исключением включения функций OpenType, которые не имеют интерфейса более высокого уровня.
http://blog.fontdeck.com/post/15777165734/opentype-1 имеет простой пример:
h1 {
-webkit-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-ms-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
}
http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/ также обсуждается.
Популярный проект HTML5 Boilerplate удалил его два года назад из-за различных проблем с рендерингом:
https://github.com/h5bp/html5-boilerplate/issues/78
Две ошибки Chromium, которые я только что установил сегодня утром, заставили Chrome 21 в Windows XP либо вообще не выполнять подстановку шрифтов, отображая символ отсутствующего символа, а не используя один из другого шрифта и отображая текст, неправильно перекрывающий другие элементы:
http://code.google.com/p/chromium/issues/detail?id=114719
http://code.google.com/p/chromium/issues/detail?id=149548
См. http://aestheticallyloyal.com/public/optimize-legibility/ для нескольких других проблем.
http://bocoup.com/weblog/text-rendering/ отмечены проблемы совместимости с Android и общие проблемы с производительностью
на странице MDN text-rendering, последний раз обновленный 18:27, 29 апреля 2012 года, он гласит:
Свойство CSS-рендеринга текста предоставляет информацию движку рендеринга о том, что нужно оптимизировать для рендеринга текста. Браузер делает компромисс между скоростью, четкостью и геометрической точностью. Свойство text-rendering является свойством SVG, которое не определено ни в одном стандарте CSS. Однако браузеры Gecko и WebKit позволяют применять это свойство к HTML и XML-контенту в Windows, Mac OS X и Linux.
который говорит нам, что он не определен ни в одном стандарте CSS, что приводит к проблемам с кросс-браузером, как показано в таблице Совместимость с браузером.
По умолчанию
Браузер дает обоснованные предположения о том, когда следует оптимизировать скорость, четкость и геометрическую точность при рисовании текста.
Итак, можно с уверенностью предположить, что лучший вариант - позволить браузеру заботиться о таких деталях, поскольку эта функция не является стандартом (пока), и большинство браузеров ее не поддерживают.
text-rendering: optimizeLegibility; был использован в одном из наших веб-приложений. он отображается правильно во всех браузерах, кроме одного - хром (64) на окнах 7.
Пришлось удалить свойство, так как большинство наших конечных пользователей были из этой категории.
Я только что исправил ошибку, в которой Chrome отказывался отображать веб-шрифты (он всегда возвращался к не-веб-интерфейсу, без каких-либо причин, которые мы могли бы различить). В конце - после значительного количества царапин на голове - проблема была устранена установкой текстового рендеринга из optimizeLegibility (который был установлен Twitter Bootstrap, для чего он стоит) до auto.
Поэтому я бы сказал, что на данный момент ответ, вероятно, "нет". Это не значит, что не используйте его, но не применяйте его ко всему. Используйте его там, где это необходимо, и тщательно проверяйте его на странности или неожиданные эффекты (особенно в Chrome!).
использование "text-rendering: optimizelegability" также вызывает ошибки рендеринга в собственном браузере Android (4.2 и 4.3). Если вы используете этот атрибут в сочетании с загрузкой новых шрифтов с помощью @font-face, шрифт не будет отображаться вообще (только резервное копирование). без "text-rendering: optimizelegability" и @font-face для загрузки шрифтов и отображается как ожидалось.
Текстовый рендеринг CSS выглядит шатким. Вместо того, чтобы время шлифования с плохим свойством CSS, возможно, стоит пойти с этим...
Если Javascript является для вас вариантом, Kerning.js выглядит многообещающим, javascript-подход к парам кернинга и кернинга, размещенным на Github.
Также стоит отметить, что если вы серьезно относитесь к типографии, есть веб-шрифты Font Squirrel free use.