html 里面设置字体大小和颜色，现在标准做法是使用 css 样式，通过 fontsize 控制字体大小，color 控制文字颜色，可以写在标签内联 style，也可以写在 head 内部 style 标签，或者单独外部 css 文件，旧版本 font 标签已经废弃，新项目不推荐继续使用。很多新手一开始会找 html 原生属性直接修改字体大小和颜色，早期 html 确实有 font 标签，但是随着 html 和 css 分离规范，这种写法已经淘汰，浏览器虽然还能兼容，但是不符合现代前端规范，后期维护页面会非常麻烦。设置字体大小的时候单位选择很关键，px 是固定像素，适合固定尺寸页面，rem em 是相对单位，适合响应式网页，设置颜色可以使用十六进制 rgb rgba 或者英文颜色名，字体大小和颜色两个属性可以写在同一条 style 里面，一次同时生效。

三种实现方式详细介绍

方式一 内联 style 写法

直接写在 html 标签的 style 属性里面，优点是简单快速，适合单页面临时测试，缺点是每个标签单独写，代码重复，不利于批量修改。

核心属性

fontsize 设置字体大小

color 设置文字颜色

方式二 head 内部 style 标签

在 head 里面写 style 块，用选择器统一设置，比如 p 标签所有段落统一字体大小和颜色，优点是可以批量控制同类标签，代码集中，适合单页面项目。

方式三 外部 css 文件

单独新建 css 文件，html 页面通过 link 引入，适合大型网站，多个页面共用同一套字体大小和颜色规则，方便统一改版维护。

单位与颜色取值说明

操作步骤

1 打开 html 源文件，找到需要修改文字的标签，比如 p div span h1

2 如果使用内联样式，在标签里面添加 style 属性，同时填写 fontsize 和 color 两个属性

3 如果使用内部 style 标签，在 head 区域创建 style，写选择器，在大括号内写入 fontsize 和 color

4 如果使用外部 css，新建 css 文件，编写样式规则，再在 html 的 head 里面添加 link 标签引入 css

5 保存 html 文件，浏览器打开页面，查看字体大小和颜色是否生效

6 如果没有生效，检查属性名称拼写，分号是否遗漏，选择器是否匹配对应的标签

旧 font 标签补充说明

旧 font 标签可以同时设置 size 和 color，但是属于废弃标签，不建议学习使用，很多教程老资料还会出现这个写法，现代开发优先 css，html 只负责结构，样式交给 css 处理，做到结构和样式分离。

常见踩坑点

1 属性拼写错误，把 fontsize 写成 font size，css 里面不能带空格，正确是 fontsize

2 颜色代码忘记井号，十六进制颜色必须带井号，否则浏览器识别失败

3 优先级冲突，后面的样式覆盖前面样式，已经设置的字体大小和颜色不生效，需要检查选择器优先级

4 父元素设置字体大小，子元素继承，部分标签自带默认样式，会覆盖继承的字体大小和颜色

5 使用 em 单位的时候，会叠加父级字体大小，容易出现意外放大缩小

【常见问题】

问题 1 html 怎么设置字体大小和颜色能不能用旧 font 标签

回答 1 html 怎么设置字体大小和颜色虽然旧 font 标签还能兼容，但是已经废弃，现代规范推荐使用 css 来设置 html 字体大小和颜色，不推荐新项目继续使用 font 标签

问题 2 html 怎么设置字体大小和颜色内联样式优先级高吗

回答 2 html 怎么设置字体大小和颜色内联 style 样式优先级最高，内联方式设置的 html 字体大小和颜色，会覆盖内部 style 和外部 css 里面同名样式

问题 3 html 怎么设置字体大小和颜色 rem 单位有什么好处

回答 3 html 怎么设置字体大小和颜色使用 rem 单位设置字体大小，可以跟随根元素统一缩放，搭配 color 设置文字颜色，适合响应式页面，适配手机不同屏幕

问题 4 html 怎么设置字体大小和颜色设置之后不生效是什么原因

回答 4 html 怎么设置字体大小和颜色设置之后不生效，一般是属性拼写错误 缺少分号 选择器不匹配或者样式优先级冲突，需要检查 html 代码里面 fontsize 和 color 书写是否正确

问题 5 html 怎么设置字体大小和颜色可以同时设置多个标签吗

回答 5 html 怎么设置字体大小和颜色可以，使用内部 style 或者外部 css，通过类选择器标签选择器批量给多个标签统一设置 html 字体大小和颜色，不需要每个标签单独写内联样式

【免责申明】

本文是 html 设置字体大小和颜色的基础教程，css 规范和浏览器兼容性会随版本更新变化，旧标签兼容能力后续有可能逐步取消，本文仅作为前端入门学习参考，不构成项目强制开发标准，操作前建议备份原始 html 文件。