所有文字大小调整都落在 font-size 这一个 CSS 属性上，HTML 标签本身不带默认像素值，只带浏览器预设相对比例；精确控制必须写 CSS，推荐使用 rem/em 适配响应式，避免依赖 UA 样式。
用 font-size 控制任意 HTML 元素文字大小
所有文字大小调整都落在 font-size 这一个 CSS 属性上，HTML 标签本身（如 <h1></h1>、<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>）不带默认像素值，只带浏览器预设的相对比例。想精确控制，必须写 CSS。
常见错误是只改标签却不加样式，比如以为 <h1>文字</h1> 天然就“大”，结果在不同浏览器或重置样式后变小——本质是依赖了 UA stylesheet 的默认值，不可靠。
- 推荐用
rem或em单位适配响应式，根元素html { font-size: 16px; }是基准 - 固定像素（如
font-size: 24px;）适合局部微调，但不利于缩放和无障碍访问 - 百分比（如
font-size: 150%;）对父元素敏感，嵌套深时容易失控
标题（<h1>–<h6></h6>
</h1>）统一重置写法
浏览器默认 <h1></h1> 到 <h6></h6> 的大小比例不一致，且加粗、上下边距混在一起。真要调大小，建议剥离样式再重定义：
h1 { font-size: 2.5rem; font-weight: 700; margin: 0.5rem 0; }
h2 { font-size: 2rem; font-weight: 600; margin: 0.4rem 0; }
h3 { font-size: 1.75rem; font-weight: 600; margin: 0.35rem 0; }
/* 后续依需类推，避免直接依赖浏览器默认 */
注意：别只改 font-size 而忽略 margin 和 font-weight，否则视觉节奏会断层；也不要用 !important 硬覆盖，优先提高选择器特异性。
立即学习“前端免费学习笔记（深入）”；
正文段落（<p></p>）字号与行高的协同设置
调 <p></p> 文字大小不是单改 font-size 就完事，它必须和 line-height 配合，否则小字号挤成一团、大字号空得发虚。
- 常规正文推荐：
font-size: 1rem;（即 16px） +line-height: 1.6; - 移动端可设
font-size: 1.125rem;（18px），同时line-height: 1.5;避免行距过大 - 千万别写
line-height: 24px;这种固定值——字体放大后行高不会自适应
如果项目用了 CSS 自定义属性，可以这样留出调整入口：p { font-size: var(--body-font-size, 1rem); line-height: var(--body-line-height, 1.6); }
内联样式 or 外部 CSS？哪种改法更稳
临时调试可用 style 内联：<p style="font-size: 18px;">这段字大点</p>，但上线前务必抽离。原因很实际：
- 内联样式优先级太高，后续用 class 覆盖要加
!important，埋下维护雷 - 无法复用，每改一个
<p></p>都得手敲一遍 - 响应式断点（
@media）完全没法作用于内联样式
真正可持续的做法：把通用字号规则收进 body 或 :root，再用 class 按语义区分，比如 <p class="text-sm"></p> 对应 .text-sm { font-size: 0.875rem; }。
最易被忽略的一点：字号调整后务必在 iOS Safari 和 Chrome Android 上实机检查——系统字体缩放设置会影响 rem 表现，而 px 会被强制忽略。
