3

line height:1フォントサイズが 255px を超えるまで UNTILを指定すると、グリフが期待どおりに配置されるという問題が発生しました。font-size を 256 に設定すると、グリフの位置が劇的に変化し、ライン上で高くなりすぎます。

Josefin Sans を取り込むために Google Web フォントを使用しています - http://www.google.com/webfonts/specimen/Josefin+Sans

編集：私はFedoraでChromeを使用していますが、市場シェアと資金提供のあるクールなマシンの1つではありません

ここに簡略化されたフィドル - http://jsfiddle.net/jBAnc/

編集: フィドルがコードを表示していません。「ベーコン」をクリックすると、255 と 256 の間で切り替わり、前後に跳ね返ります (少なくとも私にとっては)。

フォントが Arial などの基本的な Web セーフ フォントである場合、この問題は発生しないため、Google Web フォントと関係があると思われます。これはフォントのエンコーディングに問題がありますか? おそらくフォントが作成されたプログラムに問題がありますか (255 は重要なようです)?

これは私の元の問題のスクリーンショットです

4

2 に答える 2

1

このフォントでは、行の高さ/間隔の問題に一貫性がありません。Josefin Sans 自体の構造に問題があるのではないかと疑い始めています。

編集: もう少しグーグル化した後、問題はフォント自体ではなく、Google Webfont API にあるようです。

http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/

簡単な答え: 自分でフォントをダウンロードしてホストすれば、問題はないはずです。

于 2013-03-28T03:07:00.863 に答える
0

何も問題はありません。すべてのフォントの x-height、ディセンダー/エクステンダーの高さが同じであることを期待しているだけですが、そうではありません (10 回中 9 回)。

次のフィドルは、4 つのフォントの違いを示しています (3 つのフォントは、Mac や PC などで見られる非常に一般的なフォントです)。また、Josefin Sans も家にいます。

次の違いに特に注意してください。

  • 大文字の Q とその親の境界線の間の上部の間隔
  • Xx のさまざまな高さ (特に小文字と大文字)
  • 小文字の G の子孫 (一部は実際には親から派生しています)

_http://jsfiddle.net/suK2U/

ここに画像の説明を入力

255/256px についての質問に答えるために、コンテナーとその親の間の「スイート スポット」にたまたま遭遇したと言いたいと思います。256 で、衝突が始まります (そしてマージンが崩壊し始めるなど)。

于 2013-01-06T17:27:04.343 に答える