问HTML 里怎么设置字体大小 三种实现方法详解

HTML 里面设置字体大小，现在主流做法是使用 CSS 来控制，不推荐继续使用已经废弃的 font 标签，很多新手刚接触的时候，会以为 HTML 标签本身可以直接修改字体大小，其实原生 HTML 标签只自带默认字号，比如 h1 到 h6 标题标签自带不同大小，普通 p 标签是浏览器默认基准字号，想要自定义字体大小，核心就是通过 CSS 的 font-size 属性，一共有三种常用写法，分别是行内样式内部样式表外部样式表，三种方式原理都是调用 font-size，区别只是代码放置位置不同，单位选择也很关键，px rem em 百分比这些单位适配场景不一样，选错单位会造成手机端页面字体大小不能自适应，学习的时候要区分旧写法和现代标准写法，旧的 font 标签属于过时语法，新项目尽量不要使用，避免代码兼容性和维护问题。

三种设置方式对比表

方法一行内样式设置字体大小

直接在需要修改的 HTML 标签里面添加 style 属性，写入 font-size，后面填写数值加单位，示例写法是 p 标签里面 style 等于 font-size:18px，这种方式优点是简单直接，只作用于当前这一个标签，缺点是如果很多标签都单独写，代码冗余，后期修改字体大小要逐个查找，不适合大批量统一调整。

方法二内部样式表设置字体大小

在 head 区域新建 style 标签，在里面选择对应的标签或者类名，编写 font-size 属性，比如选择 p 标签，统一把页面所有段落字体大小改成 16px，也可以自定义 class 类名，给需要的元素加上 class，实现部分元素单独设置字体大小，这种方式适合单个网页，所有字体大小规则集中写在一处，修改起来比行内样式方便很多。

方法三外部 CSS 文件设置字体大小

新建后缀为 css 的文件，在 css 文件里面编写 font-size 规则，然后在 HTML 页面 head 里面使用 link 标签引入这个 css 文件，整个网站多个页面都可以复用这份字体大小设置，网站改版的时候只需要修改 css 文件，全部页面字体大小同步更新，是正式开发推荐的方案。

常用单位说明

px 固定像素单位，电脑端常用，数值固定，不会自动随浏览器基准字号缩放

rem 相对单位，根标签 html 基准字号计算，移动端自适应首选

em 相对父元素字号，父元素字号变化，当前元素字体大小跟着变化

百分比 相对于父元素基准字号，比如 120% 代表父字号的 1.2 倍

旧写法补充说明

早期 HTML 有 font 标签，使用 size 属性设置字体大小，这个标签在 html 标准里面已经废弃，现代浏览器虽然还能识别，但是不推荐继续使用 HTML 里这种旧方式设置字体大小，样式和结构分离是规范要求，结构写 HTML，字体大小这类外观全部交给 CSS 处理。

注意事项

如果同时存在行内样式内部样式外部样式，优先级行内样式最高，会覆盖其他地方的字体大小设置，浏览器本身还有默认用户设置字号，部分单位会受这个基准影响，测试的时候要注意层级覆盖问题，不要改了 css 但是页面字体大小没有变化，大概率是被更高优先级样式覆盖。

【常见问题】

问题 1 HTML 里设置字体大小为什么 font 标签不推荐

回答 1 HTML 里设置字体大小使用 font 标签属于废弃旧语法，现代规范要求样式分离，HTML 里设置字体大小优先使用 CSS 的 font-size，font 标签后续浏览器支持存在不确定性。

问题 2 HTML 里设置字体大小 rem 和 px 哪个更好

回答 1 HTML 里设置字体大小，电脑端固定排版可以选 px，移动端自适应推荐 rem，HTML 里设置字体大小选择单位要看是否需要随屏幕自动缩放。

问题 3 HTML 里设置字体大小之后没有生效是什么原因

回答 1 HTML 里设置字体大小没有生效，一般是样式优先级冲突，或者单位写错，也有可能浏览器缓存，HTML 里设置字体大小要检查是否有更高优先级样式覆盖。

问题 4 h 标签本身默认字体大小还可以再修改吗

回答 1 h 标签自带默认字体大小，HTML 里设置字体大小依然可以通过 CSS font-size 覆盖默认值，HTML 里设置字体大小不受标签原生默认字号限制。

【免责申明】 本文内容仅为 HTML 里设置字体大小的基础教学参考，CSS 规范和浏览器渲染规则会随版本更新，实际效果以浏览器实测为准，本文不替代官方标准文档。