Шрифт по-разному отображается в Firefox и Chrome

Кажется, что моя строка меню отображается в Firefox с другой растяжкой шрифта, чем в Chrome. Смотрите следующее:

Вот CSS, примененный к этому элементу:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

Насколько я могу судить, все относительно этого шрифта точно такое же, но они по-прежнему отображаются по-разному (см. Рис.). Почему?

Chrome использует механизм рендеринга WebKit. Firefox использует движок Gecko. И интерпретировать, и отображать тип немного по-разному, как это делают графические движки DirectX и Vega, используемые в IE9 + и Opera.

Вы не можете заставить браузеры отображать текст одинаково, но вы можете сделать несколько вещей, чтобы обеспечить одинаковую ширину навигации в браузерах:

1. Используйте изображения или SVG вместо типа для элементов панели навигации. Это может оказаться полезным, если ваша область навигации вряд ли будет часто меняться. например, www.apple.com

2. Зафиксируйте ширину каждого элемента навигации с помощью CSS. Размер текста в браузерах будет выглядеть по-разному, но если вы дадите каждому <li>элементу в своей области навигации фиксированную ширину в пикселях, ограничивающая рамка каждой ссылки будет очень похожа во всех браузерах, и общая ширина области навигации должна быть одинаковой.

Различия в рендеринге шрифтов между разными браузерами (и в разных операционных системах) - это реальность. Вам просто нужно убедиться, что если шрифт будет отображаться с разной шириной, ваш дизайн все равно справится.

В случае, если кто-нибудь сталкивался с этим, для меня проблема была letter-spacing. Chrome и Firefox обрабатывают свойство по-разному.

Моя проблема заключалась в том, чтобы letter-spacingповлиять на положение других элементов; в частности, некоторые изображения в навигационном меню. Удалив имущество, моя проблема была мгновенно решена.

Я также читал, что использование .pointдвух значений может иметь эффект изменения между двумя браузерами, что было верно в моем случае.

вид той же проблемы, заявленной здесь

вы можете сбросить CSS

http://developer.yahoo.com/yui/reset/ надеюсь, что вы не получите некоторую подсказку

Я обнаружил, что webkit будет поддерживать px для размера шрифта, но для таких вещей, как межбуквенный интервал, они будут игнорировать все вместе, если вы не используете em.

После тестирования 6 браузеров / 4 движка рендеринга на двух ОС. Я обнаружил, что большинство из них были одинаковыми даже с межстрочным интервалом Я рассмотрю разницу с Windows и Linux через минуту.

Я думал, что шрифт Palatino был доступен везде, но Chrome вернулся к временам римского, который немного меньше, шрифты по умолчанию имели те же результаты (разные Chrome), что вводило меня в заблуждение на некоторое время.

В любом случае, если вы укажете времена римские или используйте @fontface для предоставления файлов шрифтов! Вы можете сделать ваши навигационные панели более приятными ;-)

У меня была похожая проблема, и я нашел решение:

С помощью:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

В Firefox это выглядит великолепно. В Chrome расстояние между буквами было странным. Удаление optimizelegibilityстиля сделало свое дело. Оба браузера теперь отображаются одинаково.

Я решил удалить стиль для webkit и оставить его на месте для других браузеров. Выглядит хорошо сейчас

У меня была похожая проблема с Open-Sans, это сделало это для меня:

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;