4

私のCSSは、利用可能なフォントに応じてカスケードするfont-familyを定義しました：

.myfont { 
    text-transform: uppercase;
    font-family: Calibri, Arial, sans-serif;
    padding: 2em;
    background-color: red;
}

また、レンダリングされるフォントに応じて、パディングを調整して、すべて大文字のテキストを<sarcasm>美しい</sarcasm>赤い背景の中央に配置したいと考えています。それに応じて下部のパディングを調整できるように、フォントディセンダーのサイズを計算する良い方法はありますか?

アセンダーの高さ、キャップの高さ、およびx-heightも計算するソリューションのボーナス ポイント。

前もって感謝します！

4

3 に答える 3

3

これは可能です: 次のライブラリを使用してください: baseline ratio 、またはtypography.jsgetBoundingClientRect();身長。0 px フォントはベースラインにあります。これにより、ベースライン比率、アセンダーとディセンダーのパーセンテージが得られます。

于 2014-08-08T08:57:28.680 に答える
0

私の知る限り、JavaScript では不可能です。使用されているフォントはわかるかもしれませんが、フォント パラメータはわかりません。

そのため、これらのパラメータを (フォント ライブラリなどで) 検索し、フォントごとに保存して、使用されているフォントがわかったら検索できるようにする必要があります。

于 2012-04-16T19:20:58.317 に答える
0

EightShapes という Web 開発会社は、CSS を生成してテキストの上下のスペースを切り取り、アセンダーとディセンダーの周りで適切に機能するレイアウトを作成できるツールをまとめました。それに関する付随するブログ投稿があります。

于 2019-05-15T10:05:00.403 に答える