Содержание
Блог профессионального самокопателя
Размытые шрифты в 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.. проблема не исчезнет, потому что у родителя есть остаточные десятичные дроби матрица Таким образом, вы должны применить эту функцию к каждому элементу, который является родительским и использует преобразование.