标签在 HTML5 中已废弃，现代浏览器默认忽略，即使局部显示也是怪异模式下的不可靠兼容行为；应改用 CSS 的 font-size 并注意特异性、单位选择与响应式适配。
直接用 <font size></font> 标签为什么没反应
因为 <font></font> 是 HTML 4.01 中的废弃标签，HTML5 完全不支持。现代浏览器（Chrome、Firefox、Edge、Safari）默认忽略它，即使渲染出来也纯属兼容性“苟延残喘”，不可靠，且无法通过 DevTools 的 Styles 面板看到对应样式。
常见错误现象：<font size="5">文字</font> 在本地双击打开 HTML 文件时看似有效，但一旦部署到服务器或换浏览器就消失——本质是某些浏览器在无 Doctype 或 quirks mode 下模拟旧行为，不是标准支持。
- 必须声明
，否则可能触发怪异模式，让 <code><font></font>“偶然生效”，但这不是解决方案 -
size属性值是相对值（如1–7），非像素，语义模糊，无法与 CSS 单位对齐 - 没有响应式能力，无法配合
rem或媒体查询缩放
CSS 的 font-size 怎么写才真正生效
优先使用 CSS 控制文字大小，核心是确保样式被正确应用且未被覆盖。最简可行路径：
- 内联样式：
<p style="font-size: 16px;">文字</p>—— 优先级高，适合临时调试 - 内部样式表：
<style>p { font-size: 1rem; }</style>—— 推荐用于单页小项目 - 外部样式表：引入
<link rel="stylesheet" href="style.css">，在style.css中写p { font-size: 1.2em; }
注意单位选择：px 固定、em 相对父元素、rem 相对根字体、% 相对父元素百分比。移动端优先考虑 rem 或 vw 配合媒体查询。
立即学习“前端免费学习笔记（深入）”；
为什么写了 font-size 还是没变大
大概率是 CSS 特异性（specificity）或继承规则导致样式被覆盖，而不是写法错误。
- 检查 DevTools 的 Elements 面板 → 看目标元素上
font-size是否被划掉（表示被更高优先级样式覆盖） - 常见冲突来源：CSS 框架（如 Bootstrap 的
body { font-size: 1rem; }）、重置样式（* { font-size: 100%; }）、父元素设置了font-size: 0;（子元素用em或%会失效） - 行内样式被
!important覆盖？检查是否有font-size: 12px !important;这类声明 - 字体本身不含指定字号的字重（比如用了 icon font 或特殊 WebFont，实际渲染为占位符，视觉上“没变”）
移动端适配中 font-size 的关键细节
单纯设 16px 在手机上会显得极小，但盲目放大又破坏可读性和布局流。真正起效的做法是组合控制：
- 先在
加 viewport：<meta name="viewport" content="width=device-width, initial-scale=1"> - 根元素设基准：
html { font-size: 16px; }，再用rem写文本（如h1 { font-size: 2rem; }） - 需要响应式缩放？用 JS 动态改
html.style.fontSize，或用媒体查询：@media (max-width: 480px) { html { font-size: 14px; } } - 避免用
zoom或transform: scale()改文字——会模糊、影响点击区域、破坏语义
真正难的不是调大，而是让不同设备下文字既清晰可读，又不撑破容器、不遮挡操作区域。这需要结合 line-height、max-width 和 text-rendering 综合调整，而不是只盯着 font-size。
