Некорректное отображение шрифтов в браузере

Обновлено: 03.07.2024

Два дня назад у меня было автоматически установлено критическое обновление, и теперь в моих браузерах используется полужирный шрифт вместо шрифта Arial. я пытался удалить arial.ttf и начать заново, но w10 не позволяет мне.
Я сделал восстановление системы, и это тоже не помогло.

Реклама

Джоннифото

Редактировать32

Джоннифото

он ​​есть как на Chrome, так и на Edge

Редактировать32

  • Нажмите на три горизонтальные полосы справа от верхней панели инструментов.
  • Выберите «Настройки» в появившемся меню.
  • Прокрутите открывшуюся страницу вниз и нажмите Показать дополнительные настройки .
  • Прокрутите страницу вниз до раздела «Веб-контент», где вы можете нажать кнопку «Настроить шрифты» и несколько других кнопок, чтобы изменить настройки шрифта. Если вы довольны настройками, нажмите «Готово».
  • В поле поиска введите Internet Explorer, затем нажмите клавишу Enter, чтобы открыть Internet Explorer 11.
  • На верхней панели инструментов нажмите "Инструменты" > "Свойства обозревателя".
  • На вкладке "Общие" внизу нажмите кнопку "Шрифты", где можно настроить параметры.

Джоннифото

Реклама

Редактировать32

  • Попробуйте щелкнуть правой кнопкой мыши на "Пуск", а затем левой на "Панель управления".
  • Выберите Просмотр крупными значками.
  • Нажмите "Шрифты".
  • Нажмите и удерживайте левую кнопку мыши и перетащите Times New Roman и Courier New на рабочий стол.
  • Нажмите и удерживайте левую кнопку мыши и перетащите Times New Roman и Courier New с рабочего стола обратно в папку «Шрифты».

Когда вы сделаете это, вам будет предложено переустановить шрифты. Нажмите «Да» для каждого запроса.

Затем выключите компьютер и перезагрузите его.

Джоннифото

Редактировать32

Да, это правильно. И, например, с Time New Roman, когда на рабочем столе выделены четыре элемента.

Перетащите их обратно в папку со шрифтами, и четыре раза появится запрос на переустановку.

После того, как вы сделали это для шрифтов Times New Roman и Courier New, вы можете удалить шрифты на рабочем столе и выключить компьютер, а затем перезагрузить его.

Джоннифото

Я сделал все вышеперечисленное, но без изменений. Меня не спросили, хочу ли я установить шрифты. Он спросил, хочу ли я заменить их, поскольку они все еще существуют, правильно?

Редактировать32

Да, верно.

Когда вы нажимаете «Да», ползунок перемещается туда, где он установлен.

Попробовать стоит. Не забудьте после этого перезагрузить компьютер.

Если это не поможет, мне нужно подумать о том, что еще может повлиять на шрифт таким образом.

Реклама

Джоннифото

Я сделал все это, и ничего не решилось.

Я не вижу файл arial.ttf в папке шрифтов arial, только на экране o/s C windows?

Джоннифото

в панели управления я вижу только 8 стилей шрифта, но в фотошопе я вижу 9 стилей, в том числе тип шрифта Regular Arial.

Редактировать32

ОС будет использовать шрифты из папки Fonts, которую вы открываете из панели управления.

Папка шрифтов для Photoshop — это отдельная папка со шрифтами, предназначенная для работы с приложением Photoshop.

Фактические шрифты в папке Fonts, доступной через панель управления, должны быть в формате TTF (формат True Type).

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

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

Кроме того, вы можете загрузить шрифты с расширением .ttf из стороннего источника, а затем просто перетащить их в папку «Шрифты», чтобы добавить их в свою коллекцию. Однако это должен быть .ttf.

Если на вашем веб-сайте только часть текста отображается правильным шрифтом, а остальная часть — другим шрифтом, вероятно, проблема в том, что последний был добавлен вручную во время редактирования.

Почему это происходит?
Возможно, когда вы редактировали текст, вы, например, установили шрифт Open Sans. Позже вы решили изменить его на PT Sans. В то время как некоторые блоки отображают правильные шрифты, другие отображаются шрифтом по умолчанию, например Times. Вам нужно удалить шрифт, который вы добавили вручную.

Что мне делать?
Выберите блок, в котором отображается неправильный шрифт, зайдите в редактор, выберите все. Затем выберите «Семейство шрифтов» → «Удалить семейство шрифтов». Кроме того, вы можете нажать «Очистить форматирование» в правом углу панели инструментов редактирования текста. Опубликуйте страницу повторно.

Я пытаюсь добавить свой собственный шрифт в настройках сайта. Я создал файл CSS и сохранил его. Затем я загрузил собственный шрифт и установил стиль шрифта в настройках сайта. Однако опубликованная страница отображается с использованием основного шрифта, такого как Times.

Почему это происходит?
Вы неправильно указали семейство шрифтов.
Откройте файл CSS и проверьте семейство шрифтов. Гарнитура должна совпадать с названием шрифта, который вы установили в настройках сайта. Вот пример:


Что мне делать?
Вы должны указать имя шрифта в файле CSS точно так же, как вы это сделали в настройках сайта. В нашем примере мы изменили "Conv_GothaProBol" на "Gotham Pro".

При добавлении шрифта с помощью файла CSS убедитесь, что сервер, с которого шрифт подключается к вашему проекту, поддерживает CORS Access-Control-Allow-Origin для заполнения любого домена. (Доступ-Контроль-Разрешить-Происхождение: *). Узнайте больше о добавлении пользовательских шрифтов с помощью внешних файлов CSS в нашем руководстве по подключению пользовательского файла CSS.

Причин этой ошибки может быть несколько. Сначала проверьте, зарегистрирован ли шрифт в семействе шрифтов. Важно, чтобы было указано официальное название, и оно точно совпадало с названием загруженного вами шрифта.

Заполните поля «Название семейства шрифтов заголовка» и «Название семейства шрифтов основного текста» на вкладке «Ваш собственный шрифт». В нашем примере мы ввели одно и то же имя в оба поля.

Если файл шрифта не в формате Web Open Font Format (WOFF), его необходимо преобразовать. Мы рекомендуем использовать WOFFer, особенно если вы используете кириллические шрифты.

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

  • Футура PT
  • Формула
  • Мнение Pro
  • Цирцея (и Круглая Цирцея)
  • Искра
  • Орхидея Про
  • Казимир Текст
  • Геометрия
  • Медиатор (и Медиаторная засечка)
  • Реформа Гротеск


Если вы видите мерцание при открытии веб-сайта в браузере, значит, загружается системный шрифт, а затем ваш. Это не ошибка, а совершенно нормальное явление.

Для загрузки файла требуется время. Иногда это происходит мгновенно (особенно если у вас быстрый интернет), и вы сразу видите свой собственный шрифт; иногда это занимает больше времени.

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

Вы можете добавить на страницу блок Т228 из категории "Другое". Это замедлит скорость загрузки страницы, а браузер будет отображать текст с пользовательскими шрифтами.


Габриэль Ричардс

Статьи по теме

Наложение DIV Google Планета Земля с помощью iframe Shim

Правда о Magento и Entity-Attribute-Value

SlickGrid — универсальный, настраиваемый, БЫСТРЫЙ


Периодическая таблица шрифтов

Атрибут @font-face изменил облик веб-дизайна, позволив дизайнерам отказаться от системных шрифтов по умолчанию и погрузиться в новое царство разнообразных, насыщенных и интересных шрифтов. Вот три вещи, которые следует учитывать при выборе веб-шрифта, чтобы убедиться, что ваши пользователи получат именно тот дизайн, который вы хотели.

Остерегайтесь плохого сглаживания

Сглаживание означает сглаживание краев шрифтов, а не отображение их с неровными (неровными) краями. Рендеринг шрифта в Windows не всегда выполняет сглаживание по умолчанию. Таким образом, вы можете включить его на своем собственном компьютере, но нет возможности убедиться, что он включен для зрителей, посещающих ваш сайт. Вот два способа обойти это:

  1. Выберите другой шрифт. Это будет выглядеть лучше или хуже в зависимости от того, какой шрифт вы выберете, какой тип шрифта, а также какой размер шрифта вы будете использовать. Некоторые шрифты лучше смотрятся крупными и наоборот.
  2. Замена шрифта. Это означает отображение шрифта совершенно другим методом, чем средство визуализации текста браузера по умолчанию. Таким образом, ваш шрифт всегда будет отображаться одинаково, при условии, что используемая вами технология (например, javascript, flash) включена и поддерживается.

Вы также можете прочитать статью Тима Аренса A Closer Look at Font Rendering" в журнале Smashing Magazine, чтобы узнать, как работает рендеринг шрифтов.

Не забудьте установить шрифт по умолчанию

Правда о веб-шрифтах заключается в том, что тег @font-face довольно новый и совместим только с более новыми версиями браузеров. Вы определенно захотите принять во внимание обе аудитории.

Во-первых, убедитесь, что вы указали семейство шрифтов по умолчанию после установки нового классного шрифта. В зависимости от того, какой шрифт вы используете, вы можете использовать шрифт по умолчанию, похожий на ваш новый шрифт:

Во-вторых, дважды проверьте вес шрифта.Теги заголовков по умолчанию выделены полужирным шрифтом (начертание шрифта: полужирный). При использовании шрифта, у которого нет отдельной полужирной версии шрифта, браузер применит к шрифту «фальшивый полужирный шрифт». Это приводит к тому, что некоторые части шрифтов толще, чем предполагалось. и это может выглядеть непропорционально и просто странно.

Простая установка < font-weight: normal > не учитывает зрителей, которые будут видеть вашу страницу с использованием шрифта по умолчанию. Эти заголовки также будут иметь значение , что снижает их визуальную эффективность в качестве заголовка. Вот два возможных способа обойти это:

  1. Выбор шрифта. Опять же, некоторые пакеты веб-шрифтов поставляются с дополнительными полужирными версиями шрифта, поэтому вместо них можно использовать один из них. При использовании замены шрифта вам также потребуется указать дополнительную полужирную версию шрифта. Теперь < font-weight: bold> будет отображаться так, как ожидалось.
  2. Modernizr.js. Недавно я обнаружил, что этот файл проверяет совместимость с CSS3 и позволяет назначать стиль CSS для любого сценария. Например:

Ошибка шрифта Google!

И последнее, но не менее важное: у Google есть отличный API веб-шрифтов, и вы можете загружать шрифты прямо с их сервера. Я заметил, что вертикальный интервал значительно отличается при просмотре в Chrome в Windows. Лучшее решение, которое мне удалось найти, — вручную загрузить собственную версию набора шрифтов из Font Squirrel и использовать ее вместо нее.

Endertech – это компания веб-дизайна в Лос-Анджелесе , способная предоставить решения для разработки ваших веб-сайтов. Свяжитесь с нами для получения бесплатной консультации.

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

Исправить размытие шрифты в гугл хром

Проблема может быть связана с неправильными настройками Chrome или способом обработки текста на экране в Windows. Мы обсудим все возможные сценарии и исправим для вас проблему с размытым шрифтом.

1. Проверьте настройки шрифта в Google Chrome

Google Chrome предлагает меню настройки шрифта по умолчанию в настройках. Вот как вы можете использовать и настраивать шрифт по своему усмотрению.

Шаг 1. Откройте Google Chrome и нажмите на меню из трех точек в правом верхнем углу.

Шаг 2. Перейдите в "Настройки" и найдите "Шрифты".

Поиск шрифтов

Шаг 3. Выберите меню "Настройка шрифтов".

Шаг 4. Вы можете проверить размер шрифта и выбрать различные стили шрифта в том же меню.

Настройка хромированных шрифтов

Выберите вариант, который больше подходит вашему зрению, и закройте меню настроек.

2. Используйте тюнер текста ClearType

В Windows есть встроенный инструмент настройки текста ClearType, который помогает пользователям настраивать стиль и внешний вид шрифта на ноутбуке или ПК.

Нажмите клавишу Windows и найдите ClearType. Откроется меню ClearType Text Tuner.

Использовать тюнер открытого текста

Цель – сделать текст на экране более четким, четким и удобным для чтения. Нажмите «Далее» и выберите свой монитор. Windows проведет вас через пять примеров текстовых абзацев и попросит вас выбрать текст, который вам больше нравится.

Проверить ширину тюнера ясного текста

После опроса ОС изменит стиль шрифта во всей системе, чтобы текст было легче читать.

3. Изменить разрешение и масштаб Windows

По умолчанию Windows рекомендует использовать параметр масштабирования 150 %. Однако он может быть слишком низким при использовании ноутбука или ПК с монитором 4K. Вы должны убедиться, что у вас выбраны правильные масштабирование и разрешение в меню настроек Windows. Вот как.

Шаг 1. Откройте приложение "Параметры Windows".

Шаг 2. Перейдите в раздел "Система" и выберите "Экран".

Открыть меню отображения окон

Шаг 3. Выберите предпочтительный процент масштабирования в разделе «Масштаб и макет». Большинство участников GT используют 175% при использовании Windows с монитором.

Изменить масштаб окон

Вы также можете изменить разрешение экрана в том же меню.

4. Включить аппаратное ускорение

Включение аппаратного ускорения улучшит отрисовку ресурсоемких графических задач в Google Chrome. Это повысит производительность для определенных задач и устранит возможность размытия текста в Chrome.

По умолчанию этот параметр включен в Google Chrome, но если вы каким-то образом отключили его, пришло время включить его снова.

Шаг 1. Откройте настройки Google Chrome.

Шаг 2. Перейдите в меню "Дополнительно" с левой боковой панели.

Шаг 3. Выберите систему.

Шаг 4. Включите переключатель аппаратного ускорения в следующем меню.

Включить аппаратное ускорение

Перезапустите Google Chrome, и вы не заметите размытого шрифта в браузере.

5. Отключить расширения Google Chrome

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

Шаг 1. Откройте Google Chrome и нажмите на меню из трех точек вверху.

Шаг 2. Перейдите в раздел "Дополнительные инструменты" и выберите "Расширения".

Открыть меню расширений

Шаг 3. Отключите расширения в следующем меню.

Отключить хром расширения

При желании вы можете оставить расширения диспетчера паролей в списке. Они не портят шрифты в Chrome.

6. Измените настройки внешнего вида Windows

Windows предлагает возможность сгладить края экранных шрифтов в меню настроек. Если вы по-прежнему сталкиваетесь с проблемами с размытыми шрифтами в Google Chrome, вам нужно включить настройку.

Шаг 1. Нажмите клавишу Windows и найдите Внешний вид.

Шаг 2. Выберите Настроить внешний вид и производительность Windows.

Шаг 3. Нажмите на него и нажмите Enter.

Шаг 4. Откроется меню "Параметры производительности".

Гладкие края экрана шрифты

Шаг 5. Включите параметр «Сглаживание краев экранных шрифтов» и нажмите «Применить».

Нажмите "ОК", и вы не увидите размытых шрифтов в Google Chrome.

7. Обновите Google Chrome

Вы используете устаревшую сборку Google Chrome в Windows? Возможно, Google устранил проблему с размытыми шрифтами в новой сборке Chromium, которую вы еще не установили на компьютер.

Выберите «О программе» в настройках Chrome и обновите Google Chrome до последней версии.

Наслаждайтесь чистыми шрифтами в Google Chrome

Если вы столкнулись с проблемой размытия шрифтов на определенном веб-сайте в Chrome, вам необходимо связаться с администратором веб-сайта и попросить его/ее внести изменения из серверной части. Какой трюк сработал у вас? Поделитесь своим опытом в комментариях ниже.

Последнее обновление: 4 февраля 2022 г.

Вышеупомянутая статья может содержать партнерские ссылки, которые помогают поддерживать Guiding Tech. Однако это не влияет на нашу редакционную честность. Контент остается беспристрастным и аутентичным.

Читайте также: