为何无法在HTML中控制字体大小？W3代码样式问题求助

首先，你遇到的这个情况其实挺常见的——理论上内联style属性的优先级确实比类选择器高，但如果W3的类样式里用了!important声明，那内联样式就会被完全覆盖掉。比如W3的类可能写了这样的代码：

.w3-class {
  font-family: "Times New Roman" !important;
  font-size: 20px !important;
}

这种情况下，哪怕你给h1或者p加了内联style，也会被带!important的类样式压过，所以修改自然无效。

至于font标签能生效，是因为它本质上是HTML早期的内联样式写法，但它早在HTML4就被废弃了，HTML5更是完全不推荐使用，编辑器划掉它就是在提醒你这个标签已经过时，用它会导致代码兼容性差、后续维护难度陡增。

正确的解决方法： #

• 检查并移除!important：如果能修改W3类的CSS代码，把里面的!important去掉，内联样式就能正常覆盖类样式了。这是最理想的方式，因为!important应该尽量少用，它会打乱正常的CSS优先级规则，给后续调试埋坑。
• 使用更具体的CSS选择器：如果不能修改原类的样式，可以写一个优先级更高的选择器来覆盖它，比如：

  h1.w3-class {
    font-family: "Arial", sans-serif;
    font-size: 28px;
  }
  

  这种带元素名的类选择器，优先级比单纯的.w3-class更高，能顺利覆盖原样式。
• 万不得已时给内联样式加!important：如果以上两种方法都走不通，可以临时给内联样式加!important，比如：

  <h1 class="w3-class" style="font-family: Arial !important; font-size: 28px !important;">标题</h1>
  

  但我非常不推荐这种做法，因为它会让CSS的优先级逻辑变得混乱，尽量只在紧急情况下用。

记住，永远不要依赖废弃的font标签来解决样式问题，遵循现代HTML和CSS的规范才是长久之计。

内容的提问来源于stack exchange，提问作者codeDojo