Каждый.Шрифты отображаются разными в chrome/firefox
У меня возникают проблемы с отображением моей страницы в разных браузерах. Здесь я использую шрифт «Myrid Set Pro».
Я получаю правильно в хроме. но не в firefox. Я прикрепляю эти файлы.
Вот первый из них является предварительный просмотр в Chrome. И второй - Предварительный просмотр в Firefox.
Я также пробовал текстовое отображение. Но нет Использование
text-rendering: optimizelegibility;
В настоящее время нет консенсуса по этой теме. Позорно, есть много трюков, но нет конкретных решений для этой проблемы.
Проблема в том, что каждый браузер и оперативная система обрабатывает шрифт по-разному. Вот почему так сложно получить одинаковые результаты в веб-браузерах и системах.
Этот же вопрос был задан несколько раз здесь, на SO:
1.- How do I get font to display properly in all browsers?
2.- Same font yet its weight seems different on different browsers
Ниже я перечислю некоторые из предложенных решений; Однако возможно, что они не будут работать:
// @Mohamed Anis Dahmani
html, html a {
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
// @oneiota
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
А также есть еще один, используя translate3d: webfont-rendering-fix.css
body {
-webkit-transform: translate3d(0px, 0px, 0px); /* Force hardware acceleration to fix safari opacity bugg*/
}
Мое предложение, искать веб-безопасные шрифты http://cssfontstack.com/, которые сводили бы к минимуму воздействие шрифта рендеринг через веб-браузеры и оперативные системы.
У меня была такая же проблема в прошлом. Ознакомьтесь с этой статьей о шрифтах в браузерах - надеюсь, это поможет решить вашу проблему.
http://alistapart.com/article/say-no-to-faux-bold
Обновление с новой информацией:
я нашел гораздо более простой способ решения этой (как для меня, оказалось, что это происходило только на Firefox для OSX) - добавить следующие строки в файл базы типографика CSS:
-moz-osx-font-smoothing: grayscale;
Там будет больше информации в этом C Обсуждение SS-Tricks.com: https://css-tricks.com/forums/topic/typekit-fonts-much-bolder-in-firefox/page/3/
В то время как в заголовке обсуждения форума специально упоминаются шрифты Typekit, решение прекрасно применяется к шрифтам Google.
выглядит как шрифт тот же, но имеет определенную разницу в рендеринге, как в хром, заголовок выделен жирным шрифтом, но не в forefox. –
@NishadNichoos Как решить это. Мне нужно это исправить. Оба должны выглядеть похожими – mani
, пожалуйста, проверьте это: http://stackoverflow.com/questions/4698564/fonts-looks-different-in-firefox-and-chrome –