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

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

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/

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

источник

2013-07-10 burtyish

пожалуйста @ font-face комплект скачать, и eot, woff, svg, ttf и используется местный шрифт. – falguni

Работает отлично для меня во всех браузерах. Я использую последние версии для всех. – Nitesh

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

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

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

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

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

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

источник

2013-07-10 13:28:07

Было сложно выбрать между этим и ответом Пита. Я выбрал этот вариант для ссылки и обширного объяснения. – burtyish

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

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

CSS

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

источник

2013-07-10 13:17:55 Pete

Протестировал его со скрипкой, представленной ИТЧристианином, и это, похоже, исправило проблему. – defaultNINJA

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

я использовал @import, нет ссылок реф.

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

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

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

источник

2013-07-10 13:22:45

Хммм ... должен проблема с версией. IE и Chrome отображаются по-разному для меня в скрипке. Я понял, что это проблема рендеринга. У меня были проблемы с этим при создании пользовательских кнопок с подсветкой. – defaultNINJA

Причина, по которой текст в вашей скрипке подходит в одной строке, заключается в том, что вы использовали размер шрифта размером 12 пикселей вместо 13 пикселей. – burtyish

Да, я использовал font-size: 12px; –

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

источник

2013-07-10 13:30:40 ajdigregorio

Посмотрите на его HTML. Он использует шрифт google. – defaultNINJA

oh duh. В этом случае он должен, вероятно, просто изменить интервал. – ajdigregorio

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

ответ

Смежные вопросы