我可以在 CSS 中为绝对字体大小（中号、加大号）强制自定义基值吗？

Question

假设我别无选择，只能使用绝对字体大小值，例如font-size: x-large;。根据许多文章，此类元素的确切字体大小取决于用户的偏好。我的问题（可能很愚蠢）是：我可以强制使用一些自定义值而不是用户的偏好作为基础吗？

例如我有一个带有绝对大小值的给定 HTML 文档，我想在 iframe 内（在同一域下）呈现它，并使用一些可配置的值作为字体基础。这样font-size为"x-large"、"medium"、"small"等的元素就会根据这个基值来改变自己的真实字体大小。它可能有用，例如只是为了演示这些字体值是如何工作的。我能做到这一点吗？如何？也许在 window 对象中有一个特定的属性像 "window.fontSizePreference" - 谁知道...

Answer 1

如果已经声明了 absolute 值，而您想简单地使用 length 值替换它，则有几种选择。

可能的解决方案

通过 specific 覆盖 CSS。如果您的代码使用以下方式声明值：

div.xlarge {
  font-size: x-large;
}

您可以添加另一个 CSS selector 来定位 div，并且 CSS 将使用两个值中更具体的一个。例如，您可以添加 body 或父容器：

body div.xlarge {
  font-size: 12px; /* This would overwrite the x-large value above */
}
div div.xlarge {
  font-size: 12px /* So would this */
}
.parentclass div.xlarge {
  font-size: 12px; /* And this */
}

为了这个例子，我使用了一个 div 和一个父 div 以及一个 class 名称为 .parentclass 的父。您还可以使用 span、p、li、ul、a 等

Note: Learn more about Specificity from MDN.

您还可以将内联样式添加到所需的目标。例如，如果您的 HTML 是：

<div class="xlarge">My Text</div>

您可以像这样添加内联样式，它会覆盖 font-size CSS 声明的值：

<div class="xlarge" style="font-size: 12px;">My Text</div>

我建议的最后一件事是使用 !important 标记覆盖 CSS 值，否则您无法使用上述方法定位。假设没有其他 !important 声明，最后的 !important 将强制使用 CSS 值。

div.xlarge {
  font-size: 12px !important; /* Will override more specific CSS & Inline CSS */
  font-size: x-large; /* Would be ignored */

Note: Learn about using !important from CSS-Tricks.

IFrames

如果您尝试编辑 iframe，这些解决方案中的

None 仅适用于 CSS，除非您可以控制iframe 内容。要编辑 iframe CSS，只需在 Stack Overflow 上快速搜索一下，就会有 number of solutions.

我可以在 CSS 中为绝对字体大小（中号、加大号）强制自定义基值吗？

Can I force custom base value for absolute font-size (medium, x-large) in CSS?

css

font-size

keyword

absolute

可能的解决方案

IFrames