Некорректное отображение шрифтов в браузере
Примечание. Вы можете нечаянно изменить масштаб страницы — например, нажав при прокрутке колесика мыши клавишу Ctrl . Чтобы вернуть нормальный масштаб, в правой части Умной строки нажмите значок .
В открывшемся меню нажмите кнопку:
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в Яндекс Браузере. При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Внимание. Если вы пользуетесь однокнопочной мышью в macOS, все жесты нужно выполнять, удерживая клавишу Ctrl и кнопку мыши.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
При нажатой клавише Ctrl прокрутите колесо мыши вперед.
При нажатой клавише Ctrl прокрутите колесо мыши назад.
Шрифт
Чтобы задать общий для всех страниц шрифт:
Чтобы увеличить размер шрифта:
Нечеткий, бледный или ломаный шрифт
Отключите сглаживание шрифтов ClearType в настройках Windows.
Если у вас установлена программа GDIPP, отключите ее на время и проверьте, как отображаются шрифты.
Отключите глобальную функцию сглаживания FXAA в настройках видеокарты:
Более конкретные рекомендации вы найдете в Руководстве по использованию вашей видеокарты.
В браузерах на основе Chromium шрифты иногда становятся блеклыми. В этом случае попробуйте удалить шрифт Roboto:
Кодировка
Если текст на странице отображается неправильно, воспользуйтесь автоматическим переопределением кодировки или попробуйте изменить кодировку страницы вручную:
Внимание. Для отображения текста на редких языках потребуется установить дополнительные шрифты на компьютер.
Масштаб
Примечание. Вы можете нечаянно изменить масштаб страницы — например, нажав при прокрутке колесика мыши клавишу Ctrl . Чтобы вернуть нормальный масштаб, в правой части Умной строки нажмите значок .
Нажмите → Настройки → Сайты .
Нажмите значок .
В открывшемся меню нажмите кнопку:
— уменьшить масштаб,
— увеличить масштаб,
— развернуть окно во весь экран.
Данные об измененном масштабе сохраняются в Яндекс Браузере. При повторном открытии страница будет отображаться в выбранном вами масштабе.
Чтобы удалить настройки масштаба для отдельных страниц:
Нажмите → Настройки → Сайты .
(Так на всех сайтах). Все стандартные шрифты в наличии. Работаю с программой Photoshop - отображение шрифтов идеально. (Не знаю нужно ли это и имеет ли это значение). Прошу помочь.
Не отображаются шрифты
Пытаюсь сделать меню, пока на локалке, с красивым шрифтом, но почему-то половина шрифтов не.
а попробовать почистиь кеш и куки в браузере
Добавлено через 3 минуты
браузер google chrome?
найдите в параметрах - расширенные - удалить данные о просмотренных страницах и перезапустите браузер
Да, ранее чистил и сейчас. Безрезультатно. Подчеркну, такое во всех браузерах. ОС переустановил недавно. Проблем не было.
возможно установили какую то программу, которая сама внесла изменения
попробуйте вспомнить, после чего это появилось
возможно установили какую то программу, которая сама внесла изменения
попробуйте вспомнить, после чего это появилось
А попробуйте запустить ИЕ без надстроек (все программы - стандартные - служебные - ИЕ без надстроек). Если так будет всё нормально - подключайте надстройки по одной, пока не найдёте виновную
А попробуйте запустить ИЕ без надстроек (все программы - стандартные - служебные - ИЕ без надстроек). Если так будет всё нормально - подключайте надстройки по одной, пока не найдёте виновную
Без надстроек действительно работает исправно, пожалуйста можно про надстройки подробнее. Как их подключать. Извиняюсь если вопрос глуп.
Спасибо всем за помощь. Все нашел. Особенно благодарен gecata.
Добавлено через 4 минуты
Еще один вопрос - Как эти-же действия произвести в браузере Google Chrome?
Добавлено через 23 минуты
Проблема является актуальной и хотелось бы услышать ответ на вопрос выше.
Я зашел в браузер IE Без надстроек, позже в обычный IE с надстройками. Все работало исправно. (Ранее в обычном IE шрифт косячный.) При этом нечего не отключал. Все надстройки в IE в данный момент включены.
В данный момент нахожусь в хроме. Перезагружал его.
Просто хочу узнать, есть ли подобная функция, отключения "надстроек" (Не знаю как они там называются) в браузере Google Chrome.
maxikder, я не в курсе. Но вот флешплеер (одна из надстроек ИЕ) в Хроме у меня работает (хотя устанавливала я его, находясь в моём браузере по умолчанию - ИЕ, а специально для хрома не загружала). Думается мне, что ИЕ (в качестве компонента системы) влияет на настройки всех браузеров. Хотя - можно, наверное, и поискать (что-нибудь типа: "отключение флешплеера в хроме")
Добрый день. Наткнулся на похожую тему Некорректно отображается шрифт в браузерах Chromium
Шрифты в браузерах стали светлымим или нечитаемыми. Скрин прилагаю.
Прошу помочь, лог прилагаю.
Некорректно отображается шрифт в браузерах Chromium
После установки браузера Опера 18, некорректно отображается шрифт в самом браузере и при выходе в.
Некорректно отображается шрифт на сайте
Привет народ. Сегодня обнаружилась одна проблемка в опере. (не могу вставить скрин не вижу кнопки(.
Некорректно отображается страница сайта в браузерах android
Всем привет!) Хотела сделать неадаптивный сайт, чтобы во всех браузерах отображался одинаково.
Сброс настроек не пробовал. Работаю сразу в нескольких браузерах, потому начало проблемы отследить сложно. До этого подобная проблема была в другом браузере, но там проблема была в шрифтах, которые устанавливал для фотошопа. Сейчас же в последний месяц шрифтов не ставил, проблема появилась в этот месяц. Проблема появляется не везде, иногда. Вот второй скрин.
Но, в предыдущий раз, когда ломался шрифт, проблема была на вид аналогичной той, которая по ссылке в первом посте. Предполагая, что это могут быть одни и те же причины проблемы, я создал этот топик.
Проблема не вирусного характера, попробуйте:
Сброс настроек браузера
Удаление ненужных дополнений браузера
Восстановление параметров шрифтов по умолчанию (Панель управления - Шрифты - Параметры шрифта)
Восстановление шрифтов из дистрибутива Windows
Не отображается подключённый шрифт в хроме и мозилле но отображается в опере
Здравсвуйте не отображается шрифт подключённый к сайту в хроме и мозилле но отображается в опере.
Подгрузка видео в браузерах Chromium
Недавно возникла проблема, в браузерах на базе Chromium начали подвисать видео в HD качестве. Эти.
Не отображается автор и некорректно отображается дата в слайдбаре
Подскажите из-за чего в слайдах отображаются не те даты, что в обычном новостном блоке. То есть.
Изменить значение select в Chromium браузерах
Добрый день! Подскажите пожалуйста, у меня некорректно отрабатывается событие изменения значения в.
background-image картинка отображается в VS но не отображается в браузерах
Доброго всем дня! Столкнулся со следующей проблемой. Хочу поместить в button картинку, для этого.
Ребят, приветствую) Думаю, многие сталкивались с проблемой нечеткого шрифта в новых версиях Google Chrome. Как и многие, я долго мучался с этой проблемой и помогало только полная очистка кэша и временных файлов. И как назло в интернете все решения либо неактуальные, либо нерабочие.
Недолго порыскав в настройках хрома нашел функцию, которая отключает злополучное "Масштабирование FontCache". Представляю решение на общее обозрение:
1. Убедитесь, что у Вас в OS Windows включен ClearType. Это можно сделать следующим способом:
В строке поиска меню пуск набираем "ClearType" и настраиваем шрифт по своему вкусу.
Извиняюсь, если для кого-то боянисто, но мне не удалось найти подобного решения в интернете. Надеюсь Вам помогло :)
вообще-то в таких случаях надо скрины прилагать до и после, потому что кривые шрифты могут быть разными и причины тоже.
Спасибо, покрыло кучу инструкций, эта помогла
Спасибо! сколько времени прошло, а проблема до сих пор актуальна
БОЛЬШОЕ ЧЕЛОВЕЧЕСКОЕ ТЕБЕ СПАСИБО! мучались два года с этим шрифтом..
Димка Зорин - красавчик
Спасибо большое! Мои глаза будут благодарны тебе всю оставшуюся жизнь!
У меня всё получилось! Спасибо автору!))
Какая версия браузера ,у меня версия 76.0.3809.100 (Официальная сборка), (64 бит) в ней уже нет такого пункта.
Ай дорогой иди обниму! Помогло =)
Большое спасибо за дельный совет! Мучался изза этого сильно.
В новой версии хрома, под английским языком как у меня, надо отключить вот это:
Font Access APIs
Enables the experimental Font Access APIs, giving websites access to enumerate local fonts and access their table data. – Mac, Windows, Linux, Chrome OS, Android
Купил новый хард, ставлю свежие проги и т.д., столкнулся с проблемой кривого шрифта. Благодаря этой короткой статье всё решил за 30 секунд. Плюсую :)
Спасибо большое, и за ссылку точную спасибо
Мои глаза тебе очень признательны)
автор, если есть еще идеи для нового хрома, буду рад посту) спасибо
Спасибо огромное! Здоровья вам!)
спасибо тебе большое!
Работает. Спасибо тебе
Ты меня спас просто.)
Я - тестер и я хотел уже наехать на разработчиков из-за поехавших шрифтов, но увидел, что в Опере всё окей. Думал, что схожу с ума, но нет.)
Годно, спасибо, получилось!!) А то я уже глаза сломала :DD
Огроменное спасибо! Мог бы поставить 1000 плюсов, поставил бы 100000 :)
Сегодня утром была такая проблема. Не вижу ничего и все - ближе к монитору приходилось наклоняться, чтоб рассмотреть. Помог сон) 5 часов продрых и буквы видать четенько )
Это, конечно, помогает где-то, но, например, в чате твича остаётся жутчайшее мыло. Я даже бросил смотреть через браузер и перешёл на плеерную альтренативу с чатиком через irc-клиент.
У меня другая проблема :)) При переключении видео в полный экран с любого сайта через гугл хром - черный экран, звук есть видео идет, но черный экран. Так же было и с еджем, то убрав галки ActiveX вроде в едже стало норм. А вот в хроме черный экран всякий раз как разворачиваю полный экран :( Печаль
Специалисты компании Proofpoint предостерегают пользователей Windows и браузера Chrome: хакеры придумали новый трюк и теперь маскируют свои атаки под загрузку дополнительного пакета шрифтов.
Поверх страницы, которая становится нечитаемой из-за действий скрипта, атакующие выводят всплывающее окно, которое сообщает жертве, что на ее компьютере не хватает некоего специфического шрифта, и для нормальной работы ресурса шрифт необходимо скачать и установить. Закрыть это окно, нажав на крестик в углу, не получится.
Согласно данным специалистов Proofpoint, эта кампания использует известную цепочку заражений EITest, впервые задокументированную еще в 2014 году. Тогда EITest прочно ассоциировалась с атаками различных эксплоит-китов (к примеру, Angler и Neutrino), которые заражали пользователей шифровальщиками, вредоносами для похищения данных и прочей малварью. Операторы EITest использовали простую тактику, очень похожу на описанную выше: они компрометировали большое количество сайтов, эксплуатируя известные уязвимости (преимущественно жертвами становились ресурсы, работающие под управлением WordPress и Joomla). Затем злоумышленники перенаправляли небольшую часть трафика с зараженных ресурсов на вредоносные страницы, подвергая пользователей атакам эксплоит-китов и заражая их вирусами.
При этом злоумышленники всегда действовали выборочно, отбирая пользователей, подходящих под те или иные критерии. Новая вредоносная кампания тоже опасна только для пользователей из определенных стран (каких именно, эксперты не сообщают), использующих Chrome и Windows.
По мнению аналитиков Proofpoint, техника «шрифт не найден» имеет самое прямое отношение к EITest, невзирая на тот факт, что в данном случае пользователь должен сам нажать на кнопку «Обновить» (наборы эксплоитов, с которыми «сотрудничали» EITest, как правило, атаковали жертв автоматически, не требуя никакого взаимодействия с пользователем). Эксперты считают, что теперь злоумышленники нарочно применяют элементы социальной инженерии, в поисках новых стратегий.
Исследователи сообщают, что пока новая вредоносная кампания распространяет крик-фрод вредоноса Fleercivet, который за спиной пользователя скликивает рекламу, принося деньги своим владельцам.
Думаю, что не только я, но и другие пользователи 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 стал рендерить текст так же, как и все остальные браузеры, хотя расстояние между буквами остается другим, но это, видимо, тоже можно вылечить вот по этому рецепту
Читайте также: