3

テキストブロックのディセンダーラインをシフトし、「y」や「g」などの文字ですべてのディセンダーを移動してベースラインの上に表示する方法を見つけようとしていますが、実際にはベースラインをシフトしません。特別なフォントを使わずにこれを行う方法はありますか?

4

3 に答える 3

0

私はタイポグラフィの専門家ではありませんが、ベースライン、ディセンダー ライン、およびディセンダーを使用した文字の位置を CSS だけで制御できるとは思いません。

一部のフォント形式 (および一部のフォント) がそのようなことをサポートしている場合、今後のfont-feature-settingsプロパティでそれを調整できる可能性があります。

于 2011-04-17T19:23:34.473 に答える
0

vertical-alignパーセンテージ値を含むスタイルを使用し、特定の文字を他の文字よりも高くするためにインライン ラッパーを使用する必要があります。これは最高のクラッジになると思います。相対的な高さを使用するよりも、もう少しセマンティックです。superファンキーで不規則なディセンダーを持っていない場合は、試してみることもできます。

于 2011-04-17T20:04:08.663 に答える
0

@BoltClock が示唆するように、私はタイポグラフィの専門家でもありません。これは、最終的にfont-feature-settings. CSS は、この細かいタイポグラフィ コントロールのレベルを提供しません。

私の頭に浮かぶ唯一の（ひどい）回避策は、各文字を個別に使用してシフトすることですposition: relative-見出しには受け入れられるかもしれませんが、おそらく他のコンテキストではそうではありません.

私があなたを正しく理解していれば、次のようになります。

 span { font-size: 40px  }
 span.g  { position: relative; top: -6px; }
 span.y  { position: relative; top: -4px; }

 <span>Lorem <span class="y">y</span>psum Dolor Sit 
 <span class="g">g</span>amet</span>

JSFiddle

これを自動的に行うために、いくつかの jQuery をクックすることさえ可能です。

于 2011-04-17T19:26:59.620 に答える