Как включить сглаживание в браузере
Обновлено: 05.07.2024
Данные об измененном масштабе сохраняются в Яндекс.Браузере . При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
Горячие клавиши и жесты мыши для изменения масштабаПри нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Внимание. Если вы пользуетесь однокнопочной мышью в macOS, все жесты нужно выполнять, удерживая клавишу Ctrl и кнопку мыши.При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Шрифт
Чтобы задать общий для всех страниц шрифт:
Определите, какие шрифты и какого размера необходимо использовать.Чтобы увеличить размер шрифта:
На странице Настройки шрифтов в блоке Размер шрифта передвиньте ползунок вправо.Нечеткий, бледный или ломаный шрифт
Отключите сглаживание шрифтов ClearType в настройках Windows.
Выберите Система и введите в поисковой строке Настройка текста ClearType .Если у вас установлена программа GDIPP, отключите ее на время и проверьте, как отображаются шрифты.
Отключите глобальную функцию сглаживания FXAA в настройках видеокарты:
В области уведомлений Windows запустите программу управления видеокартой.Более конкретные рекомендации вы найдете в Руководстве по использованию вашей видеокарты.
В браузерах на основе Chromium шрифты иногда становятся блеклыми. В этом случае попробуйте удалить шрифт Roboto:
Выберите шрифт Roboto и над списком шрифтов нажмите Удалить .Кодировка
Если текст на странице отображается неправильно, воспользуйтесь автоматическим переопределением кодировки или попробуйте изменить кодировку страницы вручную:
Нажмите → Дополнительно → Дополнительные инструменты → Кодировка . Укажите предполагаемую кодировку страницы или выберите из списка пункт Автоматически . Внимание. Для отображения текста на редких языках потребуется установить дополнительные шрифты на компьютер. ","lang":>,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Масштаб, шрифт и кодировка - Яндекс.Браузер для ДИТ. Справка","productName":"Яндекс.Браузер для ДИТ","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>Масштаб
В открывшемся меню нажмите кнопку:
— уменьшить масштаб,
— увеличить масштаб,
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в Яндекс.Браузере . При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
Данные об измененном масштабе сохраняются в бета-версии Яндекс.Браузера . При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
Горячие клавиши и жесты мыши для изменения масштабаПри нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Шрифт
Чтобы задать общий для всех страниц шрифт:
Определите, какие шрифты и какого размера необходимо использовать.Чтобы увеличить размер шрифта:
На странице Настройки шрифтов в блоке Размер шрифта передвиньте ползунок вправо.Нечеткий, бледный или ломаный шрифт
Отключите сглаживание шрифтов ClearType в настройках Windows.
Выберите Система и введите в поисковой строке Настройка текста ClearType .Если у вас установлена программа GDIPP, отключите ее на время и проверьте, как отображаются шрифты.
Отключите глобальную функцию сглаживания FXAA в настройках видеокарты:
В области уведомлений Windows запустите программу управления видеокартой.Более конкретные рекомендации вы найдете в Руководстве по использованию вашей видеокарты.
В браузерах на основе Chromium шрифты иногда становятся блеклыми. В этом случае попробуйте удалить шрифт Roboto:
Выберите шрифт Roboto и над списком шрифтов нажмите Удалить .Кодировка
Если текст на странице отображается неправильно, воспользуйтесь автоматическим переопределением кодировки или попробуйте изменить кодировку страницы вручную:
Нажмите → Дополнительно → Дополнительные инструменты → Кодировка . Укажите предполагаемую кодировку страницы или выберите из списка пункт Автоматически . Внимание. Для отображения текста на редких языках потребуется установить дополнительные шрифты на компьютер. ","lang":>,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Масштаб, шрифт и кодировка - Бета-версия Яндекс.Браузера. Справка","productName":"Бета-версия Яндекс.Браузера","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>Масштаб
В открывшемся меню нажмите кнопку:
— уменьшить масштаб,
— увеличить масштаб,
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в бета-версии Яндекс.Браузера . При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
Думаю, что не только я, но и другие пользователи Chrome под Windows, на многих сайтах замечали проблемы c отображением нестандартных шрифтов. Читать текст на таких сайтах можно, но глазам больно. Я бы так все это и продолжал терпеть, но на одном из недавних собственных проектов этот вопрос встал буквально ребром. Решил разобраться во всем досконально.
Разница в этих двух фрагментах очевидна. Первый сделан со случайно выбранного сайта adaptive-images, а второй с его локальной копии, в css которой была изменена буквально одна строчка.
(Читавшие первую версию статьи могут сразу перейти к UPD, где приведено работающее альтернативное решение проблемы для Chrome)
Суть проблемы
Небольшое общее замечание — приведенные в статье исследования проводились под Windows 7. Будет интересно узнать в комментариях о положении дел на других платформах.
Итак, разница между двумя приведенными фрагментами состоит в том, что на втором из них при отображении шрифта браузер применяется так называемое сглаживание (antialiasing). Как же заставить браузер использовать это сглаживание? Как в дальнейшем оказалось, все очень сильно зависит как от самого браузера так и от настроек операционной системы. Забегая вперед, скажу, что сглаживание бывает двух видов и результаты их работы отличаются друг от друга. Первый тип я уже упомянул, а второй — это так называемый субпиксельный рендериг. Но давайте обо всем по порядку.
Поиск решения, как водится, начался с публикации этого вопроса на одном из профильных ресурсов. Ответы обнадеживали, но ни один из них не помог в полной мере, хотя они и раздвинули горизонты моего познания в этой области. Поиск работающего решения занял три часа, в течении которых была повреждена стена и, соответственно, собственный лоб, хотя в статьях с готовыми решениями дефицита не было. Как обычно, рогатый прятался где-то в знаках препинания.
Chrome
К счастью, я не первый, кто сталкивается с этой проблемой и поиск по ключевым словам быстро вывел на ее решение с помощью использования SVG шрифтов, которые, в отличии от своего TrueType аналога, в Chrome рендерятся с применением первого типа сглаживания, то есть антиалиасинга. Казалось бы,- вот оно счастье,- но не тут-то было!
Наверняка, существуют и другие способы получения необходимых font-файлов, но почему-то мной был выбран сервис FontSquirrel. Не хочу делать поспешных выводов, но на мой взгляд, в их генератор css вкралась ошибка.
В качестве подопытного кролика возьмем уже готовый шрифт Colaborate с их сайта. В архиве находится набор шрифтов в различных форматах, файл css и demo.html Открываем последний в Chrome и начинаем недоумевать, а где же, собственно, сглаживание? Особенно сильно его отсутствие заметно у Bold начертания.
Откроем css и посмотрим, что же для нас сгенерировали на сервере FontSqurell:
на первый взгляд, никакого криминала не заметно. Не стану описывать процесс поиска решения, прерываемого тем самым стуком головы о стену, приведу сразу фрагмент, выдавший желаемый результат:
Объяснение этому весьма простое — переместив описание svg шрифта мы повысили его приоритет в WebKit браузерах (Chrome, Safari) и он стал использоваться вместо TTF, который эти браузеры под Windows почему-то не сглаживают.
Не могу судить о причинах, по которым генератор этого сервиса делает именно такой css, а не какой-то другой. Возможно, раньше это работало хорошо, но с тех пор могло что-то измениться в WebKit. Думаю, что стоит написать им багрепорт, если в комментариях не приведут какого-то более логичного объяснения.
Но это еще далеко не все, что я узнал о веб шрифтах. Дальше пойдет речь о тонких настройках в FontSquirrelдля наборов с кириллическими символами, сглаживании в других браузерах и оптимизации скорости загрузки веб шрифтов. Начну с последнего пункта.
Оптимизация загрузки
Как известно, любая красота требует жертв. В случае с пользовательскими шрифтами жертвовать приходится временем загрузки страницы за счет увеличения размеров загружаемых данных. Бороться с этим можно, применив сжатие наших шрифтовых файлов. Для svg процедура следующая — при помощи gzip сжимаем наш файл, переименовываем его — присваиваем расширением svgz и добавляем в конфигурацию сервера новый MIME-type. Привожу пример для Apache (можно указывать в .htaccess):
И меняем соответствующую строчку в css (добавляем z) — url('ColabThi-webfont.svgz') format('svg')
Обратите внимание, font/opentype не является стандартным MIME-type, но именно такой тип помогает избавиться от назойливой ошибки в консоли Chrome: Resource interpreted as Font but transferred with MIME type image/svg+xml
Настройки FontSquirrel
Теперь о том, как настраивать FontSquirrel для включения в состав шрифта символов, выходящих за пределы таблицы ASCII-7. Отображенные ниже на скриншоте настройки доступны в режим Expert. Приведу вариант, хорошо сработавший в моем случае, не забудьте включить другие типы шрифтов, мне был нужен только SVG.
Буду признателен за уточнения к этим настройкам, если можно их как-то улучшить, от знатоков своего дела в комментариях.
Другие браузеры
В заключении, коротко коснусь особенностей IE, FireFox и Opera. Напомню, что речь идет о Windows7.
Тут стоит сказать, что алгоритм антиалиасинга, применяемый Chrome для SVG шрифтов, это не то же самое, что субпиксельное сглаживание, используемое различными ОС для отображения экранных шрифтов. В Windows эта технология называется ClearType. Посмотрите на разницу — красный шрифт это Chrome + SVG Antialiasing, черный FireFox + TTF ClearType. На этом фрагменте хорошо заметно, что антиалиасинг добавляет «лишние» пиксели, делая буквы чуть шире. Для некоторых макетов про кросбраузерную pixel perfect верстку можно забыть.
Нехитрым экспериментальным путем удалось установить, что сглаживание в FF и большой O напрямую зависят от настроек ClearType в операционной системе. Если выключить эту функцию, то заставить браузеры сглаживать шрифты невозможно, хотя IE игнорирует указания операционной системы и сглаживает шрифты всегда. Как пишут, какое-то время назад появилась css директива (-webkit-)font-smooth(ing), но в последних версиях FireFox ее поддержку почему-то убрали. Если вы знаете, как можно обойти эти ограничения, напишите пожалуйста об этом в комментариях. Так же неясен ответ на вопрос как отключить сглаживание шрифтов, ведь существуют ситуации, когда этого делать не надо.
Заключение
В процессе написания этой статьи был прочитан ряд тематических статей и просмотрено много сайтов через призму использования нестандартных шрифтов, с целью определения для себя сферы применимости этой полезной технологии. Хочу сказать, что вывод я сделал следующий — применять нестандартные фонты можно и нужно (иначе, всех зохавает bootstrap), но в ограниченном количестве, для декорирования некоторых элементов UI. И основной текстовый контент нужно оставить в покое! Иначе, сайт может выглядеть совсем не так, как это изначально задумывалось. В подкреплении этих слов даю ссылку на вдумчивую статью, в которой говорится приблизительно тоже самое, но более развернуто. Возможно, в будущем ситуация изменится, но для этого в браузерах должна появиться единая подсистема управления рендерингом шрифтов, одинаково отображающая текст, хотя бы в рамках одной платформы.
UPD Эврика! После напоминания от GreatRash решил все-таки узнать причину, по которой у меня не срабатывал -webkit-font-smoothing и нашел в процессе баг репорт. Там сто с лишним комментариев, но среди вялого бухтения встретился настоящий бриллиант! Эта конструкция позволяет отказаться от SVG шрифтов и, на первый взгляд, Chrome стал рендерить текст так же, как и все остальные браузеры, хотя расстояние между буквами остается другим, но это, видимо, тоже можно вылечить вот по этому рецепту
Простой 2 комментария
Видно, что у вас для латиницы используется какой-то нестандартный шрифт.
Первое подозрение падает на вмешательство в страницы сайтов каким-то расширением. Для того чтобы проверить это - зайдите в about:profiles и перезапустите браузер без расширений. Если это поможет - ищите расширение, ответственное за это, отключая их по одному в about:addons .
Если это не поможет - попробуйте там же, в about:profiles создать новый профиль и перезапустить браузер с ним. Если это поможет - в основном профиле идите в about:config и смотрите настройки шрифтов, обращая внимание на нестандартные значения, они выделены bold'ом.
Если и это не поможет - то, очевидно, что-то не так с конфигурацией шрифтов а вашей операционной системе, но скорее всего какой-то из предыдущих пунктов должен помочь.
У меня такое было в Skype после того, как я в винду установил Эппловский шрифт SF UI (San Francisco UI).
Ничего не помогало, разве что в настройках скайпа я увеличил шрифт, и он стал хотя бы читабельней.
Нагуглил, что если удалить шрифт SF UI, то все встанет на свои места. И это сработало.
Понятия не имею, как так коряво можно написать программу, что она самовольно выбирает шрифты, но попробуйте - посмотрите. И для начала установите на телефон приложение, которое по фото определяет шрифт из FF. В первую очередь нужно попробовать удалить его из системы (если конечно это не какая-нибудь Тахома или Arial)
Читайте также: