上一篇
html字体大小设置
HTML字体大小通过CSS设置，如
font-size:16px;，支持px/em/rem等单位，可内
HTML字体大小设置方法
基础设置方式
| 方法 | 语法示例 | 说明 |
|---|---|---|
| HTML标签 | <font size="4">文字</font> | 已废弃，不建议使用（HTML5不支持） |
| CSS属性 | style="font-size:16px;" | 直接内联样式定义 |
| CSS类 | .text-large { font-size: 18px; } | 通过CSS类统一管理 |
CSS字体大小属性
| 属性值类型 | 示例 | 特点 |
|---|---|---|
| 绝对单位 | 16px2cm12pt | 固定数值，不受其他元素影响 |
| 相对单位 | 5em120%2rem | 根据父元素或根元素计算 |
| 关键字 | xx-smalllarger | 预定义级别，可读性强 |
响应式字体设置
/ 视口宽度适配 /
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/ 弹性单位 /
h1 {
font-size: 5vw; / 视口宽度5% /
}浏览器默认处理
| 浏览器 | 默认字体大小 | 基准元素 |
|---|---|---|
| Chrome | 16px | html元素 |
| Firefox | 16px | html元素 |
| Safari | 16px | html元素 |
| Edge | 16px | html元素 |
注意：可通过
html { font-size: 100%; }重置基准值
相关问题与解答
Q1：如何选择字体大小的单位？
A：优先使用rem单位保持全局统一，次选em处理局部比例关系，避免使用px固定值，除非需要精确控制。
html { font-size: 16px; } / 1rem=16px /
h1 { font-size: 2rem; } / 32px /
p { font-size: 1em; } / 继承父级字体大小 /Q2：如何实现移动端适配的字体缩放？
A：结合媒体查询和弹性单位：
/ 基础设置 /
body {
font-size: calc(16px + 0.5vw); / 视口宽度动态调整 /
}
/ 小屏幕优化 /
@media (max-width: 480px) {
body {
font-size: 14px;
}
