1

私はcss3の@font-faceを使用して、ページ見出しに画像を使用せずにWebサイトにいくつかのフォントを配置しています。

ただし、段落や改行のようにフォントフェースを使用すると、見出しの下にギャップが作成されることがわかりました。ギャップサイズはフォントサイズを基準にしており、サイズを大きくすると大きくなります。

私が使用しているフォントの種類は比較的小さいAsenineなので、サイズを60pxに設定しています。

なぜこれが起こっているのかわかりませんし、修正を見つけることができないようです。

これが私のCSSです

}
@font-face {
    font-family:'asenine';
    src: url('fonts/asenine.eot');
    src: url('fonts/asenine.eot?#iefix') format('embedded-opentype'),
    url('fonts/asenine.woff') format('woff'),
    url('fonts/asenine.ttf') format('truetype');
 }
 h1{
    font-size:60px;
    font-family:asenine, Arial, Helvetica, sans-serif;
    text-shadow:7px 3px 4px #0c0c0c;
    font-weight:100;
}
4

1 に答える 1

2

これは、行の高さが原因で発生している可能性があります。フォント サイズが大きいほど、行の高さが大きくなります。また、フォント関連の設定には CSS の短縮形を使用してください。

h1 { 
    font: normal 60px/0 'asenine', Arial, Helvetica, sans-serif; 
    text-shadow:7px 3px 4px #0c0c0c;
}

最初の行は、通常の太さ、60px のフォント サイズ、0px の行の高さ (スペースを削除するため)、font-families を意味します。

于 2012-08-27T10:21:55.880 に答える