可能的解决方案

Question

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

E.g。我有一个具有绝对大小值的给定HTML文档，我想在iframe（在同一个域下）内部渲染它，并将一些可配置的值作为字体库。因此，使用font-size＆＃34; x-large＆＃34;，＆＃34; medium＆＃34;，＆＃34; small＆＃34;等的元素会根据此基值更改其实际字体大小。它可能是有用的，例如只是为了演示这些字体值的工作原理。我能完成这个吗？如何？也许在窗口对象中有一个特定属性，例如＆＃34; window.fontSizePreference＆＃34; - 谁知道......

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和父类同名.parentclass。您还可以使用span，p，li，ul，a等。

注意：从MDN了解有关Specificity的详情。

<小时/> 您还可以将样式内联添加到所需目标。例如，如果您的 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 */

注意：了解如何使用CSS-Tricks中的!important。

I-帧

如果您尝试编辑iframe，则这些解决方案都不适用于 CSS ，除非您可以控制iframe内容。要编辑iframe CSS ，只需快速搜索Stack Overflow，number solutions.

我可以在CSS中强制使用绝对字体大小（中，大 - 大）的自定义基值吗？

1 个答案:

可能的解决方案

I-帧