0

これは初心者の質問かもしれませんが、すべてのブラウザーで同じように表示することはできません。ここで何が間違っていますか？すべてのブラウザで、Firefox と同じようにテキストを表示したいと考えています。

参照: Firefox:

ブラブラ http://piclair.com/data/ho0b9.jpg

クロム：

クローム http://piclair.com/data/mx336.jpg

サファリ：

サファリ 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>
4

4 に答える 4

2

親コンテナー#mysloganを固定幅で定義しました。

フォントが十分に大きく、改行しないテキストの行が十分に長い場合、コンテンツがオーバーフローする可能性があります。

ブラウザーが異なればデフォルトのフォントも異なるため (文字サイズ/間隔)、プラットフォームによって線幅が異なります。

また、ブラウザによって太字の作成方法が異なるため、太字をオフにして何が起こるかを確認してください。

于 2013-06-16T12:21:16.887 に答える
1

症状から、おそらくダウンロード可能なフォントとして「ハラバラレギュラー」フォントを使用しており、通常の（太字ではない）書体を使用しているようです。ブラウザーに太字にするように要求すると、アルゴリズムによる太字 (ストロークの太さ) になります。結果は印刷上お粗末で、ブラウザによって異なります。(フォントのレンダリングの違いには他にも多くの原因がありますが、ここではこれが重要です。)

したがって、タイポグラファーがデザインしたように、ニーズに合った書体を探してみてください。また、必要がないように適切なスペースを確保する必要がありletter-spacingます。これにより、ブラウザー間で違いが生じる可能性もあります。

于 2013-06-16T14:33:25.430 に答える
0

ブラウザが異なれば、フォントの処理方法も異なります。この質問はあなたの助けになるかもしれません。

于 2013-06-16T12:22:09.837 に答える
0

私はあきらめるだろう

  1. フォントの太さ
  2. 文字間隔

そして、これらの大きな違いを避けるために 、最初から太字のフォントを使用します。http://www.dafont.com/harabara.font?text=Logo+en+huisstijl+ontwerp&psize=sそこからテキストをテストして、どのような違いがあるかを確認してください。とにかく違いはあります。ブラウザは警察を描画してレンダリングしません同じ方法で。

于 2013-06-16T12:37:07.463 に答える