1

次のスクリーンショットをご覧ください: http://www.jesserosenfield.com/beta/descenders.png

私の問題は、降順（スクリーンショットの「7」など）の数字がスパンの下部に垂直に配置され、他の数字が垂直に中央に向かって配置されることです。アセンダー/ディセンダーに関係なく、すべての数値の垂直方向の配置を「均等化」する方法はありますか?

ありがとう！

コード：

<div class="postDate">
     <span class="postDay"><?php the_time('j'); ?></span><br/>
     <span class="postMonth"><?php the_time('M'); ?></span>
</div> <!-- postDate -->

とCSS

.postDate {
    width: 99px;
    height: 74px;
    position: relative;
    left: -30px;
    font-family: Georgia, "times new roman", times, serif;
    background: url(images/dateFlag.png) no-repeat;
    text-align: center;
    color: #ffffcc;
    padding-top: 9px;
    }

.postDay {font-size: 42px; border: 1px solid red;}
.postMonth {font-size: 17px; text-transform: uppercase}
4

6 に答える 6

4

別のフォントを使用してください。Arial は、数字の底をすべて同じベースラインに置きます。マイクロソフト サン セリフも同様です。トレビュシェットも同様です。それで、それについては、Times New Roman もそうです。

実は、数字は書体によってアセンダーとディセンダーが異なります。タイポグラファーが行うことは、見栄えが良いと信じるものに基づいて数値の「本体」を中央に配置し、そこから上または下に移動することです。通常、そのバリエーションはセリフ面にありますが、常にではありません。いずれにせよ、それを制御することはできません。ところで、3、4、5、7、および 9 には通常ディセンダーがあり、6 および 8 には通常アセンダーがあります。

于 2010-06-16T15:47:50.833 に答える
1

それが機能するかどうかはわかりませんが、試してみたいことの1つ：

日と月を出力するphp関数があるようです。数値を出力するだけでなく、各数値を適切に配置/スタイルするスパンでラップしてみませんか。

CSS と PHP のラフスケッチ:

.georgiaFixNum7 {
    position: relative;
    top: 5px;
    font-size: 18px;
}


echo '<span class="georgiaFixNum' . $num . '">' . $num . '</span>';

フォントを使用した純粋な css/html ソリューションの必要性は理解していますが、どうしても必要な場合は、別の画像を使用して数字を表示してみてください。あなたの php 関数は、同様の方法で動作する必要があります。

echo '<img src="/img/' . $num . '.png" />';

繰り返しますが、私が試してみたいことがいくつかありますが、それらが機能するかどうかはわかりません.

于 2010-06-16T18:47:26.447 に答える
1

ジョージアには古いスタイルの数字があります。裏地の図が本当に必要な場合は、このオプションを備えたジョージアの OpenType バージョンがあるかどうかを確認する必要があります。

とはいえ、あなたが示した文脈で古いスタイルの図を使用しても問題はありません。いつもどこでもすべてを揃える必要はありません:)
上下に適度なスペースがあるように間隔を設定するだけです.

于 2010-07-10T11:25:05.530 に答える
0

より一般的に入手可能な同様のフォントの数字を単純に使用することを検討することをお勧めします。たとえば、Times New Roman はそれほど違いはなく、Times の数字とジョージアの数字を混ぜてもそれほど悪くはありません。

次に例を示します。 ここに画像の説明を入力

于 2012-08-27T13:58:10.180 に答える
0

ここでの問題は、比例対表の数字に関係しています。

プロパティで CSSfont-feature-settingsルールを使用することにより、この動作を防ぐことができます。tnum

p {
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -ms-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}
于 2015-01-06T17:40:05.597 に答える
0

制御できるのは、親内のテキスト ベースラインの垂直方向の配置だけです。ただし、テキストのベースラインに関して、さまざまな文字のアウトラインの特定のフォント位置を制御することはできません。

@Robusto が言ったように、1 つの解決策は、使用しているフォントを変更して、すべての数字がベースラインで終わるようにすることです。ジョージアは特に数字が苦手です。一部の数字 (たとえば 36 や 84) は、1 つの数字がアセンダーで、もう 1 つの数字がディセンダーであるため、奇妙に見えるからです。(もちろん、5 月 36 日について心配する必要はありません :-))

もう 1 つの解決策は、Georgia フォントを使用することですが、3、4、5、7、および 9 のディセンダーが目立たないように垂直パディングを増やします。あなたの場合、数値の上下に4〜5pxを追加すると、それが行われます。もちろん、それによって日付フラグの全体的なサイズが大きくなり、望ましくない場合があります。

垂直方向のパディングを大幅に増やす代わりに、フォント サイズを数ピクセル下げることで、アセンダーとディセンダーが目立たなくなります。これは、ユーザーのブラウザーのズームが 100% で通常の DPI に設定されている場合にのみ機能します。ズームが 120% の場合、またはユーザーが高 DPI を使用している場合、フォントのビジュアル サイズが大きくなり、アセンダー/ディセンダーがより目立ちます。

于 2010-06-16T16:04:43.017 に答える