HTML设置文本颜色，告别`font color`，拥抱更强大的CSS！本文深入探讨了HTML中设置文本颜色的现代方法，强调使用CSS的`color`属性，并通过内联样式、内部样式表和外部样式表三种方式详细讲解。为何要放弃`font color`？因为它违背了结构与表现分离的原则，维护成本高、代码冗余且缺乏灵活性。CSS不仅能设置颜色，还能控制字体、大小、间距等，实现更丰富的文本美化。掌握CSS文本美化技巧，让你的网页更具吸引力且易于维护。在项目实践中，优先选择外部样式表，利用CSS变量，提升代码复用性和可维护性。同时，别忘了考虑可访问性，确保文本颜色对比度，让所有用户都能轻松阅读。

HTML中设置文本颜色应使用CSS而非font color属性。现代开发推荐通过外部或内部样式表及内联样式，利用color属性结合类选择器、CSS变量等方式实现，以提升可维护性、复用性和可访问性，同时支持字体、大小、间距等更丰富的文本美化功能。

HTML中设置文本颜色，如果你问的是font color属性，那它确实是以前用来改变文本颜色的方式，但现在已经不推荐使用了。现代Web开发中，我们主要依靠CSS（层叠样式表）来控制文本的颜色，这才是更灵活、更强大的做法。

解决方案

font color属性是HTML4时代的一个元素属性，它的用法很简单：

这段文字是红色的。
这段文字是蓝色的。
这段文字是绿色的。

这里你可以直接使用颜色名称（如red）、十六进制代码（如#0000FF）或者RGB值（如rgb(0, 128, 0)）来指定颜色。

然而，我得说，这种方式现在几乎见不到了。因为它把样式和结构混在了一起，这在大型项目里简直是维护的噩梦。想象一下，如果你有几百个地方用了，突然有一天产品经理说“我们把所有红色都改成深红色吧”，你是不是得一个一个去改？

所以，现代的做法是使用CSS。最直接的替代就是内联样式：

这段文字现在用CSS变成了红色。

这段文字用CSS变成了蓝色。
这段文字用CSS变成了绿色。

虽然内联样式比font color属性进步了一点点，因为它用了CSS语法，但它仍然把样式写在HTML标签里。更推荐的方式是使用内部样式表（在标签里）或外部样式表（一个独立的.css文件）。

    


    
这段文字会是红色。
    这段文字会是蓝色。

    


    
这段文字的颜色由外部样式表控制。



p {
    color: purple;
}

这种分离结构和样式的方式，才是我们现在构建Web页面的标准。

font color 属性为何被淘汰，我们应该用什么替代它？

说实话，font color被淘汰一点都不意外，这是Web发展的一个必然趋势。在我看来，它最大的问题就是它违背了“结构与表现分离”的原则。HTML就应该老老实实地定义内容的结构，比如这是一个段落（

）、这是一个标题（

）或者这是一张图片（）。至于这些内容长什么样，比如颜色、字体大小、边距，那是CSS的职责。

当所有样式都写在HTML里时，你会发现：

1. 维护成本高得吓人：前面提到那个改颜色的例子，如果你有几百几千个页面，每个页面都有几十个font color，那改起来简直是灾难。
2. 代码冗余：同样的样式信息会重复出现在各个HTML标签里，文件大小徒增，加载速度也受影响。
3. 缺乏灵活性：font color只能改颜色，CSS能做的可就太多了，字体、大小、间距、背景、布局……简直是文本的魔法师。
4. 可访问性差：纯HTML的样式嵌入，不利于屏幕阅读器等辅助技术理解和渲染内容。

所以，替代它的，毫无疑问就是CSS。我们通常会选择以下几种方式来替代font color：

• 外部样式表（External Stylesheets）：这是最推荐、最主流的方式。你创建一个独立的.css文件，把所有样式规则写进去，然后在HTML文件的标签里用标签引用它。

  
  
      
  
  
      
  我的文字颜色。
  
  
  /* my-styles.css */
  .main-paragraph {
      color: #336699; /* 这种蓝色看起来不错 */
      font-size: 16px;
      line-height: 1.5;
  }

  这种方式的好处是，样式可以复用，维护起来非常方便，改一个地方，所有引用这个样式的地方都变了。

• 内部样式表（Internal Stylesheets）：当你只有一个HTML文件，或者某个页面的样式非常特殊，不适合放在公共的外部样式表里时，可以在HTML文件的标签里使用

  欢迎来到我的页面

  这是一段介绍文字。

  这种方式比外部样式表优先级高一点点，但依然保持了样式和结构的分离。

• 内联样式（Inline Styles）：虽然比font color好，但不到万不得已，我个人不太建议大量使用。它通常用于：

  • 通过JavaScript动态改变样式。
  • 在某些特定场景下，需要覆盖其他样式规则（它的优先级最高）。
  • 快速测试或非常小的、独立的组件。

    点击我

    它把样式直接写在HTML标签的style属性里。

总之，告别font color，拥抱CSS，这是Web开发的基本素养。

除了颜色，CSS还能如何美化文本？

CSS在文本美化方面简直是无所不能。颜色只是冰山一角。有时候我甚至觉得，CSS能把一段平平无奇的文字变成艺术品。

• 字体类型 (font-family)：你可以指定文本使用什么字体。比如常见的宋体、黑体，或者引入外部字体。

  p {
      font-family: "Microsoft YaHei", Arial, sans-serif; /* 优先使用微软雅黑，其次Arial，最后通用无衬线字体 */
  }

  这里有个小技巧，通常会提供一个字体列表，浏览器会从左到右依次尝试，直到找到一个可用的字体。最后一个通常是通用字体族（如serif, sans-serif, monospace），作为兜底。

• 字体大小 (font-size)：控制文本的大小，可以用像素（px）、em（相对于父元素字体大小）、rem（相对于根元素字体大小）、视口单位（vw, vh）等。

  h1 {
      font-size: 2.5rem; /* 相对根元素字体大小的2.5倍 */
  }
  .small-text {
      font-size: 14px;
  }

  我个人更倾向于使用rem或em，这样在做响应式设计时调整起来会更方便。

• 字体粗细 (font-weight)：让文本变粗或变细。

  strong {
      font-weight: bold; /* 或者直接用数字，如700 */
  }
  .light-text {
      font-weight: 300; /* 更细一点 */
  }

  除了bold，还可以用normal，或者100到900的数字（通常是100的倍数）。

• 文本对齐 (text-align)：控制文本在块级元素内的水平对齐方式。

  .center-aligned {
      text-align: center;
  }
  .justified-text {
      text-align: justify; /* 两端对齐，让文本边缘整齐 */
  }

• 文本装饰 (text-decoration)：添加下划线、上划线、删除线，或者移除这些装饰。

  a {
      text-decoration: none; /* 移除链接默认的下划线 */
  }
  .highlight {
      text-decoration: underline wavy red; /* 红色波浪线 */
  }

  这个属性其实挺有意思的，现在还可以控制线条的颜色、样式和粗细。

• 行高 (line-height)：控制文本行之间的垂直间距。

  p {
      line-height: 1.6; /* 推荐的阅读行高，通常是字体大小的1.5到1.8倍 */
  }

  我发现很多新手会忽略行高，但它对文本的可读性影响巨大。一个合适的行高能让你的文字看起来更舒服，不那么拥挤。

• 字母间距 (letter-spacing) 和 单词间距 (word-spacing)：调整字母或单词之间的间距。

  h2 {
      letter-spacing: 2px; /* 字母之间稍微宽一点 */
  }
  .wide-words {
      word-spacing: 5px;
  }

• 文本阴影 (text-shadow)：给文本添加阴影效果，让它看起来更有层次感。

  .fancy-title {
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊半径 颜色 */
  }

  这个属性可以玩出很多花样，比如多重阴影来创建霓虹灯效果。

这还只是冰山一角，CSS在文本处理上还有很多高级特性，比如文本溢出处理、文本转换（大小写）、书写模式等等。掌握这些，你的文本排版能力会大大提升。

在实际项目中，我应该如何选择文本颜色的设置方式？

在实际的项目开发中，选择文本颜色的设置方式，这可不是拍脑袋就能决定的事，它涉及到项目的规模、团队协作、维护成本，甚至还有性能和可访问性。

我的经验是：

1. 绝大多数情况，使用外部样式表（External Stylesheets）：

   • 理由：这是最符合“结构与表现分离”原则的方式。所有样式集中在一个或几个.css文件里，HTML文件保持干净。这对于团队协作尤其重要，前端开发人员可以专注于HTML结构，设计师或CSS专家可以专注于样式。

   • 优点：

     • 易于维护：修改一个颜色，所有引用该样式的元素都会更新。
     • 代码复用：定义一次，处处可用。
     • 性能优化：浏览器可以缓存CSS文件，减少重复下载，提高页面加载速度。
     • 利于响应式设计：通过媒体查询，可以轻松实现不同屏幕尺寸下的样式调整。

   • 实践：

     • 定义语义化的CSS类名（如.primary-color, .secondary-text, .error-message），而不是描述性的类名（如.red-text）。这样即使颜色变了，类名依然有意义。
     • 考虑使用CSS变量（Custom Properties，也叫CSS变量）。这简直是革命性的，你可以定义像--primary-color: #007bff;这样的变量，然后在任何地方使用color: var(--primary-color);。要改主题色？只改一个变量就行了。

       :root {
       --brand-primary: #007bff;
       --text-dark: #333;
       --text-light: #fff;
       }

     body { color: var(--text-dark); }

     .button { background-color: var(--brand-primary); color: var(--text-light); }

     这在构建设计系统或需要多主题切换的应用时，简直是神器。

2. 特殊情况，考虑内部样式表（Internal Stylesheets）：

   • 理由：当你的页面是独立的，或者有一些非常特定、不适合全局复用的样式时，可以考虑。比如一个一次性的营销页面，或者一个需要快速测试的组件。
   • 优点：所有样式都在一个HTML文件里，方便快速部署和查看。
   • 缺点：如果页面数量多，会造成样式冗余。

3. 极少情况，使用内联样式（Inline Styles）：

   • 理由：优先级最高，可以覆盖其他所有样式。通常用于：
     • 通过JavaScript动态设置样式（比如用户点击后改变某个元素的颜色）。
     • 在某些第三方库或框架中，为了避免样式冲突而强制使用内联样式。
     • 快速调试或非常临时的、局部的样式覆盖。
   • 缺点：
     • 维护噩梦：一旦内联样式多了，改起来非常痛苦。
     • 难以复用：每个元素都需要单独写样式。
     • 可读性差：HTML文件会变得非常臃肿和混乱。

4. 绝对避免 font color 属性：

   • 这已经是一个过时的、被废弃的属性。任何现代的Web项目都不应该再使用它。它会影响你的代码质量、维护性和未来扩展性。

最后，别忘了可访问性。设置文本颜色时，一定要确保前景色和背景色之间有足够的对比度。这不仅仅是为了遵守WCAG（Web内容可访问性指南），更是为了让所有用户，包括有视力障碍的用户，都能清晰地阅读你的内容。有很多在线工具可以帮你检查颜色对比度，比如WebAIM Contrast Checker。在选择颜色方案时，多花一点时间考虑这一点，你的用户会感谢你。

好了，本文到此结束，带大家了解了《HTML文本颜色设置方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！