CSS3に@font-faceが導入されたことにより、Webデザイナーはすべてのブラウザーで同じように見えるフォントを使用できるようになりました。それは、 jsFiddleの次のコードで試してみるまで私が考えていたものです。
HTML:
<div>
The_Quick_Brown<br>
Fox_Jumps_Over<br>
The_Lazy_Dog
</div>
CSS:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
div {
display: block;
width: 496px;
height: 86px;
font-size: 1.3em;
font-family: 'Open Sans';
font-style: normal;
margin: 0;
border: 0;
padding: 0;
background: cyan;
letter-spacing: 1.44em;
line-height: 1.44;
overflow: hidden;
}
これはFirefox12.0からのビューです。'brown'の部分的に隠された'o'、'dog'の'g'の位置、および下端のアンダースコア'_'に注意してください。
これはGoogleChrome19.0からのビューです。
letter-spacing
明示的に設定し、同じフォントを使用しているにもかかわらずline-height
、結果が異なるのはなぜですか?