18

GooglewebfontsAPIを使用してDroidSansをページに埋め込みます。子孫（つまり、y、gなどのぶら下がっているビット）を除いて、すべて問題ありません。私のWindowsVistaボックス上のFirefox、IE、Chromeの最新バージョンは、すべて底を打っています。

<!DOCTYPE html>
<html>
<head>
 <title>Droid sans descender test</title>
 <meta charset="utf-8">
 <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
 <style type="text/css">
  body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
  h1, h2, h3 { margin: 1em 0; font-weight: normal; }
  h1 { font-size: 2em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1em; }
 </style>
</head>    
<body>
 <h1>A bug ran under the carpet anyway</h1>
 <h2>A bug ran under the carpet anyway</h2>
 <h3>A bug ran under the carpet anyway</h3>
</body>
</html>

上記のコードは次のようになります。

ディセンダーが切断される
（出典：thinkdrastic.net）

私は、、などを無駄に試しline-heightましたfont-size。paddingである程度の成功を収めましfont-size-adjustたが、最後にチェックしたのはGeckoだけでした。誰かがこれの修正を知っていますか？

4

8 に答える 8

12

@adamliptrotの助けを借りて、Droid Sansのディセンダーがいくつかの正確なピクセルサイズ（18、22、27px）で完全に正常であることを発見しました。それに応じてemを調整しました：

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

理想的ではありませんが、機能します。

子孫が機能します！
（出典：thinkdrastic.net）

于 2010-06-03T16:35:07.123 に答える
5

あなたの質問は Google Web Fonts API に関するものですが、以下の私の回答の原則は同じです。

TrueType フォントを提供しているときに子孫がカットオフされている場合、最も可能性の高い原因は、OS/2 メトリックがフォントに正しく (負に) 設定されていることです。

調整が必要な値は WinAscent と WinDescent です。

手っ取り早い修正方法は、これらの両方を 0 に調整することです。

これは、 Font Forgeを使用して実行できます。FontForge でフォントを開くと、[フォント情報] ダイアログからこれらのパラメーターにアクセスできます。

于 2012-05-10T13:41:08.810 に答える
3

参照されている ttf ファイルを確認しましたが、Windows フォント ビューアーでもディセンダーが切り取られています。スタイルではなく、提供されているフォントに問題があるようです。

于 2010-06-03T14:52:12.080 に答える
3

Font Squirrel を使用している場合、sans バリアントの問題は解決されたようですが、Font Squirrel の serif バリアントの問題は残ります。

セリフ バリアントを修正するには、Web フォント ジェネレーターに移動し、必要なフォント ファイルを読み込みます (提供されるパッケージに依存しないでください)。

[Expert] ラジオ ボタンをクリックし、すべての設定をそのままにして、[Advanced Options] で [Em Square Value] を [2162] に変更し、フォントを生成します。

これにより、すべてのサイズでフォントが適切にレンダリングされます

于 2013-04-12T16:29:11.790 に答える
1

私たちは同じ問題を抱えていました... font squirrelを使ってみました。Google Web フォントを使用してみました。フォントは、g のような「ぶら下がっている」文字を切り取り続けました。また、Google がホストするバージョンは、他のバージョンほど正確で明確ではありませんでした。フォントが少しぎこちないように見えました。

私たちのソリューション:

Web 用にフォーマットせずにフォントをホストしました。次に、ttf ファイルを svg、.eot、および .otf に変換し、それらを ie および mozilla などの修正としてアップロードしました。

于 2011-12-16T06:27:07.620 に答える
0

上部のヒントの場合 - font-size を変更すると....

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

うまくいかない場合は、ディセンダーを切り取っている要素に「line-height」を追加してください。``

于 2012-05-31T14:19:58.907 に答える