css - 算術演算を含む CSS 変数は省略形のプロパティでは機能しませんか?

Question

CSS変数の算術演算がコードを壊す理由を見つけるのを手伝ってください。

1 つのルールを含む単純な CSS ファイルから始めました。

html {
  font: 16px/32px Arial;
}

ブラウザーでは、文字どおりに動作します。フォント サイズは 16px、行の高さは 32px、フォント自体は Arial です。

次に、変数を追加しました。

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size);
  font: var(--default-font-size)/var(--default-line-height) Arial;
}

それも機能します。フォントサイズと同じにしたので、行の高さは16pxだと思いました。

しかし、2 番目の値を乗算すると、フォント宣言が機能しなくなりました。

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size) * 2;
  font: var(--default-font-size)/var(--default-line-height) Arial;  /* not working! */
}

すべてのプロパティfont-size、line-height、およびfont-familyはブラウザのデフォルトに設定されています。

font省略形のプロパティを 3 つの異なるロングハンド プロパティに分割すると、コードは再び正常に動作します。

html {
  --default-font-size: 16px;
  --default-line-height: var(--default-font-size) * 2;
  font-size: var(--default-font-size);
  line-height: var(--default-line-height);
  font-family: Arial;
}

前のコード サンプルの何が問題なのですか?また、手書きのプロパティに分割せずに動作させる方法はありますか?