<small> 是 HTML 语义化标签,专用于免责声明等次要文本,默认缩放约 80% 并被屏幕阅读器识别为次要内容;应避免嵌套与内联样式,推荐用 CSS 统一控制字号、颜色、行高及间距,确保可访问性与响应式一致性。

用 <small> 标签最直接
<small> 是 HTML 原生语义化标签,专为免责声明、版权信息、法律文本这类次要但需保留的文本设计。它默认渲染为比父级字体小一号(通常缩放约 80%),且被屏幕阅读器识别为“次要内容”,兼顾可访问性与语义。
直接包裹即可:
<p>本服务受条款约束。<small>免责声明:使用风险自担,作者不承担任何间接损失。</small></p>
- 不要嵌套多个
<small>——连续嵌套会过度缩小,且语义失当 - 避免用
<span style="font-size: 0.8em">替代——丢失语义,对辅助技术不友好 - 现代浏览器均支持,无需 polyfill
需要微调字号或颜色时用 CSS 覆盖
<small> 的默认样式足够通用,但实际项目中常需统一视觉层级(比如和页脚其他文字一致)或提升可读性(深灰替代浅灰)。
推荐在 CSS 中集中控制:
立即学习“前端免费学习笔记(深入)”;
small {<br> font-size: 0.85em;<br> color: #666;<br> font-weight: normal;<br>}
- 优先用
em或rem,避免固定像素值(如12px),确保响应式缩放一致性 - 重置
font-weight——某些浏览器会给<small>加粗,反而干扰阅读 - 不要只改
font-size,忽略line-height——小字号易挤成一团,建议同步设为1.4左右
声明内容太长时注意换行与间距
免责声明常含多句、标点或链接,<small> 内部若无恰当结构,容易粘连难读。
- 长声明拆成
<small><p>...</p><p>...</p></small>,利用段落自然分隔 - 避免在
<small>里塞<br>——语义混乱,且移动端换行不可控 - 给
small加margin-top: 0.5em,与上文保持呼吸感;底部留白可略少(margin-bottom: 0.25em) - 如果声明含链接(如“点击查看完整条款”),确保
small a的颜色和下划线清晰可辨,别被整体灰度淹没
避免用 <font size> 或过时写法
<font size="1"> 和内联 style="font-size:x-small" 在现代项目中应明确规避。
-
<font>已被 HTML5 废弃,部分浏览器可能忽略或触发怪异模式 -
x-small是 CSS 早期关键字,渲染结果因浏览器而异(Chrome 和 Firefox 对它的映射不同) - 用
<small>+ 自定义 CSS,既符合标准,又便于全局维护
真正麻烦的不是怎么变小,而是让小字在各种设备上都清晰可读、语义准确、不被误读为装饰性内容——这点常被跳过测试。



















