超过 6 种不同颜色代码的字体大小答案

【问题标题】：More than 6 font sizes with different color codes超过 6 种不同颜色代码的字体大小
【发布时间】：2020-08-29 00:41:15
【问题描述】：

我正在做一个测试，我需要创建一个登录页面。这里有超过 6 种不同的字体大小。这是列表：

导航和页脚链接：24 像素/400 常规/蒙特塞拉特

标题 1：115 像素/500 中等/Cormorant Garamond

标题 2：45 像素/500 中等/蒙特塞拉特

正文和日期：20 像素/400 常规/蒙特塞拉特

标题 3：110 像素/500 中等/Cormorant Garamond

按钮：22 像素/500 中等/蒙特塞拉特

页脚标题：30px / 500 medium / Montserrat

既然我只能使用 h1 到 h6，我是否应该混合两个相似的尺寸，让它们变成六个不同的尺寸？或者我有其他我不知道的选择？

我的另一个问题是，由于一些最小的文本 (h6) 是一种颜色，而其他地方是另一种颜色，我尝试将颜色代码设置为：
```
<h6 style="color:#4A455C;">MAR 9, 2019</h6>
<h6 style="color:#FFFFFF;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h6>
```

但我知道这可能不是最有效的方法。你有什么建议？

【问题讨论】：

“我在这里有什么选择？”是什么意思？
仅供参考，我们没有进行相同的测试，并且没有您所做的任何上下文。请更彻底地解释您的问题。
我的意思是，我应该把两个相似尺寸的混合起来，做成六个不同的尺寸吗？或者我有另一个我不知道的选择？
@HereticMonkey 我更新了我的帖子。
h1..h6 用于创建标题，而不是设置文本以使其更大。对于样式，请使用 CSS（不是内联，而是使用选择器）。 developer.mozilla.org/en-US/docs/Learn/…

标签： html css

【解决方案1】：

我建议您为字体大小和字体颜色创建不同的类，例如：

.font-xxl{
   font-size:40px;
}
.font-xl{
   font-size:30px;
}
.font-m{
   font-size:20px;
}
.font-s{
   font-size:10px;
}

.font-green{
   color:green;
}
.font-red{
       color:red;
}

然后，只需使用<h1 class="font-xl font-red>Hello World </h1>

【讨论】：