2

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;
}

Firefox 12.0

これはFirefox12.0からのビューです。'brown'の部分的に隠された'o'、'dog'の'g'の位置、および下端のアンダースコア'_'に注意してください。

Google Chrome 19.0

これはGoogleChrome19.0からのビューです。

letter-spacing明示的に設定し、同じフォントを使用しているにもかかわらずline-height、結果が異なるのはなぜですか?

4

2 に答える 2