HTML中设置文本颜色应使用CSS而非font color属性。现代开发推荐通过外部或内部样式表及内联样式，利用color属性结合类选择器、CSS变量等方式实现，以提升可维护性、复用性和可访问性，同时支持字体、大小、间距等更丰富的文本美化功能。
<p>
<p>HTML中设置文本颜色，如果你问的是
font color
属性，那它确实是以前用来改变文本颜色的方式，但现在已经不推荐使用了。现代Web开发中，我们主要依靠CSS（层叠样式表）来控制文本的颜色，这才是更灵活、更强大的做法。
解决方案
<p>
font color
属性是HTML4时代的一个元素属性，它的用法很简单：
<font color="red">这段文字是红色的。</font> <font color="#0000FF">这段文字是蓝色的。</font> <font color="rgb(0, 128, 0)">这段文字是绿色的。</font>
<p>这里你可以直接使用颜色名称（如
red
）、十六进制代码（如
#0000FF
）或者RGB值（如
rgb(0, 128, 0)
）来指定颜色。
<p>然而，我得说，这种方式现在几乎见不到了。因为它把样式和结构混在了一起，这在大型项目里简直是维护的噩梦。想象一下，如果你有几百个地方用了
<font color="red">
，突然有一天产品经理说“我们把所有红色都改成深红色吧”，你是不是得一个一个去改？
<p>立即学习“前端免费学习笔记（深入）”；
<p>所以，现代的做法是使用CSS。最直接的替代就是内联样式：
<p style="color: red;">这段文字现在用CSS变成了红色。</p> <span style="color: #0000FF;">这段文字用CSS变成了蓝色。</span> <div style="color: rgb(0, 128, 0);">这段文字用CSS变成了绿色。</div>
<p>虽然内联样式比
font color
属性进步了一点点，因为它用了CSS语法，但它仍然把样式写在HTML标签里。更推荐的方式是使用内部样式表（在
<head>
标签里）或外部样式表（一个独立的
.css
文件）。
<head> <style> p { color: red; /* 所有p标签都是红色 */ } .blue-text { color: blue; /* 有blue-text类的元素是蓝色 */ } <p>这段文字会是红色。 这段文字会是蓝色。
<head> <p>这段文字的颜色由外部样式表控制。 p { color: purple; }
<p>这种分离结构和样式的方式，才是我们现在构建Web页面的标准。
font color
font color
属性为何被淘汰，我们应该用什么替代它？
<p>说实话，
font color
被淘汰一点都不意外，这是Web发展的一个必然趋势。在我看来，它最大的问题就是它违背了“结构与表现分离”的原则。HTML就应该老老实实地定义内容的结构，比如这是一个段落（
<p>
）、这是一个标题（
<h1>
）或者这是一张图片（
@@##@@
）。至于这些内容长什么样，比如颜色、字体大小、边距，那是CSS的职责。
<p>当所有样式都写在HTML里时，你会发现：
- 维护成本高得吓人：前面提到那个改颜色的例子，如果你有几百几千个页面，每个页面都有几十个
font color
，那改起来简直是灾难。
- 代码冗余：同样的样式信息会重复出现在各个HTML标签里，文件大小徒增，加载速度也受影响。
- 缺乏灵活性：
font color
只能改颜色，CSS能做的可就太多了，字体、大小、间距、背景、布局……简直是文本的魔法师。
- 可访问性差：纯HTML的样式嵌入，不利于屏幕阅读器等辅助技术理解和渲染内容。
<p>所以，替代它的，毫无疑问就是CSS。我们通常会选择以下几种方式来替代
font color
：
- <p>外部样式表（External Stylesheets）：这是最推荐、最主流的方式。你创建一个独立的
.css
文件，把所有样式规则写进去，然后在HTML文件的
<head>
标签里用
<link>
标签引用它。
<head>
我的文字颜色。
/* my-styles.css */ .main-paragraph { color: #336699; /* 这种蓝色看起来不错 */ font-size: 16px; line-height: 1.5; }<p>这种方式的好处是，样式可以复用，维护起来非常方便，改一个地方，所有引用这个样式的地方都变了。
- <p>内部样式表（Internal Stylesheets）：当你只有一个HTML文件，或者某个页面的样式非常特殊，不适合放在公共的外部样式表里时，可以在HTML文件的
<head>
标签里使用
<style>
标签。
<head> <style> h1 { color: #FF5733; /* 标题的颜色 */ } .intro-text { color: #4CAF50; } <h1>欢迎来到我的页面这是一段介绍文字。
<p>这种方式比外部样式表优先级高一点点，但依然保持了样式和结构的分离。
- <p>内联样式（Inline Styles）：虽然比
font color
好，但不到万不得已，我个人不太建议大量使用。它通常用于：
- 通过JavaScript动态改变样式。
- 在某些特定场景下，需要覆盖其他样式规则（它的优先级最高）。
- 快速测试或非常小的、独立的组件。
<button style="background-color: #007bff; color: white; padding: 10px 15px;">点击我</button>
<p>它把样式直接写在HTML标签的
style
属性里。
<p>总之，告别
font color
，拥抱CSS，这是Web开发的基本素养。
除了颜色，CSS还能如何美化文本？
<p>CSS在文本美化方面简直是无所不能。颜色只是冰山一角。有时候我甚至觉得，CSS能把一段平平无奇的文字变成艺术品。
- <p>字体类型 (
font-family
)
：你可以指定文本使用什么字体。比如常见的宋体、黑体，或者引入外部字体。p { font-family: "Microsoft YaHei", Arial, sans-serif; /* 优先使用微软雅黑，其次Arial，最后通用无衬线字体 */ }<p>这里有个小技巧，通常会提供一个字体列表，浏览器会从左到右依次尝试，直到找到一个可用的字体。最后一个通常是通用字体族（如
serif
,
sans-serif
,
monospace
），作为兜底。
- <p>字体大小 (
font-size
)
：控制文本的大小，可以用像素（px
）、em（相对于父元素字体大小）、rem（相对于根元素字体大小）、视口单位（
vw
,
vh
）等。
h1 { font-size: 2.5rem; /* 相对根元素字体大小的2.5倍 */ } .small-text { font-size: 14px; }<p>我个人更倾向于使用
rem
或
em
，这样在做响应式设计时调整起来会更方便。
- <p>字体粗细 (
font-weight
)
：让文本变粗或变细。strong { font-weight: bold; /* 或者直接用数字，如700 */ } .light-text { font-weight: 300; /* 更细一点 */ }<p>除了
bold
，还可以用
normal
，或者100到900的数字（通常是100的倍数）。
- <p>文本对齐 (
text-align
)
：控制文本在块级元素内的水平对齐方式。.center-aligned { text-align: center; } .justified-text { text-align: justify; /* 两端对齐，让文本边缘整齐 */ } - <p>文本装饰 (
text-decoration
)
：添加下划线、上划线、删除线，或者移除这些装饰。a { text-decoration: none; /* 移除链接默认的下划线 */ } .highlight { text-decoration: underline wavy red; /* 红色波浪线 */ }<p>这个属性其实挺有意思的，现在还可以控制线条的颜色、样式和粗细。
- <p>行高 (
line-height
)
：控制文本行之间的垂直间距。p { line-height: 1.6; /* 推荐的阅读行高，通常是字体大小的1.5到1.8倍 */ }<p>我发现很多新手会忽略行高，但它对文本的可读性影响巨大。一个合适的行高能让你的文字看起来更舒服，不那么拥挤。
- <p>字母间距 (
letter-spacing
) 和 单词间距 (
word-spacing
)
：调整字母或单词之间的间距。h2 { letter-spacing: 2px; /* 字母之间稍微宽一点 */ } .wide-words { word-spacing: 5px; } - <p>文本阴影 (
text-shadow
)
：给文本添加阴影效果，让它看起来更有层次感。.fancy-title { color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊半径 颜色 */ }<p>这个属性可以玩出很多花样，比如多重阴影来创建霓虹灯效果。
<p>这还只是冰山一角，CSS在文本处理上还有很多高级特性，比如文本溢出处理、文本转换（大小写）、书写模式等等。掌握这些，你的文本排版能力会大大提升。
在实际项目中，我应该如何选择文本颜色的设置方式？
<p>在实际的项目开发中，选择文本颜色的设置方式，这可不是拍脑袋就能决定的事，它涉及到项目的规模、团队协作、维护成本，甚至还有性能和可访问性。
<p>我的经验是：
- <p>绝大多数情况，使用外部样式表（External Stylesheets）：
- <p>理由：这是最符合“结构与表现分离”原则的方式。所有样式集中在一个或几个
.css
文件里，HTML文件保持干净。这对于团队协作尤其重要，前端开发人员可以专注于HTML结构，设计师或CSS专家可以专注于样式。
- <p>优点：
- 易于维护：修改一个颜色，所有引用该样式的元素都会更新。
- 代码复用：定义一次，处处可用。
- 性能优化：浏览器可以缓存CSS文件，减少重复下载，提高页面加载速度。
- 利于响应式设计：通过媒体查询，可以轻松实现不同屏幕尺寸下的样式调整。
- <p>实践：
- 定义语义化的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; }
<p>body { color: var(–text-dark); }
<p>.button { background-color: var(–brand-primary); color: var(–text-light); }
这在构建设计系统或需要多主题切换的应用时，简直是神器。
- 定义语义化的CSS类名（如
- <p>理由：这是最符合“结构与表现分离”原则的方式。所有样式集中在一个或几个
- <p>特殊情况，考虑内部样式表（Internal Stylesheets）：
- 理由：当你的页面是独立的，或者有一些非常特定、不适合全局复用的样式时，可以考虑。比如一个一次性的营销页面，或者一个需要快速测试的组件。
- 优点：所有样式都在一个HTML文件里，方便快速部署和查看。
- 缺点：如果页面数量多，会造成样式冗余。
- <p>极少情况，使用内联样式（Inline Styles）：
- 理由：优先级最高，可以覆盖其他所有样式。通常用于：
- 通过JavaScript动态设置样式（比如用户点击后改变某个元素的颜色）。
- 在某些第三方库或框架中，为了避免样式冲突而强制使用内联样式。
- 快速调试或非常临时的、局部的样式覆盖。
- 缺点：
- 维护噩梦：一旦内联样式多了，改起来非常痛苦。
- 难以复用：每个元素都需要单独写样式。
- 可读性差：HTML文件会变得非常臃肿和混乱。
- 理由：优先级最高，可以覆盖其他所有样式。通常用于：
- <p>绝对避免
font color
属性
：- 这已经是一个过时的、被废弃的属性。任何现代的Web项目都不应该再使用它。它会影响你的代码质量、维护性和未来扩展性。
<p>最后，别忘了可访问性。设置文本颜色时，一定要确保前景色和背景色之间有足够的对比度。这不仅仅是为了遵守WCAG（Web内容可访问性指南），更是为了让所有用户，包括有视力障碍的用户，都能清晰地阅读你的内容。有很多在线工具可以帮你检查颜色对比度，比如WebAIM Contrast Checker。在选择颜色方案时，多花一点时间考虑这一点，你的用户会感谢你。
评论（已关闭）
评论已关闭