标签在 HTML5 中已废弃,现代浏览器默认忽略,即使局部显示也是怪异模式下的不可靠兼容行为;应改用 CSS 的 font-size 并注意特异性、单位选择与响应式适配。

直接用 标签为什么没反应
因为 是 HTML 4.01 中的废弃标签,HTML5 完全不支持。现代浏览器(Chrome、Firefox、Edge、Safari)默认忽略它,即使渲染出来也纯属兼容性“苟延残喘”,不可靠,且无法通过 DevTools 的 Styles 面板看到对应样式。
常见错误现象:文字 在本地双击打开 HTML 文件时看似有效,但一旦部署到服务器或换浏览器就消失——本质是某些浏览器在无 Doctype 或 quirks mode 下模拟旧行为,不是标准支持。
- 必须声明
,否则可能触发怪异模式,让“偶然生效”,但这不是解决方案 -
size属性值是相对值(如1–7),非像素,语义模糊,无法与 CSS 单位对齐 - 没有响应式能力,无法配合
rem或媒体查询缩放
CSS 的 font-size 怎么写才真正生效
优先使用 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: - 根元素设基准:
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。










