HTML如何设置文本颜色？font color属性的用法是什么？-html教程-PHP中文网

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

html如何设置文本颜色？font color属性的用法是什么？

HTML中设置文本颜色，如果你问的是

font color

登录后复制

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

解决方案

font color

登录后复制

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

<font color="red">这段文字是红色的。</font>
<font color="#0000FF">这段文字是蓝色的。</font>
<font color="rgb(0, 128, 0)">这段文字是绿色的。</font>

登录后复制

这里你可以直接使用颜色名称（如

red

登录后复制

）、十六进制代码（如

#0000FF

登录后复制

）或者RGB值（如

rgb(0, 128, 0)

登录后复制

）来指定颜色。

然而，我得说，这种方式现在几乎见不到了。因为它把样式和结构混在了一起，这在大型项目里简直是维护的噩梦。想象一下，如果你有几百个地方用了

<font color="red">

登录后复制

，突然有一天产品经理说“我们把所有红色都改成深红色吧”，你是不是得一个一个去改？

立即学习“前端免费学习笔记（深入）”；

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

<p style="color: red;">这段文字现在用CSS变成了红色。</p>
<span style="color: #0000FF;">这段文字用CSS变成了蓝色。</span>
<div style="color: rgb(0, 128, 0);">这段文字用CSS变成了绿色。</div>

登录后复制

虽然内联样式比

font color

登录后复制

属性进步了一点点，因为它用了CSS语法，但它仍然把样式写在HTML标签里。更推荐的方式是使用内部样式表（在

<head>

登录后复制

标签里）或外部样式表（一个独立的

.css

登录后复制

文件）。

<!-- 内部样式表示例 -->
<head>
    <style>
        p {
            color: red; /* 所有p标签都是红色 */
        }
        .blue-text {
            color: blue; /* 有blue-text类的元素是蓝色 */
        }
    </style>
</head>
<body>
    <p>这段文字会是红色。</p>
    <span class="blue-text">这段文字会是蓝色。</span>
</body>

登录后复制

<!-- 外部样式表示例 (假设你有一个styles.css文件) -->
<!-- HTML文件 -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这段文字的颜色由外部样式表控制。</p>
</body>

<!-- styles.css文件内容 -->
p {
    color: purple;
}

登录后复制

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

font color

登录后复制

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

说实话，

font color

登录后复制

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

<p>

登录后复制

）、这是一个标题（

<h1>

登录后复制

）或者这是一张图片（

<img>

登录后复制

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

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

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

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

font color

登录后复制

：

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

<head>
    <link rel="stylesheet" href="my-styles.css">
</head>
<body>
    <p class="main-paragraph">我的文字颜色。</p>
</body>

/* my-styles.css */
.main-paragraph {
    color: #336699; /* 这种蓝色看起来不错 */
    font-size: 16px;
    line-height: 1.5;
}
```
登录后复制
这种方式的好处是，样式可以复用，维护起来非常方便，改一个地方，所有引用这个样式的地方都变了。
内部样式表（Internal Stylesheets）：当你只有一个HTML文件，或者某个页面的样式非常特殊，不适合放在公共的外部样式表里时，可以在HTML文件的
```
<head>
```
登录后复制
登录后复制
登录后复制
标签里使用
```
<style>
```
登录后复制
标签。
```
<head>
    <style>
        h1 {
            color: #FF5733; /* 标题的颜色 */
        }
        .intro-text {
            color: #4CAF50;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的页面</h1>
    <p class="intro-text">这是一段介绍文字。</p>
</body>
```
登录后复制
这种方式比外部样式表优先级高一点点，但依然保持了样式和结构的分离。
内联样式（Inline Styles）：虽然比
font color
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
好，但不到万不得已，我个人不太建议大量使用。它通常用于：
- 通过JavaScript动态改变样式。
- 在某些特定场景下，需要覆盖其他样式规则（它的优先级最高）。
- 快速测试或非常小的、独立的组件。
```
<button style="background-color: #007bff; color: white; padding: 10px 15px;">点击我</button>
```
  登录后复制
  它把样式直接写在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在文本处理上还有很多高级特性，比如文本溢出处理、文本转换（大小写）、书写模式等等。掌握这些，你的文本排版能力会大大提升。

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

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

我的经验是：

绝大多数情况，使用外部样式表（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); }
```
这在构建设计系统或需要多主题切换的应用时，简直是神器。
```
  登录后复制
特殊情况，考虑内部样式表（Internal Stylesheets）：
- 理由：当你的页面是独立的，或者有一些非常特定、不适合全局复用的样式时，可以考虑。比如一个一次性的营销页面，或者一个需要快速测试的组件。
- 优点：所有样式都在一个HTML文件里，方便快速部署和查看。
- 缺点：如果页面数量多，会造成样式冗余。
极少情况，使用内联样式（Inline Styles）：
- 理由：优先级最高，可以覆盖其他所有样式。通常用于：
  - 通过JavaScript动态设置样式（比如用户点击后改变某个元素的颜色）。
  - 在某些第三方库或框架中，为了避免样式冲突而强制使用内联样式。
  - 快速调试或非常临时的、局部的样式覆盖。
- 缺点：
  - 维护噩梦：一旦内联样式多了，改起来非常痛苦。
  - 难以复用：每个元素都需要单独写样式。
  - 可读性差：HTML文件会变得非常臃肿和混乱。
绝对避免
font color
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
属性：
- 这已经是一个过时的、被废弃的属性。任何现代的Web项目都不应该再使用它。它会影响你的代码质量、维护性和未来扩展性。

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

以上就是HTML如何设置文本颜色？font color属性的用法是什么？的详细内容，更多请关注php中文网其它相关文章！