Шрифты в chrome как в firefox
есть ли что-нибудь, что мне нужно добавить, чтобы он выглядел одинаково во всех браузерах?
сброс css может решить проблему, я не уверен .
для шрифта ChunkFive из FontSquirrel, указав " font-weight: normal;" остановил рендеринг Firefox от того, чтобы выглядеть как задница при использовании в заголовке. Похоже, Firefox пытался применить поддельный жирный шрифт к шрифту, который имеет только один вес, в то время как Chrome не был.
для меня веб-шрифты Chrome выглядят дерьмово, пока я не поставлю шрифт SVG перед WOFF и TrueType. Например:
даже тогда шрифты Chrome выглядят тоньше, чем в Firefox или IE. Chrome выглядит хорошо на данный момент, но я обычно хочу установить разные шрифты в IE и Firefox. Я использую смесь условных комментариев IE и jQuery для установки разных шрифтов в зависимости от браузера. Для Firefox, у меня есть следующая функция выполняется, когда страница нагрузки:
тогда в моем CSS я могу сказать
аналогично, в таблице стилей IE, включенной в условные комментарии IE, я могу сказать:
чтобы избежать расхождений шрифтов в браузерах, избегайте использования стилей css для изменения внешнего вида шрифта. Использование свойства font-size обычно безопасно, но вы можете избежать таких действий, как font-weight: bold; вместо этого вы должны загрузить полужирную версию шрифта и дать ему другое имя семейства шрифтов.
иногда это может быть из-за font-weight . Если вы используете пользовательский шрифт с @font-face убедитесь, что ваш font-weight синтаксис. В @font-face идея font-weight / font-style свойства, чтобы сохранить ваш font-family имя по-разному @font-face декларации при использовании различных font-weight или font-style таким образом, эти значения работают правильно в CSS (и загружают пользовательский шрифт-не " поддельный смелый.)"
я видел -webkit-text-stroke: 0.2px; упоминается для сгущения шрифтов webkit, но я думаю, что вам, вероятно, не понадобится это, если вы используете первый кусок кода, который я дал.
Я заметил, что chrome имеет тенденцию делать шрифты немного более резкими, а firefox-более плавным. Вы ничего не можете с этим поделать. удачи!--1-->
по состоянию на 2014, Chrome по-прежнему имеет известную ошибку, где, если используемый webfont имеет локальную копию, он выбирает использовать локальную версию, следовательно, вызывая проблемы рендеринга OP.
во-первых, целевой браузер Chrome или OSX (для меня проблема была только с OSX Chrome). Я использовал этот простой JS для быстрого обнаружения браузера / ОС, вы можете сделать это любым другим способом, который вы используете кому:
Теперь, когда вы можете настроить браузер/ОС, создайте следующий шрифт "new":
URL шрифта такой же, как ваш браузер использует при встраивании google webfont. Если вы используете любой другой шрифт, просто скопируйте и измените URL-адрес.
вы также можете переименовать свой @ font-face пользовательский шрифт-семейный псевдоним.
создайте простое правило CSS для использования этого браузера/ОС для таргетинга шрифтов или обоих:
сделано. Просто применяйте правило font-family везде, где вам нужно.
разные браузеры (и Fwiw, разные ОС) используют разные механизмы рендеринга шрифтов, и их результаты не должны быть идентичными. Как уже отмечалось, вы ничего не можете с этим поделать (если, конечно, вы не можете заменить текст изображениями или вспышкой или реализовать свой собственный рендерер с помощью javascript+canvas - последний немного за бортом, если вы спросите меня).
Я нашел, что это работает :
экспериментируйте со значением "0,7", чтобы приспособиться к вашим потребностям. Строки добавляются там, где вы определяете шрифт bodys.
Тип Font очень важен при чтении страницы. Некоторые типы шрифтов трудно читать, а некоторые приятные. Если вы хотите изменить тип шрифта для всех веб-сайтов, которые вы открываете в браузере, прочитайте эту статью. Давайте посмотрим, как изменить шрифт по умолчанию в Chrome, Edge & Firefox.
Как изменить шрифт по умолчанию в вашем веб-браузере
Процедуры для изменения шрифта по умолчанию в ваших веб-браузерах были объяснены далее:
Изменить шрифт по умолчанию для Google Chrome
Шрифт по умолчанию для Google Chrome можно изменить через настройки шрифтов в Google Chrome. Процедура для этого заключается в следующем:
В разделе «Внешний вид» нажмите «Настроить шрифты».
Здесь вы найдете различные типы шрифтов, используемых в вашем браузере Google Chrome, основным из которых является стандартный шрифт.
Измените его тип на тот, который вы предпочитаете, и перезапустите браузер.
Изменить шрифт по умолчанию для Edge
В списке слева выберите вкладку «Внешний вид».
На вкладке «Внешний вид» последним вариантом будет «Настройка шрифтов». Нажмите на него, чтобы открыть.
Здесь вы найдете различные виды шрифтов, используемых для браузера Edge Chromium, основным из которых является стандартный шрифт. Пожалуйста, измените его тип по мере необходимости.
Изменить шрифт по умолчанию для Firefox
Гораздо проще изменить шрифт по умолчанию в Firefox. Опция присутствует в меню параметров. Процедура для этого заключается в следующем:
На странице «Параметры» вы найдете параметр «Шрифт по умолчанию» в разделе «Язык и внешний вид».
Измените шрифт на один из ваших предпочтений.
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в <head> ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Есть альтернативный способ, при котором файлы со шрифтами хранятся вместе с остальными ресурсами сайта. Для них принято заводить отдельную директорию в корне проекта — например, fonts . В неё следует поместить файлы для каждого начертания в нужных форматах — в большинстве случаев, если не требуется поддержка старых браузеров, подойдут .woff и .woff2 , о которых мы говорили ранее. Шрифты можно скачать на различных ресурсах. При этом всегда нужно обращать внимание на лицензию — некоторые шрифты могут быть недоступны для коммерческого использования.
После того, как шрифты добавлены в проект, их нужно подключить в CSS-файле. Для этого используется правило @font-face . В самом базовом варианте оно будет включать:
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты.
Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Начертания: жирное, курсивное и так далее. Для каждого начертания нужно отдельное правило @font-face .
Базовый вариант правила:
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
В разных браузерах логика рендеринга текста во время загрузки шрифта отличается. Например, Chrome и Firefox в течение трёх секунд не отрисовывают ничего, затем используют веб-безопасный шрифт, а после окончания загрузки текст перерисовывается. IE поступает похоже, но при этом не ждёт три секунды. Подобное поведение в разных браузерах можно унифицировать, используя свойство font‑display .
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:
- auto — поведение по умолчанию, зависит от браузера.
- block — текст не отображается в течение короткого периода (3 секунды), затем отрисовывается запасной шрифт, если основной ещё не загрузился. Как только загрузка завершается, текст перерисовывается снова.
- swap — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
- fallback — в течение очень короткого периода (100 миллисекунд) не отображается ничего, затем браузер использует запасной шрифт и ждёт 3 секунды — если шрифт всё ещё не загрузился, остаётся запасной шрифт. Далее не важно, загрузился шрифт или нет, замена не произойдёт. Если шрифт загрузится, то он применится только при обновлении страницы.
- optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.
Оптимальное значение — swap , его можно использовать в большинстве случаев, оно удобно для пользователей. При подключении шрифта с помощью Google Fonts это значение установлено по умолчанию. Если же есть необходимость избежать мелькания текста (например, для вдумчивого чтения), подойдёт optional .
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в <head> ссылку на шрифт и задать атрибуту rel значение preload :
Также необходимо добавить тип ресурса, в данном случае — font . Предзагружать можно и другие ресурсы — CSS-файлы, изображения и так далее.
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в <head> при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
Подключение шрифтов — часть вёрстки
А научиться вёрстке проще, чем кажется. Скидка 1000₽ по промокоду SKUCHNO.
Ребят, приветствую) Думаю, многие сталкивались с проблемой нечеткого шрифта в новых версиях Google Chrome. Как и многие, я долго мучался с этой проблемой и помогало только полная очистка кэша и временных файлов. И как назло в интернете все решения либо неактуальные, либо нерабочие.
Недолго порыскав в настройках хрома нашел функцию, которая отключает злополучное "Масштабирование FontCache". Представляю решение на общее обозрение:
1. Убедитесь, что у Вас в OS Windows включен ClearType. Это можно сделать следующим способом:
В строке поиска меню пуск набираем "ClearType" и настраиваем шрифт по своему вкусу.
Извиняюсь, если для кого-то боянисто, но мне не удалось найти подобного решения в интернете. Надеюсь Вам помогло :)
вообще-то в таких случаях надо скрины прилагать до и после, потому что кривые шрифты могут быть разными и причины тоже.
Спасибо, покрыло кучу инструкций, эта помогла
Спасибо! сколько времени прошло, а проблема до сих пор актуальна
Димка Зорин - красавчик
БОЛЬШОЕ ЧЕЛОВЕЧЕСКОЕ ТЕБЕ СПАСИБО! мучались два года с этим шрифтом..
Ты меня спас просто.)
Я - тестер и я хотел уже наехать на разработчиков из-за поехавших шрифтов, но увидел, что в Опере всё окей. Думал, что схожу с ума, но нет.)
Огроменное спасибо! Мог бы поставить 1000 плюсов, поставил бы 100000 :)
Ай дорогой иди обниму! Помогло =)
спасибо тебе большое!
Купил новый хард, ставлю свежие проги и т.д., столкнулся с проблемой кривого шрифта. Благодаря этой короткой статье всё решил за 30 секунд. Плюсую :)
Годно, спасибо, получилось!!) А то я уже глаза сломала :DD
У меня всё получилось! Спасибо автору!))
Спасибо огромное! Здоровья вам!)
Работает. Спасибо тебе
Спасибо большое! Мои глаза будут благодарны тебе всю оставшуюся жизнь!
Спасибо большое, и за ссылку точную спасибо
Мои глаза тебе очень признательны)
автор, если есть еще идеи для нового хрома, буду рад посту) спасибо
Красавчик, спасибо от души! Буду в Новосибирске - привезу пиво, ты спас мои глаза!))Какая версия браузера ,у меня версия 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
Сегодня утром была такая проблема. Не вижу ничего и все - ближе к монитору приходилось наклоняться, чтоб рассмотреть. Помог сон) 5 часов продрых и буквы видать четенько )
Это, конечно, помогает где-то, но, например, в чате твича остаётся жутчайшее мыло. Я даже бросил смотреть через браузер и перешёл на плеерную альтренативу с чатиком через irc-клиент.
У меня другая проблема :)) При переключении видео в полный экран с любого сайта через гугл хром - черный экран, звук есть видео идет, но черный экран. Так же было и с еджем, то убрав галки ActiveX вроде в едже стало норм. А вот в хроме черный экран всякий раз как разворачиваю полный экран :( Печаль
Специалисты компании Proofpoint предостерегают пользователей Windows и браузера Chrome: хакеры придумали новый трюк и теперь маскируют свои атаки под загрузку дополнительного пакета шрифтов.
Поверх страницы, которая становится нечитаемой из-за действий скрипта, атакующие выводят всплывающее окно, которое сообщает жертве, что на ее компьютере не хватает некоего специфического шрифта, и для нормальной работы ресурса шрифт необходимо скачать и установить. Закрыть это окно, нажав на крестик в углу, не получится.
Согласно данным специалистов Proofpoint, эта кампания использует известную цепочку заражений EITest, впервые задокументированную еще в 2014 году. Тогда EITest прочно ассоциировалась с атаками различных эксплоит-китов (к примеру, Angler и Neutrino), которые заражали пользователей шифровальщиками, вредоносами для похищения данных и прочей малварью. Операторы EITest использовали простую тактику, очень похожу на описанную выше: они компрометировали большое количество сайтов, эксплуатируя известные уязвимости (преимущественно жертвами становились ресурсы, работающие под управлением WordPress и Joomla). Затем злоумышленники перенаправляли небольшую часть трафика с зараженных ресурсов на вредоносные страницы, подвергая пользователей атакам эксплоит-китов и заражая их вирусами.
При этом злоумышленники всегда действовали выборочно, отбирая пользователей, подходящих под те или иные критерии. Новая вредоносная кампания тоже опасна только для пользователей из определенных стран (каких именно, эксперты не сообщают), использующих Chrome и Windows.
Исследователи сообщают, что пока новая вредоносная кампания распространяет крик-фрод вредоноса Fleercivet, который за спиной пользователя скликивает рекламу, принося деньги своим владельцам.
Читайте также: