html - 更改与当前字体大小相关的标签字体大小

Question

不确定这是否真的可以做到。是否可以根据当前大小增加/减少特定的 HTML 标签（h1，p，...）；只使用 CSS 和 HTML？我知道 JavaScript 的方式。

较小/较大的百分比将由用户确定。例如，它可能是 97%。那么它应该是元素字体大小的 97%。

例子：

CSS：

h1 { font-size: 2rem }

HTML：

<h1 style="font-size: (20% larger)"></h1>

Answer 1

从您的示例中，CSSvar()和 calc() 可能会有所帮助

h1 {
  --font-size: 2rem;/* set a var for your font-size. --font-size is a valid name for a CSS var() */

/* use that var() */

font-size: var(--font-size);
}

<h1 style="font-size: calc( var(--font-size) *  1.2 )">Enlarge 20%</h1>
<h1 style="font-size: 2.64rem">2.2rem x 1.2 = 2.64rem </h1>
<h1 style="font-size: var(--font-size);">2rem</h1>
<h1 style="font-size:2rem;">2rem</h1>
<h1>from the sheet</h1>