Шрифты выглядят по-разному в Firefox и Chrome - PullRequest
37 голосов
/ 15 января 2011

Я использую PT-sans Google Web Font

font-family: 'PT Sans',Arial,serif;

но в Chrome и Firefox это выглядит по-разному

Что мне нужно добавить, чтобы оно выглядело одинаково во всех браузерах?

Ответы [ 10 ]

22 голосов
/ 11 декабря 2011

Для шрифта ChunkFive из FontSquirrel, указав "font-weight: normal;" остановил рендеринг Firefox как задницу при использовании в заголовке. Похоже, что Firefox пытался применить поддельный жирный шрифт к шрифту, который имеет только один вес, а Chrome - нет.

12 голосов
/ 06 сентября 2012

Для меня веб-шрифты Chrome выглядят паршиво, пока я не поставлю SVG-шрифт выше WOFF и TrueType.Например:

@font-face {
    font-family: 'source_sans_proregular';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Даже в этом случае шрифты Chrome выглядят тоньше, чем в Firefox или IE.На данный момент Chrome выглядит хорошо, но обычно я хочу установить разные шрифты в IE и Firefox.Я использую смесь условных комментариев IE и jQuery для установки разных шрифтов в зависимости от браузера.Для Firefox у меня запускается следующая функция при загрузке страницы:

function setBrowserClasses() {
    if (true == $.browser.mozilla) {
        $('body').addClass('firefox');
    }
}

Затем в моем CSS я могу сказать

body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }

Аналогично, в таблице стилей только для IE, включенной вТо есть условные комментарии, могу сказать:

body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
6 голосов
/ 12 мая 2015

Есть несколько исправлений. Но обычно это можно исправить с помощью:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Иногда это может быть связано с 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, но я думаю, что вам, вероятно, это не понадобится, если вы используете первый фрагмент кода, который я дал.

5 голосов
/ 16 февраля 2013

Чтобы избежать несоответствия шрифтов в разных браузерах, избегайте использования стилей CSS для изменения внешнего вида шрифта. Использование свойства font-size обычно безопасно, но вы можете избегать таких вещей, как font-weight: bold; вместо этого вы должны загрузить жирную версию шрифта и дать ему другое имя семейства шрифтов.

5 голосов
/ 15 января 2011

Сброс CSS может решить проблему, я не уверен.

http://developer.yahoo.com/yui/reset/

5 голосов
/ 15 января 2011

Я заметил, что хром делает шрифты немного четче, а Firefox - немного плавнее. Вы ничего не можете с этим поделать. удачи

3 голосов
/ 27 февраля 2014

Начиная с 2014 года, в Chrome по-прежнему существует известная ошибка, при которой, если на используемом веб-шрифте установлена ​​локальная копия, он решает использовать локальную версию, что вызывает проблемы с отображением OP.

Чтобы исправить это, вы можете сделать следующее:

Сначала выберите целевой браузер Chrome или OSX (для меня проблема была только в OSX Chrome).Я использовал этот простой JS для быстрого обнаружения браузера / ОС, вы можете сделать это любым другим способом, к которому вы привыкли:

https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js

Теперь, когда вы можете настроить таргетингв браузере / операционной системе создайте следующий «новый» шрифт:

@font-face {
    font-family: 'Custom PT Sans';    
    src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

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

Получить URL можно здесь http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

Вы также можете переименовать свой псевдоним @ font-face для собственного семейства шрифтов.

Создать простое правило CSS, чтобы использовать этот таргетинг шрифта.Браузер / ОС или оба:

.mac .navigation a {    
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Или

.mac.webkit p {
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Готово.Просто применяйте правило семейства шрифтов везде, где вам нужно.

2 голосов
/ 13 февраля 2014

Я обнаружил, что это работает отлично:

-webkit-text-stroke: 0.7px;

или

-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);

Поэкспериментируйте со значением "0,7", чтобы приспособиться к вашим потребностям.Строки добавляются, где вы определяете шрифт bodys.

вот пример:

body {
    font-size: 100%;
    background-color: #FFF;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    font-weight: lighter;
    -webkit-text-stroke: 0.7px;
2 голосов
/ 15 января 2011

Разные браузеры (и FWIW, разные ОС) используют разные механизмы рендеринга шрифтов, и их результаты не должны быть идентичными.Как уже указывалось, вы ничего не можете с этим поделать (если, конечно, вы не можете заменить текст изображениями или flash или внедрить свой собственный рендерер, используя javascript + canvas - последний будет немного за борт, если вы спросите меня).

0 голосов
/ 04 января 2019

У меня была такая же проблема в течение нескольких месяцев.Наконец, это сработало, отключив указанные ниже настройки в настройках браузера Chrome.

Установите для «Ускоренного 2D холста» значение «Отключено» (В адресной строке браузера перейдите к chrome: // flags # disable-accelerated-2d-canvas, измените настройку, перезапустите браузер.)

Поскольку исправление этой проблемы явно изменилось, я бы предложил вообще отключить любые аппаратно-ускоренные функции рендеринга текста / 2D-рендеринга в будущем.если это исправление перестает работать.

В Google Chrome 55 эта проблема, похоже, снова возникла.Как и предполагалось, исправление отключало аппаратное ускорение, оно просто меняло местоположение.

Новое исправление (для меня) выглядит так:

Настройки -> Показать дополнительные настройки ... -> СистемаUNCHECK "Использовать аппаратное ускорение, когда доступно"

https://superuser.com/questions/821092/chromes-fonts-look-off

...