应优先用语义正确的标签:强调语气用,纯视觉倾斜用;必须用css时用font-style: italic;斜体不可作为唯一信息载体,需配合aria属性或html属性确保无障碍。

HTML里怎么让文字变斜体
用 <i></i> 或 <em></em> 标签最直接,但选哪个取决于语义——不是样式问题,是“这句话是不是强调语气”。
<i></i> 和 <em></em> 到底该用谁
<em></em> 表示内容有强调含义(比如反语、重点),浏览器默认用斜体渲染,屏幕阅读器会加重读音;<i></i> 纯属视觉倾斜,语义中性,适合外文词、术语、船名这类需要区分但不强调的场景。
常见错误现象:<i></i> 被滥用在标题、按钮文字上只为了“看起来斜”,结果无障碍访问时完全丢失意图。
- 用
<em></em>:「你确定要删除全部数据吗?」 - 用
<i></i>:「这个词源自拉丁语 exemplum」 - 别用
<i></i>:「提交」按钮文字(应改用 CSS 控制样式)
CSS 的 font-style 怎么配合用
当必须用语义正确的标签(比如 <span></span>)又需要斜体效果时,font-style: italic 是唯一可靠方式。它比标签更灵活,也避免语义污染。
立即学习“前端免费学习笔记(深入)”;
注意兼容性影响:所有现代浏览器都支持,但某些旧版 Android WebView 对 font-style: oblique 渲染不稳定,统一用 italic 更稳妥。
示例:
<p>API 返回值是 <span style="font-style: italic">null</span></p>
哪些地方绝对不能靠斜体传信息
颜色、斜体、大小这些纯视觉特征,单独使用无法被屏幕阅读器识别,也不满足 WCAG 1.4.1(颜色不可作为唯一信息载体)要求。
容易踩的坑:
- 仅用斜体标出“必填项”,却不加
required属性或 aria-required - 表格里用斜体表示“暂无数据”,但没同步写
aria-live或占位文案 - 用
<i></i>包裹图标字体(如 Font Awesome),却忘了加aria-hidden="true"
斜体只是呈现层的一小块拼图,真正关键的是结构和属性有没有跟上。











