7

私の質問は基本的にこれと同じですが、「行の高さ」を「文字間隔」に置き換えます。相対的な行の高さが継承される場合、要素のフォントサイズとは関係ありません。なんで？そして、どうすればそれを相対的にすることができますか？

私のユースケースは次のようなものです：

body {
    font-size: 18px;
    letter-spacing: 1.2em; /* I would like letter-spacing to be relative to the font-size across the document, at least until I override it */
}

.small {
    font-size: 14px;
    /* letter-spacing is 1.2em of 18px instead of 14px */
}

機能しない理由は、指定された値ではなく計算された値が継承されるためであることを知っているのでletter-spacing、変更するたびに を再指定する必要がありfont-sizeます。しかし、単位のない値がどのように機能するかに似たものがあることを願っていますline-height。

確かに私はこれを行うことができます:

* {
    letter-spacing: 1.2em;
}

しかし、次のように、いくつかの要素でカスケードを停止することはできませんline-height。

body {
    font-size: 18px;
    line-height: 1.5;
}

.normal-line-height {
    line-height: normal;
    /* all the descendants of this element will have a normal line-height */
}

つまり、確かに、私はいつでもこれを行うことができました...

.normal-letter-spacing, .normal-letter-spacing * {
    letter-spacing: normal;
}

しかし、それはまだ私が望むほどエレガントではありません. この問題に対するエレガントな解決策はないと思いますが、何か不足している場合に備えて質問しています。

4

2 に答える 2

4

CSS 変数は広くサポートされていませんが、うまくいくでしょう:

body {
  font-size: 18px;
  --spacing: 1.2em;
}
.normal-letter-spacing { /* No need to select `.normal-letter-spacing *` */
  --spacing: normal;
}
body * {
  letter-spacing: var(--spacing);
}
.small {
  font-size: 14px;
}
<div>
  <p>Lorem ipsum</p>
  <p class="small">Lorem ipsum</p>
</div>
<hr />
<div class="normal-letter-spacing">
  <p>Lorem ipsum</p>
  <p class="small">Lorem ipsum</p>
</div>

これらは、カスタム プロパティの値が指定された値に計算されるため機能します。

計算された値: 変数が置換された指定された値 (ただし、「無効な変数」については散文を参照してください)

したがって、 の場合とは異なりletter-spacing、1.2emは絶対的な長さに変換されません。

次に、すべての要素を--spacingの値として使用するように指定できますletter-spacing。その1.2emため、各要素のフォント サイズに関してローカルに解決されます。

とは異なり* { letter-spacing: 1.2em; }、このアプローチは--spacing: 1.2emで 1 回だけ設定し、body継承によって伝播させます。したがって、サブツリーでその値を変更する場合--spacingは、ルートでのみオーバーライドする必要があります。すべてのサブツリーを選択する必要はありません。

于 2016-09-30T14:12:43.127 に答える
-1

私は EM よりも REM を使用して、関係を 1 つの値 (ルート (本文) のフォントサイズ) で凍結しようとします。後で font-size の変更を気にする必要はありません。

より多くの場所で rems を使用したい場合は、すべてのクラスを 1 か所に整理することをお勧めします。そうすれば、それを維持するのに大きな問題はありません。次のようなユーティリティクラスとして保持することもお勧めします

.txt-spacing-big { letter-spacing: 2rem; }
.txt-spacing-medium { letter-spacing: 1rem; }
于 2016-09-30T14:03:25.807 に答える