15

I often embed webfont (@font-face) in sites that I develop and I have never encountered a major problem until today.

In fact, I feel there is a big issue with the line-height, I'm not extremely good at English so I'll try to illustrate it with pictures. I already contact the support from fontshop.com (where the font was bought) but they do not seem to understand / solve the problem.

What we had before with standard desktop font (= rendering is good for us):

What we had with the font-face (no change in CSS stylesheet):

Here is the CSS:

#content h1 {
    background:#000000;
    color:#FFFFFF;
    font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
    font-size:35px;
    line-height:30px;
    padding:10px;
    text-transform:uppercase;
}
4

7 に答える 7

5

それは同じフォントではありません。O の形状と R のアームの曲率が原因で、フォールバック フォントが使用されている可能性があります。前述のように、フォントが異なればデフォルトの間隔も異なります。これにより、行の高さの問題であると思われることにもなります。

次のように、代替フォントを完全に明白なものにしてみてください。

font-family:"DINPro-Bold",serif;
于 2013-09-10T22:41:17.423 に答える
0

Web フォントの行の高さに問題がある場合 (特に、プロジェクトでフォントが大きいと思われる場合)、これを試してください: div または他のブロック要素でフォントを閉じ、"overflow" を "hidden" に設定します。Div はフォントの正確な高さになるため、追加のスペースは切り取られます。

于 2014-01-17T18:18:47.763 に答える
-1

「position: relative; top: 5px;」を追加してみてください。「h1」タグに

于 2013-07-18T15:54:44.807 に答える
-2

ウィキペディアによる行の高さ

タイポグラフィでは、リーディング (見出し付きの韻) は、タイプの行間に追加される垂直方向のスペースの量を指します。

これは、このように達成できます...

.class{ 行の高さ: 1em; }

ただし、文字の高さについて言及している場合、これは調整できるものではありません。これは、使用するために選択したフォントの一部です。

于 2012-10-17T08:28:43.513 に答える