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

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

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

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

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

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

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

Я заметил, что chrome имеет тенденцию делать шрифты немного более резкими, а firefox-более плавным. Вы ничего не можете с этим поделать. удачи!--1-->

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

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

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

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

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

@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 webfont. Если вы используете любой другой шрифт, просто скопируйте и измените 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;
}

сделано. Просто применяйте правило font-family везде, где вам нужно.

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

Я нашел, что это работает :

-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;