Актуализированный репринт авторской статьи с форума Ru-Board • [веб‑архив] Дата публикации: 02.03.2014. Последнее изменение на форуме: 12.03.2019. ★ Материал репринта обновлён, дополнен и исправлен по состоянию на 21.12.2023.
Самостоятельно по проблеме можно погуглить как-то так…
При отрисовке страниц в хром‑браузерах (и не только в них) происходит искажение шрифтов вплоть до невозможности нормально читать текст (другие примеры самостоятельно ищем в этой теме на форуме Ru‑Board или как‑то так).
Проблема может проявляться на самых разных версиях браузера, на разных ОС и в целом не зависит от используемого железа. Причём, существенную роль играет именно конкретная комбинация браузера/ОС/железа и видеодрайверов.
Как предполагается, "корень зла" кроется именно в некорректности отрисовки веб‑страниц самим движком браузера, в частности – из-за неправильного рендеринга шрифтов. При этом на тех же аппаратных/программных конфигурациях проблема не наблюдается* в браузерах на движках Gecko/Trident (Firefox/MSIE). * На момент публикации статьи проверялось в браузерах SRWare Iron-30, MSIE-8, Firefox-25.
В одном из блинк‑браузеров разработчики эту проблему успешно решили (проверено – настройки рендеринга реально работают), для остальных же возможны несколько путей её решения на уровне конечного пользователя.
Возможны "глобальные" (на уровне системы) и чисто браузерные варианты решений. Первые влияют на отрисовку шрифтов во всех приложениях вашей системы и не всегда/всем подходят. Вторые, сугубо имхо, менее интересны – при смене версии движка вполне возможно, что рендеринг шрифтов опять станет некорректным.
Поэтому окончательное решение о выборе конкретного метода(ов) вы должны принять самостоятельно, исходя только из ваших конкретных условий. И вполне возможно, что потребуется применить комбинацию различных вариантов для достижения наилучшего результата.
"Системные" варианты больше относятся к ЖК‑мониторам, т.к. ЭЛТ менее чувствительны в этом отношении.
Критично для ЖК-мониторов (пост).
Для WinXP: Свойства экрана – Оформление – Эффекты – галка "метод сглаживания" + выбор самого метода. Помним, что иногда наоборот помогает выключение сглаживания (как это сделать в Win7).
Для сравнения: вот так выглядит заголовок страницы-примера [веб-архив] в хром‑браузере БЕЗ сглаживания: [Копия скриншота] и вот так со влюченным сглаживанием: [Копия скриншота]
Для Windows XP/Vista см.также: • Windows ClearType Tuner – ActiveX-плагин для оперативной подстройки параметров ClearType (через IE) • ClearType Tuner PowerToy (архив 7.4.262.0, выпилено) – утилита для модификации настроек ClearType
1. Не забываем, что самый свежий не обязательно самый лучший.) 2. В некоторых драйверах есть возможность регулировки/настройки сглаживания для конкретных приложений/программ.
Не забываем также о единственном "родном" разрешении для ЖК‑мониторов!
Промежуточный "системно‑браузерный" метод. Рекомендация найдена тут, "гладкий" шрифт брать там же. Возможно также применение (по аналогии) SVG‑шрифтов, но я не пробовал. В общем, "тюнинговать" можно до синего…)
В хром-браузерах все изменения видны сразу же, поэтому не ленитесь подобрать параметры, наиболее подходящие именно вам.
Настройки – Доп.настройки – Веб‑контент – Настроить шрифты
Общий совет при этом – не устанавливайте слишком мелкие (и/или нечётные) значения, это может привести к искажениям из-за единственного "родного" разрешения для ЖК‑мониторов (выше уже было предупреждение, но в данном случае имеет смысл сделать на этом особый акцент).
Изменения качества шрифтов можно оценить сразу же, без необходимости перезагрузки браузера.
Обсуждение отсюда и далее, есть похожий вариант. Теория описана здесь. Варианты рассмотрены в этой статье, а также здесь и здесь. Работает хорошо, но не всегда устраняет проблему. Кроме того, в последних версиях хрома эту фичу отключили, поэтому придётся использовать следующий пункт.
Пример подобного глобального 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: font-smooth -webkit-text-stroke-width text-shadow.
Для гарантированного срабатывания стилей также можно добавить параметр !important к каждому из элементов стиля, однако, в общем случае это может привести к искажениям шрифтового дизайна на некоторых сайтах (если такие фильтры применяются для создания специальных эффектов). В общем, всегда есть простор для экспериментов… :)
Кстати сказать, на этом (и других) сайтах Проекта Good CRX как раз применяется данный метод сглаживания, так что вы можете самостоятельно попробовать прямо здесь изменить его параметры и оценить разницу в отрисовке ширфтов (меняем в консоли браузера, стиль для элемента <body>):
Можно подобрать подходящее или сразу использовать "классику" вроде Stylish. А вот тут (и здесь) рекомендуют ещё вот такой (0.1.3, CRX, OWS) "оперный" аддон (как ставить в хром‑браузере – читаем здесь). UPD-1: появился также хромо‑форк этого аддона, спасибы и пиво – камраду Gideon Vi за наводку.) UPD-2: есть и ещё одно подобное расширение, спасибы и пиво – камраду Petrovic82 за наводку.)
Настройка* меняет контрастность текста и находится здесь: chrome://flags/#lcd-text-aa, одно из обсуждений – отсюда и далее, ещё одно – здесь и далее. * …или соответствующий ключ запуска в ком.строке: --enable-lcd-text (или --disable-lcd-text – если не понравилось.) Не факт, что эта настройка "всё починит", исходите из чисто субъективного восприятия.
Для этой же цели можно применять и другие подходящие ключи ли флаги, присутствующие в более новых версиях браузеров. Единственно, что огорчает – эти параметры периодически* "отламывают" или изменяют (в зависимости от версии), поэтому следует проверять, есть ли такие настройки именно в вашей версии.
* В некоторых случаях можно "придержать" этот процесс, применяя "антидеприкаторы" (специальные настройки флагов, разрешающие применение устаревших параметров в виде ключей). Например, такие существует в 7х/8х версиях (последние цифры могут меняться, но общий смысл этих флагов одинаков): chrome://flags/#temporary-unexpire-flags-m76 – в браузерах CR‑78+; chrome://flags/#temporary-unexpire-flags-m86 – в браузерах CR‑87+. Причём, эти флаги могут быть привязаны и к конкретным линейкам хромоклонов. В частности, для китайского 360 Exterme Explorer линейки 13.x (CR-86) они выглядят вот так: chrome://flags/#temporary-unexpire-flags-m11 – для флагов 11‑й линейки (CR-69); chrome://flags/#temporary-unexpire-flags-m12 – для флагов 12‑й линейки (CR-78).
В частности, для улучшения отображения шрифтов также можно использовать и флаг chrome://flags/#gpu-rasterization-msaa-sample-count После перебора я оставил его у себя равным 8, вы можете задать и другие значения, от 1 до 16.
Кроме того, можно попробовать и другие флаги и ключи: --enable-font-cache-scaling --enable-webfonts-intervention-v2 --enable-gpu-rasterization лично не проверялось, но "в этих ваших интернетах" их тоже иногда советуют… :)
Крайняя мера, но иногда помогает, если не все шрифты и не на всех сайтах отображаются корректно при 100%-м масштабе. Изменённый масштаб запоминается для сайта, кроме того можно использовать подходящие аддоны с гибкими настройками.
См.также: проблемы отображения шрифтов и их зависимости от настроек* в современных Chromium-браузерах * Обсуждение вариантов применения некоторых ключей командной строки, различных флагов и параметров экрана.
Похоже, разработчики "осознали" и понемногу дело двигается: читаем тут и там. Также смотрим "хау-ту" здесь (на басурманском) или тут (на русском).
Работает на Windows Vista и новее. Флаг настроек (и соответствующие ключи) удалены с июня 2016 года, но сохранены разработчиками в некоторых современных версиях китайских хромоклонов (360 Extreme Eplorer и др.).
Настройка* находится здесь: chrome://flags/#enable-direct-write. * …или соответствующий ключ** запуска в ком.строке: --enable-direct-write ** здесь рекомендуют использовать его в паре с ключом --no-sandbox
По чисто субъективному мнению, корявости в шрифтах этот метод тоже может добавить… …поэтому не отказываемся от решений, рассмотренных чуть выше… и ниже…)
Следует помнить также, что: • для элементов управления DirectWrite отключается ключом командной строки: --disable-directwrite-for-ui • для контента страниц достаточно ВКЛючить соответствующий флаг: chrome://flags/#disable-direct-write
После недолгих танцев с бубном изменится и общий вид страницы-примера, т.е она будет выглядеть намного лучше с точки зрения аккуратности вида шрифтов (пикча кликабельна). [Копия скриншота]
…И даже если "у меня и так всё хорошо, а всё, что тут написано – бред и чушь", не ленитесь поэкспериментировать. Главное – не забывать, что глаза-то дороже!..
