Базовое несоответствие в шрифтах между Firefox / Mac и Safari / Mac или Firefox / Win

Question

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

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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