无论如何要更改具有特定字体大小的所有文本的字体大小？

Question

这个问题最近一直困扰着我。 几年前，我用常规 CSS 开发了一个网站，现在我回来想更改一些字体大小等。我知道 CSS 变量是解决这个问题的理想解决方案，但还有其他方法可以更改字体大小具有特定字体大小的文本？ 例如，所有字体大小为 14px 的 p、h1、h2、h3、h4 等都应转换为 16px。

Answer 1

如果我猜对了，你的旧 CSS 会在很多类之间进行拆分。 所以而不是

p{
    font-size: 14px;
}

你有

.first {
    font-size: 14px;
}
//other stuff
.second {
    font-size: 14px;
}
//other stuff
.third {
    font-size: 14px;
}

一个好的解决方案是使用类似 VS 代码的替换所有功能

否则，如果您感到懒惰，可以添加 !important...

.first {
    font-size: 14px;
}
//other stuff
.second {
    font-size: 14px;
}
//other stuff
.third {
    font-size: 14px;
}
// override all
p {
    font-size: 16px !important;
}

但是出于明显的原因，强烈不推荐使用 !important。

如果代码是按照我理解的方式构建的，那么玩特殊性就行不通了。
仅仅因为这里第二个不会覆盖第一个

//this is more specific
.some-container .some-div {
    font-size: 14px;
}
// this fails to override
p {
    font-size: 16px;
}

Answer 2

我不知道这对你有用，但试试这个！

html {
  font-size: 16px;
}

或者当您使用引导程序时，请尝试以下一个

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

Answer 3

我建议你在 CSS 的 :root 元素中设置一个 16px 的字体大小，并用 rem 单位替换所有的字体大小属性（VS Code 中有一个替换工具可以让这个任务更容易）。 rem 将查看根元素的字体大小，在本例中为 16px。

:root {
  font-size: 16px;
}

.example {
  font-size: 1.2rem;
}