Бармалей · 02.03.2014 · 01:00 ••• Обновление: 21.12.2023 · 14:15
0Актуализированный репринт авторской статьи с форума Ru-Board • [веб-архив] Бережём глаза: устраняем проблему с рендерингом шрифтов
Суть проблемыСамостоятельно по проблеме можно погуглить как-то так… При отрисовке страниц в хром-браузерах (и не только в них) происходит искажение шрифтов вплоть до невозможности нормально читать текст (другие примеры самостоятельно ищем в этой теме на форуме Ru-Board или как-то так). Проблема может проявляться на самых разных версиях браузера, на разных ОС и в целом не зависит от используемого железа. Причём, существенную роль играет именно конкретная комбинация браузера/ОС/железа и видеодрайверов. Как предполагается, "корень зла" кроется именно в некорректности отрисовки веб-страниц самим движком браузера, в частности – из-за неправильного рендеринга шрифтов. При этом на тех же аппаратных/программных конфигурациях проблема не наблюдается* в браузерах на движках Gecko/Trident (Firefox/MSIE). В одном из блинк-браузеров разработчики эту проблему успешно решили (проверено – настройки рендеринга реально работают), для остальных же возможны несколько путей её решения на уровне конечного пользователя. Способы решенияВозможны "глобальные" (на уровне системы) и чисто браузерные варианты решений. Первые влияют на отрисовку шрифтов во всех приложениях вашей системы и не всегда/всем подходят. Вторые, сугубо имхо, менее интересны – при смене версии движка вполне возможно, что рендеринг шрифтов опять станет некорректным. Поэтому окончательное решение о выборе конкретного метода(ов) вы должны принять самостоятельно, исходя только из ваших конкретных условий. И вполне возможно, что потребуется применить комбинацию различных вариантов для достижения наилучшего результата. 1. На уровне системы"Системные" варианты больше относятся к ЖК-мониторам, т.к. ЭЛТ менее чувствительны в этом отношении. а) Изменение настроек сглаживания экранных шрифтовКритично для ЖК-мониторов (пост). Для WinXP: Свойства экрана – Оформление – Эффекты – галка "метод сглаживания" + выбор самого метода. Для сравнения: вот так выглядит заголовок страницы-примера [веб-архив] в хром-браузере БЕЗ сглаживания: Для Windows XP/Vista см.также: б) Переустановка драйвера видеокарты1 и/или изменение2 его настроек1. Не забываем, что самый свежий не обязательно самый лучший.) в) Установка другого разрешения экрана и/или масштабного коэффициента системных шрифтовНе забываем также о единственном "родном" разрешении для ЖК-мониторов! г) Установка специальных "сглаженных" шрифтов + настройка браузера на их использованиеПромежуточный "системно-браузерный" метод. Рекомендация найдена тут, "гладкий" шрифт брать там же. Возможно также применение (по аналогии) SVG-шрифтов, но я не пробовал. В общем, "тюнинговать" можно до синего…) 2. На уровне браузера – все версииВ хром-браузерах все изменения видны сразу же, поэтому не ленитесь подобрать параметры, наиболее подходящие именно вам. а) Изменение дефольтных размеров/гарнитуры шрифтов в настройкахНастройки – Доп.настройки – Веб-контент – Настроить шрифты Общий совет при этом – не устанавливайте слишком мелкие (и/или нечётные) значения, это может привести к искажениям из-за единственного "родного" разрешения для ЖК-мониторов (выше уже было предупреждение, но в данном случае имеет смысл сделать на этом особый акцент). Изменения качества шрифтов можно оценить сразу же, без необходимости перезагрузки браузера. б) Использование и подбор параметров в файле custom.css для своего профиляОбсуждение отсюда и далее, есть похожий вариант. Теория описана здесь. Варианты рассмотрены в этой статье, а также здесь и здесь. Работает хорошо, но не всегда устраняет проблему. Кроме того, в последних версиях хрома эту фичу отключили, поэтому придётся использовать следующий пункт. Пример подобного глобального CSS-правила: html, body {
-webkit-font-smoothing: subpixel-antialiased ;
-webkit-text-stroke-width: 0 ;
text-shadow: 0 0 0 ;
}
Можно менять оба параметра сглаживания, подбирая их под себя: первый – text-stroke-width или ширина размытия – крутим вплоть до сотых, второй – text-shadow, параметры тени символов – в единицах и десятых долях пикселей, можно ещё "поиграть" и цветом тени, добавив к этому же параметру, например, #888 (для вот такого серого цвета). Для лучшего понимания смотрим также общую "матчасть" по этим правилам на портале MDN: Для гарантированного срабатывания стилей также можно добавить параметр !important к каждому из элементов стиля, однако, в общем случае это может привести к искажениям шрифтового дизайна на некоторых сайтах (если такие фильтры применяются для создания специальных эффектов). В общем, всегда есть простор для экспериментов… :) Кстати сказать, на этом (и других) сайтах Проекта Good CRX как раз применяется данный метод сглаживания, так что вы можете самостоятельно попробовать прямо здесь изменить его параметры и оценить разницу в отрисовке ширфтов (меняем в консоли браузера, стиль для элемента <body>):
в) Установка расширений, меняющих отображение страниц с помощью CSSМожно подобрать подходящее или сразу использовать "классику" вроде Stylish. А вот тут (и здесь) рекомендуют ещё вот такой (0.1.3, CRX, OWS) "оперный" аддон (как ставить в хром-браузере – читаем здесь). г) Использование функции "Субпиксельное сглаживание текста" и других подобных настроекНастройка* меняет контрастность текста и находится здесь: chrome://flags/#lcd-text-aa, одно из обсуждений – отсюда и далее, ещё одно – здесь и далее. Для этой же цели можно применять и другие подходящие ключи ли флаги, присутствующие в более новых версиях браузеров. Единственно, что огорчает – эти параметры периодически* "отламывают" или изменяют (в зависимости от версии), поэтому следует проверять, есть ли такие настройки именно в вашей версии. * В некоторых случаях можно "придержать" этот процесс, применяя "антидеприкаторы" (специальные настройки флагов, разрешающие применение устаревших параметров в виде ключей). Например, такие существует в 7х/8х версиях (последние цифры могут меняться, но общий смысл этих флагов одинаков): В частности, для улучшения отображения шрифтов также можно использовать и флаг Кроме того, можно попробовать и другие флаги и ключи: д) Изменение масштаба отображения страниц по умолчаниюКрайняя мера, но иногда помогает, если не все шрифты и не на всех сайтах отображаются корректно при 100%-м масштабе. Изменённый масштаб запоминается для сайта, кроме того можно использовать подходящие аддоны с гибкими настройками. См.также: проблемы отображения шрифтов и их зависимости от настроек* в современных Chromium-браузерах 3. На уровне браузера – версии 33 и новееПохоже, разработчики "осознали" и понемногу дело двигается: читаем тут и там. Также смотрим "хау-ту" здесь (на басурманском) или тут (на русском). а) Использование функции DirectWrite (в версиях 33–52)Работает на Windows Vista и новее. Флаг настроек (и соответствующие ключи) удалены с июня 2016 года, но сохранены разработчиками в некоторых современных версиях китайских хромоклонов (360 Extreme Eplorer и др.).
Настройка* находится здесь: chrome://flags/#enable-direct-write. По чисто субъективному мнению, корявости в шрифтах этот метод тоже может добавить… Следует помнить также, что: Что в итоге
…И даже если "у меня и так всё хорошо, а всё, что тут написано – бред и чушь", не ленитесь поэкспериментировать. Почитать по теме
|
| Всего комментариев: 0 |