Исходная несогласованность шрифтов между Firefox/Mac и Safari/Mac или Firefox/Win

Отметив странную аномалию рендеринга в Firefox 3.5/3.6 (не пробовали другие версии) в Mac OS X. Оглядываясь, я видел похожие проблемы, о которых сообщалось и обращалось, но большинство из них были окружены высотой линии CSS, нормальный, в отличие от единицы измерения.

Возьмите следующий код:

<style>
    h1{
        background-color:#f00;
        font-size:40px;
        line-height:40px;
    }
</style>

<h1>This is a test</h1>

В Firefox для Mac базовая линия текста находится выше, чем в других браузерах, включая Firefox для Windows. Кто-нибудь сталкивался с этой проблемой раньше? Это только Firefox для Mac, это нечетный браузер. Я также заметил, что это шрифт; переход к Arial, например, оказывает повсеместно. К сожалению, изменение шрифта для меня не является вариантом. И я хотел бы избежать создания изображений типографики, если смогу.

Я благодарен за понимание! Спасибо, что посмотрели!

Ответ 1

Вы представили очень убедительный пример небольших различий между рендерингом шрифтов в Firefox для Mac и другими браузерами. Я бы сказал, что FF на Mac здесь ошибается, поскольку даже установка vertical-align: baseline; не изменяет результат.

Тем не менее, нет абсолютно никаких оснований использовать изображения здесь для эмуляции любого браузера. Веб-сайт не должен выглядеть одинаково во всех браузерах.

Ответ 2

Вероятно, проблема возникает из-за того, что Mac и Safari настроены на типографию гораздо больше, чем любой другой браузер или операционная система. Вероятнее всего, правильно отобразить шрифты, поскольку они должны отображаться. Я читал об этом в бесчисленных случаях за эти годы, но, к сожалению, не могу вспомнить ни одно из этого, кроме этого. Я уверен, что кто-то придет со ссылкой, которая объясняет это далее.

Ответ 3

Я знаю, что это старый вопрос, но я наткнулся на него, когда искал обходной путь для той же проблемы. Из большого количества исследований и тестирования он кажется одним из тех вещей типа "Windows против остального мира" (неожиданное удивление!), Поэтому здесь мое исправление jQuery...

var OSName="";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="windows";
$('html').addClass(OSName);

Затем я просто нацелил h1 на html.windows h1, чтобы исправить разницу с css в Windows.

Может помочь кому-то в будущем!