@ font-face приводит к совершенно другим результатам в браузерах - PullRequest
Новая
       4

@ font-face приводит к совершенно другим результатам в браузерах

4 голосов
/ 27 октября 2011

Просто захватите пакет @font-face для нашего веб-сайта и вставьте следующий код CSS: 

@font-face {
    font-family: 'CartoGothicProLight';
    src: url('fonts/cartogothicpro-light-webfont.eot');
    src: url('fonts/cartogothicpro-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/cartogothicpro-light-webfont.woff') format('woff'),
    url('fonts/cartogothicpro-light-webfont.ttf') format('truetype'),
    url('fonts/cartogothicpro-light-webfont.svg#CartoGothicProLight') format('svg');

    font-weight: normal;
    font-style: normal;
}

К сожалению, результаты действительно разные в каждом браузере.Только Firefox делает это правильно как в Windows, так и в OSX;остальные повсюду.

Вот что мы видим:

Любые советы или признаки того, что может быть неправильным / поведение браузера со шрифтамибудет очень признателен.

1 Ответ

1 голос
/ 27 октября 2011

Говоря из личного опыта.

@font-face на самом деле работает нормально, а техника, которую вы использовали, в порядке - это скорее проблема файла шрифта.

Некоторые шрифты будут хорошо отображаться в кросс-браузерах (читайте "результат приятен и читабелен для глаз"), а некоторые просто получат неправильный шрифт .Я обычно стараюсь использовать несколько похожих шрифтов и вижу, какой из них дает наилучшие результаты в разных браузерах, поскольку не все браузеры используют один и тот же процесс хинтинга.

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

Надеюсь, я дал вам некоторое представление о том, что может происходить, хотя вряд ли смогу дать вам исправление для этого точного примера.

...