2

私は自分が欲しいものにぴったりのwebsafeフォントgeorgiaを持っています。

私が抱えている唯一の問題は、フォントの下部が整列していないことです。

http://jsfiddle.net/JW7F8/

<style>
.georgia {
    font-family:georgia;
    font-size:1.9em;
}​
</style>
<span class="georgia">
    1234567890
</span>
​

フィドルでわかるように、1、2、6、および8はすべて他の部分よりも少し高く開始します。

質問：XX em でサイトを設定しながら、すべてが1行で始まるジョージアをレンダリングするにはどうすればよいですか。

私は気にしません：

  • 文字列を分割する
  • 異なるクラスの設定

動的なサイジングを可能にする実行可能なソリューションが必要です。

4

3 に答える 3

5

これはフォントのスタイルであり、技術的にはすべてのフォント文字が並んでいます（テキストを強調表示すると、フォント文字の高さが表示されます）。

オフセットはフォントサイズによって異なるため、フォントを分割してもジョージアフォントを一貫して並べることはできません。これは'sを使用して可能かもしれませんがem、少なくともハッキーであり、ブラウザ間で一貫して動作させることは非常に困難です。

また、フォントの位置を変更すると、カーニングの問題が発生します。

ただし、ジョージアが影響を受けた別の同様のフォントがあり、それは並んでいます。

ジョージアはクラレンドンスタイルの書体からの影響を取り入れています

http://en.wikipedia.org/wiki/Clarendon_(typeface）

于 2012-11-16T10:13:19.133 に答える
0

Webセーフソリューションの場合、私はこれを実装することになりました：http: //jsfiddle.net/JW7F8/2/

<style>
.georgia {
    font-family:georgia;
    font-size:1.9em;
}
.subitx {
        position:relative;
        top:0.18em;
        }
.subity {
        position:relative;
        top:0.13em;
        font-size:1.2em
        }​
</style>
<span class="georgia">
    <span class="subity">1</span><span class="subity">2</span>345<span class="subitx">6</span>7<span class="subitx">8</span>9<span class="subity">0</span>
</span>

唯一の残念なのは、サイズが大きくなったフォントが他のフォントよりも太字になっていることです。

クロスブラウザで動作するWebセーフフォントがもっとあったらいいのにと思います...ため息 </p>

于 2012-11-16T10:34:21.513 に答える
0

ジョージアフォントには古いスタイルの数字があります。つまり、数字の高さが異なり、ベースラインよりも下に伸びる場合があります。

Webページで使用されるほとんどのフォントには、モダンなスタイルの「裏地」の数字があり、すべての数字の高さは同じで、大文字とほぼ同じです。

一部のフォントには両方が含まれています。比較的最近、CSSで、いくつかのブラウザで、を使用してそのような選択肢から選択することが可能になりましたfont-feature-settings。しかし、ジョージアには古いスタイルの数字しかありません。

このような基本的な機能がテキストに適していない場合は、別のフォントを選択することをお勧めします。

ただし、WebKitブラウザー（Chrome、Safari）では、@font-face（ローカルフォントの場合、埋め込みではない）とを使用しunicode-rangeて、別のフォントから数字を取得するように指定できます。技術的には単純ですが、実際には良い考えではありません。

@font-face {
  font-family: Georgiax;
  src: local("Times New Roman");
  unicode-range: U+30-39;
}
@font-face {
  font-family: Georgiax;
  src: local("Georgia");
  unicode-range: U+0-29, U+40-10FFFF;
}

次にfont-family: Georgiax、実際のフォントファミリであるかのように使用します。しかし、前述のように、この手法はWebKitブラウザー以外ではサポートされておらず、別のフォントから数字を取得することは、活版印刷の失敗を意味します。

PSジョージアはウェブセーフではありません。フォントはありません。たとえば、Androidでは見つかりません。

于 2012-11-16T12:37:20.530 に答える