css - 通过添加某个类使文本动态变大

Question

有没有办法动态地使文本变大？举个例子:

* {
    font-size:1em;
}

.large {
    font-size:1.4em;
}

h1 {
    font-size:2.3em;
}

问题是，当您将大类添加到像 h1 这样的元素时，它的基本字体大小比大类大，它变得更小。有没有办法让它根据 ems 缩放一定百分比？我已经尝试过百分比。

Answer 1

请记住，em 和百分比都是相对大小，但它们依赖于父 元素的大小来确定子元素的大小。你不能做出比它本身大 1.4 倍的东西，就像你不能让两个人比对方高一样；)

你可以使任何元素相对于它的父元素更大，所以你最好的选择(使用纯 HTML 和 CSS)是用一个标签包装你想要增加字体大小的任何元素的内部内容，你可以添加您在上面指定的 large 类。

注意:看起来我们在这里真正想做的是定位元素内的匿名文本节点并为其设置样式。您可以使用 .large::first-line 之类的东西来为第一行设置更大的文本样式，但我不能说这是一个解决方案，因为它不会为整个文本节点设置样式。