10

段落の行の下にある文字 (g や y など) が途切れる理由がわかりません。行の高さを高く設定してみましたが、それでも途切れてしまいます。px、pt、および em で font-size を試しましたが、まだうまくいきません。font-size をもっと大きく (3.0em のように) 設定すると、問題はなくなります。しかし、フォントはこのくらいのサイズにする必要があります。

リンクは次のとおりです。http://sportegy.com/font-test/font-test.html

問題を実際に確認するには、リンクを使用して、私が持っている .ttf フォントを表示する必要があります。ただし、ここにも HTML を貼り付けます。

<html>
<head>
<style>
@font-face {
font-family: lib-font;
src: url('css/LiberationSansNarrow-Regular.ttf');
}
@font-face {
font-family: lib-bold;
src: url('css/LiberationSansNarrow-Bold.ttf');
}   
</style>
</head>
<body>

<span style='font-family: lib-font;color: #232322;font-size: 1.0em;'>   
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy. 
</span>

4

6 に答える 6

25

試す

line-height: normal;

いくつかの人々の問題を修正したようです。

于 2013-02-11T03:34:23.113 に答える
3

行の高さを次のように増やしてみてくださいline-height: 1.2;

フォントサイズを 1.1em まで上げても、途切れることはありません。

Normalizeのような CSS リセットを使用することをお勧めします。

于 2013-02-11T01:40:45.633 に答える
1

正確に 16 ピクセル (私のブラウザでは 1em) でしか再現できないため、ここやここで説明されているようなフォントの問題が疑われます。

フォントをそのまま使用して 16px を回避するか、(リンクで説明されているように) 自分でフォント メトリックを修正するか、フォント作成者に電子メールを送信するか、別のフォントを選択することができます。たくさんの優れた無料フォントがありますが、すべて最高です :)

于 2013-02-11T03:59:55.930 に答える
0

正直なところ、このエラーを修正するために私が見つけた唯一の方法は、フォント サイズを変更することのようです。主に Chrome で、特定のカスタム フォントにいくつかのエラーがあるようです。

私は同じ問題を抱えていて、フォントサイズを から30pxに変更しましたが、今は問題ありません32px:)

于 2014-07-25T13:12:36.137 に答える
0

これは、フォント ファイルのディセンダー値が短すぎるためです。ディセンダーは、p、g、q、y などの文字です。これらの文字はベースラインの下に到達するため、フォント ファイルには最下位のディセンダーより大きい値が含まれている必要があります。ブラウザーは、アセンダーとディセンダーの値をフォントの「コンテナー」と見なすため、これらの値を超える要素はすべてカットされます。このため、問題はフォント ファイル自体にあるため、CSS はこの問題を修正できません。

これを修正するには、フォント ファイルを編集して値を変更するしかありません。元のデザイナーに手を差し伸べてみてください。

残念ながら、これはフリーフォントで必ず発生します...

于 2014-11-12T18:35:03.923 に答える