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
```
登录后复制
，这样在做响应式设计时调整起来会更方便。

Robovision AI
一个强大的视觉AI管理平台

65

查看详情
字体粗细 (
```
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中文网其它相关文章！