Почему этот абзац отличается в разных браузерах?

Question

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

См: Firefox:

blabla http://piclair.com/data/ho0b9.jpg

Chrome:

Chrome http://piclair.com/data/mx336.jpg

Safari:

Safari http://piclair.com/data/q5ygn.jpg

Мой CSS:

#myslogan { 
float: left; 
margin-top: 50px; 
margin-left: 0px; 
width: 290px; 
height: 75px; 
background: url('../images/subhlogobg.png') no-repeat; 
padding: 3px 0 0 11px; 
line-height: 35px; 
} 

p.subs { 
font-weight: bold; 
display: inline; 
color: #F0821F; 
font-size: 23px; 
} 

.harabara { 
list-style: none; 
font-family: 'harabararegular'; 
letter-spacing:1px; 
} 

Мой HTML:

<div id="myslogan" class="harabara"> 
    <p class="subs">Logo en huisstijl ontwerp <br /> 
    voor een scherpe prijs! 
    </p> 
</div> 

Answer 1

Вы определили свой родительский контейнер #myslogan с фиксированной шириной.

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

Различные браузеры имеют разные шрифты по умолчанию (следовательно, размер букв/интервал), поэтому ширина линии будет варьироваться в зависимости от платформы.

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

Answer 2

Различные браузеры обрабатывают шрифты по-разному. Возможно, это question.

Answer 3

Я сдавался

1. начертание шрифта
2. письмо-интервал

И я хотел бы использовать с самого начала жирным шрифтом, чтобы избежать эти большие разницы. http://www.dafont.com/harabara.font?text=Logo+en+huisstijl+ontwerp&psize=s проверите свой текст оттуда и посмотрите, какая разница, будет разница, браузер не будет рисовать и отображать полицию одинаковыми методами.

Answer 4

Из-за симптомов кажется, что вы используете шрифт «harabararegular», предположительно как загружаемый шрифт, и вы используете обычный (не жирный) шрифт. Если запрашивать браузеры для смелости, это приведет к алгоритмическому смещению (утолщению штрихов); результаты типографически бедны и зависят от браузера. (Существует много других причин различий в рендеринг шрифтов, но здесь это имеет решающее значение.)

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