Рендеринг шрифта отличается от IE по сравнению с FF и Chrome - PullRequest
Новая
       67

Рендеринг шрифта отличается от IE по сравнению с FF и Chrome

4 голосов
/ 06 марта 2012

Я заметил, что рендеринг шрифтов значительно отличается, если размер, например. 11px. Под управлением Windows 7

Используются следующие HTML и CSS 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testing font</title>
        <style>
            body {
                font-family: "Helvetica","Arial",sans-serif;
                color: #1A1A1A;
                padding: 10px;
            }

            .foo{
                font-size: 14px;
            }
            .bar{
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <div class="foo">
                <p>HOME</p>
        </div>
        <div class="bar">
                <p>HOME</p>
        </div>
    </body>
</html>

Как показывают прикрепленные изображения, FF и Chrome имеют тенденцию сужать ширину в 11px, но не в 14px. enter image description here

Почему это есть обходной путь?

Ответы [ 4 ]

5 голосов
/ 06 марта 2012

Firefox 7+ под Windows 7 использует классический режим GDI (с хинтингом) для рендеринга так называемых базовых веб-шрифтов, как Arial (так как они более четкие и читаемые с включенным хинтингом), и DirectWrite (без хинтинга)) для других шрифтов.Конкретные шрифты для использования в режиме GDI перечислены ниже: config pref: 

gfx.font_rendering.cleartype_params.force_gdi_classic_for_families

AFAIK, режим рендеринга в Firefox также зависит от размера шрифта.Для достаточно больших размеров шрифта и слишком маленьких (возможно, больше 15px и, возможно, меньше 9px) он также использует DirectWrite для основных веб-шрифтов.

IE9 в Windows 7 всегда использует DirectWrite.

Похоже, что Chrome всегда использует классический режим GDI.

1 голос
/ 06 марта 2012

Некоторые движки рендеринга шрифтов могут учитывать свойства CSS, которые другие не поддерживают (например, letter-spacing, text-rendering, font-stretch, font-size-adjust и другие - см. Модуль шрифтов CSS3 ). Вы можете попробовать поиграть с теми, кого найдете, чтобы в итоге придумать (почти) равномерный рендеринг в разных браузерах.

1 голос
/ 06 марта 2012

Различные браузеры используют разные движки.

И даже FF будет использовать другой алгоритм в Linux, нежели в Windows.

И даже пользовательские настройки (масштабирование, цветовые схемы; возможно, по причинам доступности) могут(и будет ) беспощадно нарушать ваш красивый стиль.

В качестве «обходного пути» я вижу два варианта:

  • Ну, если вам действительно нужно отчаянно, отрендерить шрифтдома и разместите PNG на сайте
  • Измените свой стиль, чтобы он не зависел от размера шрифта, типа или других пропорций.Так что он будет хорошо выглядеть (хотя бы читабельно) в каждом браузере
0 голосов
/ 30 сентября 2014

Не эксперт, но это сработало для меня ... 

 html, body {
    zoom:1; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1)
}

Похоже, что все шрифты браузера теперь отображаются в одинаковых кросс-браузерах.

...