Различная ширина шрифта в браузере Chrome

Question

Некоторый текст на моем сайте странно разбит на две строки в Chrome. На FF и IE он отлично вписывается в один ряд. Я читал, что браузеры могут иметь свой способ рендеринга шрифтов. Есть ли способ это исправить?

HTML:

<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<div class="text-centered span3">                        
    <p>Wnii tagfF rouirsoSan olwre.i dlyrbr peato.</p>                       
</div>

CSS:

.span3 {
    width: 240px;
}
p {
    font-family: 'Signika';
    font-size: 13px;
}

Ссылка на скрипку: http://jsfiddle.net/yishaib/Qqgxt/

* Очевидно, я зашифровал текст.

Answer 1

НЕТ никакого способа сделать так, чтобы шрифт отображался идентично кросс-браузер / кросс-ос.

Typekit опубликовал статью на эту тему: http://blog.typekit.com/2010/12/17/type-rendering-review-and-fonts-that-render-well/ и http://blog.typekit.com. / 2010/10/21 / тип рендеринга-веб-браузеры /

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

Теперь, если вы попытаетесь отобразить шрифт, который НЕ установлен на компьютере, браузер попытается ухудшить рендеринг, чтобы показать какой-то шрифт, который выберет браузер. В основном выбирается из "засечек" - "без засечек" - "моноширинный".

Если вы связываете свой шрифт как внешний источник (typekit - googlefonts и т. Д.) С @ font-face, браузеры будут отображать то, что они получают, с использованием ресурсов. Помните, что любой браузер будет "отображать" ваш контент (скажем, изображение) так, как он это делает.

Изображение не будет иметь одинаковые цвета от браузеров до браузеров, вызванные движками рендеринга, которые должны иметь дело с пикселями, глубиной пикселей, разрешением, языком и тысячами элементов. Кто-нибудь?

Answer 2

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

В вашем случае, однако, вы можете повозиться с межбуквенным интервалом. Это не идеально, но я могу заставить текст оставаться на одной строке в Chrome, установив межбуквенный интервал -1px.

CSS

p {
font-family: 'Signika';
font-size: 13px;
letter-spacing: -1px;
}

Answer 3

Я проверил в Chrome, и я решил эту проблему:

Я использовал @importСсылка отсутствует.

Проверьте мою скрипку:

http://jsfiddle.net/Qqgxt/12/

@import url(http://fonts.googleapis.com/css?family=Signika);

Answer 4

Да, рендеринг шрифтов может быть большой проблемой и обычно трудно исправить. Другая проблема может заключаться в том, что "Signika" не является веб-шрифтом, распознаваемым Google Chrome. Попробуйте импортировать файл шрифта через Google шрифты, если они есть.