Безопасно ли использовать правило CSS «рендеринг текста: optimizelegibility;»на весь текст?

Question

Я заметил, что у этой woo theme , например, она установлена ​​на HTML-тэге, и, следовательно, она установлена ​​для всего текста сайта. Я читал, что это может вызвать проблемы с производительностью, но это было некоторое время назад. Некоторые люди предлагали только добавить его в заголовки и большой текст.

Изменились ли сейчас правила? Браузеры хорошо работают с ним?

Answer 1

Нет: на разных платформах за многие годы было много ошибок, из-за которых текст не отображался или отображался неправильно (см. Ниже).Если ваша цель - включить лигатуры, на самом деле есть стандартное свойство 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 и общие проблемы с производительностью

Answer 2

со страницы MDN для рендеринга текста , последнее обновление: 18: 27, 29 апреля 2012 , на нем написано:

Рендеринг текстаСвойство CSS предоставляет движку рендеринга информацию о том, что оптимизировать при рендеринге текста.Браузер делает компромисс между скоростью, удобочитаемостью и геометрической точностью.Свойство text-render - это свойство SVG, которое не определено ни в одном стандарте CSS.Однако браузеры Gecko и WebKit позволяют применять это свойство к содержимому HTML и XML в Windows, Mac OS X и Linux.

, что говорит нам о том, что он не определен ни в одном стандарте CSS, что приводит к кросс-браузерным проблемам, как видно из таблицы Совместимость браузера .

По умолчанию

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

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

Answer 3

text-rendering: optimizeLegibility; был использован в одном из наших веб-приложений. он корректно отображается во всех браузерах, кроме одного - chrome (64) в Windows 7.

Пришлось удалить свойство, так как большинство наших конечных пользователей были из этой категории.

Answer 4

Я только что исправил ошибку, из-за которой Chrome отказывался отображать веб-шрифты (он всегда возвращался к не-веб-, без какой-либо причины, которую мы могли бы различить).В конце концов - после значительного количества царапин на голове - проблема была исправлена ​​установкой рендеринга текста с optimizeLegibility (который был установлен Twitter Bootstrap, насколько это возможно) на auto.

Итак, я бы сказал, что на данный момент ответ, вероятно, "нет".Что не означает, не используйте его, но не применяйте его ко всему.Используйте его там, где это необходимо, и тщательно проверяйте его на наличие странностей или неожиданных эффектов (особенно в Chrome!).

Answer 5

при использовании «text-render: optimizelegibility» также вызывает ошибки рендеринга в родном браузере Android (4.2 и 4.3). Если вы используете этот атрибут в сочетании с загрузкой новых шрифтов через @ font-face , шрифт не будет отображаться вообще (только резерв). без «text-render: optimizelegibility» и @ font-face шрифт загружается и отображается как положено.

Answer 6

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

Если вам подходит Javascript, Kerning.js выглядит многообещающе, подход на основе javascript для кернинга и размещения пар кернингана Github.

http://kerningjs.com

Также стоит отметить, что если вы серьезно относитесь к типографике, есть бесплатные шрифты Font Squirrel.

http://www.fontsquirrel.com