Размытый шрифт в гугл хром

Блог профессионального самокопателя

Размытые шрифты в Vivaldi, chrome и других chromium браузерах

Сегодня тут будет чисто технический пост.

Итак, те из вас кто купил ноутбук с разрешением выше или равным 1920 на 1080 наверное уже заметили, что шрифты при таком разрешении могут выглядеть исключительно мелко. Решением может быть включение фунции масштабирования в Windows. Например у меня включено укрупнение шрифтов на 160 процентов.

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

Для браузеров на основе chromium (а это такие браузеры Chrome, Yandex Browser, Amigo, Opera выше версии 12.17) существует решение, позволяющее вернуть на родину нерастянутое отображение страниц и шрифтов.

Данная инструкция была написана и опробована на новом браузере Vivaldi, созданном выходцами из команды Opera 12. Да, он уже не работает на движке Presto, но пытается сохранить фишки старой Оперы.

Как это выглядит:

Снимок экрана не отражает всего ужаса размытия, но поверьте в реальности размытие просто катастрофическое. А вот после применения твиков — словно пелена падает с глаз! 🙂

Итак вот сама инструкция (в скобках указаны альтернативные варианты вводы для других браузеров на основе Chromium):

Решаем проблему размытых шрифтов (при включенном в Windows масштабировании)

Способ в равной степени подходит к любому браузеру на основе chromiuim.

Итак:
1. В свойствах ярылка браузера после vivaldi.exe (chrome.exe) вставляем строчку:
—high-dpi-support=1 —force-device-scale-factor=1

Читайте также  Расположение судна в реальном времени

Получаем нечто в стиле:
"C:VivaldiApplicationvivaldi.exe —high-dpi-support=1 —force-device-scale-factor=1"

2. Заходим в vivaldi://flags (chrome://flags)
Находим:
" Отключить DirectWrite Windows
Отключение тестовой системы рендеринга шрифтов DirectWrite. #disable-direct-write
и нажимаем "Включить" , после чего перезапускаем браузер.

Тем самым мы возвращаем реальный масштаб шрифтам и изображениям, а также делаем их четкими и неразмытыми.

(применительно к Vivaldi): К сожалению в результате шрифты в браузере станут очень маленькими. Для увеличения системных шрифтов — например во вкладках, меню, открываем файл common.css (у меня он расположен по адресу: c:VivaldiApplication1.0.162.4
esourc esvivaldistyle) и заменяем строку:
font-size:11.5px
например на строку
font-size:15.5px

Для изменения шрифтов на веб-страницах вводим vivaldi://chrome/settings/fonts (chrome://settings/fonts) , выбираем " Скачать расширение для настройки шрифтов ". (для других браузеров настройка шрифтов возможна без скачивания расширения, но в расширении шрифты можно настроить более детально)

После установки расширения заходим на адрес:
chrome-extension://caclkomlalccbpcdllchk eecicepbmbm/options.html
и настраиваем шрифты под себя.

з.ы. Кстати, если вы пользуетесь портабельной версией Chrome, то параметры запуска можно прописать в ini-файле GoogleChromePortable.ini, который нужно создать в той же папке где находится GoogleChromePortable.exe

Содержимое файла GoogleChromePortable.ini:

AdditionalParameters= /high-dpi-support=1 /force-device-scale-factor=1

С новым обновлением браузера у некоторых пользователей шрифты стали размытыми, в основном если окно браузера открыто на весь экран, и это можно исправить.

Для исправления можно изменить масштаб текста в настройках windows, или же прописать ярлыку запуска Chrome дополнительные параметры:

Нажмите правой кнопкой по ярлыку Chrome, потом «Свойства».
Вкладка «Ярлык» в строке «Объект» добавьте к тексту после пробела следующее:

Жмем ОК, запускам браузер по этому ярлыку и получаем красивые шрифты.

Это делает мои глаза!

отлично выглядит в IE и Firefox

Запуск версии 39 из хрома, только появляется размытым в модальном поле, не имеет никакого значения, если я изменю семейство шрифтов.

Читайте также  Программа делать картинки с надписями

Это CSS (для метки "Старт" ) браузер отображает следующие

Это браузер или CSS?

Ok выглядит как этот CSS

Однако, если я возьму его, мой модальный больше не центрирует?

Я исправил эту проблему, вычитая 0.5px из значения оси Y. Таким образом вместо:

Это разрешило это для меня, и я нахожу это более чистым решением, а затем упражняюсь в процентах или используя Javascript.

Я испытал ту же проблему на хроме после применения преобразования translate к одному из моих элементов. Кажется, это ошибка на хроме. Единственное, что сработало для меня, это:

Другое решение может превращать рендеринг гладких шрифтов:

Выход теста

Исправить 0

Исправить 3

Единственный правильный способ решить эту проблему:

Эта проблема возникает из-за использования значений% для выравнивания элементов div с использованием преобразований CSS. Это приводит к субпиксельным значениям в десятичном формате, которые ваш экран не может правильно отобразить. Решение состоит в том, чтобы нормализовать полученную матрицу преобразования.

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

Итак: матрица (1,0,0,1, -375, -451.5) станет матрицей (1,0,0,1, -375, -451)

Я вызываю этот метод перед.show() jquery. Или, может быть, только один раз в приложении (зависит от вашего случая), вам также может понадобиться вызвать его для события resize и т.д.

Красиво, не правда ли?

Если вам нужно обновить размер, вы можете сделать это с:

Чтобы это работало, все родительские элементы должны быть "выровнены/нормализованы", потому что если у вас, к примеру, осталось тело с x = 10.1px слева, а дочерний — 10px.. проблема не исчезнет, потому что у родителя есть остаточные десятичные дроби матрица Таким образом, вы должны применить эту функцию к каждому элементу, который является родительским и использует преобразование.

Ссылка на основную публикацию
Adblock
detector