Шрифт відображається по-різному в 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 доступний скрізь, але хром повернувся до романських часів, дещо менше, шрифти за замовчуванням мали ті самі результати (хромовані різні), які мене трохи ввели в оману.

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

У мене була подібна проблема і знайшлося рішення:

Використання:

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

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

Я вирішив видалити стиль для веб-сайту і залишити його на місці для інших браузерів. Зараз добре виглядає.

У мене була схожа проблема з Open-Sans, це зробило це для мене:

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