Почему мой пользовательский шрифт имеет смещение положения в некоторых браузерах? - PullRequest
Новая
       37

Почему мой пользовательский шрифт имеет смещение положения в некоторых браузерах?

4 голосов
/ 28 августа 2011

При работе на моем сайте www.monkey-touch.com я начал использовать собственный шрифт для заголовков и в некоторых других местах. Он отлично выглядит и благодаря шрифту-белке работает во всех браузерах.

Однако позже я понял, что шрифты отображаются в некоторых браузерах по-разному. Chrome, Opera и Safari отображают пользовательский шрифт немного выше, чем другие. Это не такая уж большая проблема, но при попытке добавить другую страницу http://monkey -touch.com / sandbox / products.php с нестандартным шрифтом большого размера смещение увеличивается до точка, где это очень неприятно, так как текст отображается за пределами div.

Обратите внимание, что проблема, по-видимому, не имеет ничего общего с ошибочным стилем CSS для других элементов div, поскольку даже рендеринг шрифта в теге body без других элементов div имеет смещение, как можно видеть здесь: .com / Sandbox2 /

Может кто-нибудь сказать мне, почему это так и как лучше всего решить проблему?

Мой css для font-face: 

@font-face {
font-family: 'Bebas';
src: url('bebas-webfont.eot');
src: url('bebas-webfont.eot?#iefix') format('embedded-opentype'),
     url('bebas-webfont.woff') format('woff'),
     url('bebas-webfont.ttf') format('truetype'),
     url('bebas-webfont.svg#Bebas') format('svg');
font-weight: normal;
font-style: normal;

}

Спасибо всем заранее.

Ответы [ 3 ]

3 голосов
/ 29 августа 2011

Я понял это довольно странно и состоит из двух вещей.

1) .ttf и .eot, которые я получил от шрифта-белки, были бесполезны. Получение оригинального .ttf с сайта шрифтов и его преобразование в .eot было необходимо для правильного воспроизведения. Я не знаю, действительно ли это ошибка шрифтовой белки, потому что различия в представлении кажутся очень произвольными и странными, см. Также пункт 2).

2) Удаление записи .woff из css. .Woff был добавлен только для безопасности, я не был уверен, использовался ли он кем-либо, но, похоже, все браузеры по-прежнему отображают его правильно.

Это кажется очень странным, потому что все задействованные браузеры используют один и тот же .ttf (кроме IE8 и менее, которые используют .eot), но отображают его по-разному. Также .woff должен быть удален, почему? Хотя я решил свою проблему, она все еще кажется довольно случайной и странной. Если кто-нибудь знает больше об этом материале, я хотел бы знать.

Я надеюсь, что этот вопрос пригодится другим. font-face еще предстоит пройти долгий путь, чтобы быть простым в использовании, и браузеры должны быть более осторожны в отношении его соответствия.

0 голосов
/ 20 марта 2012

Проблема вызвана тем, что браузер отказывается вычислять точные границы глифов (сделано ради производительности.)

Решение этой проблемы заключается в добавлении одной строки текста в ваш CSS: 

text-rendering:optimizeLegibility;

эта строка может быть добавлена ​​в CSS элемента div, который требует этого, и таким образом дополнительная обработка остальной части страницы не выполняется.

0 голосов
/ 28 августа 2011

Вам необходимо указать высоту строки.Попробуйте 

body,html
{
    line-height: 18px; /* or whatever height you want */
}
...