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