应优先用语义标签：强调内容用，外文术语或学名用

表格单元格里用 <em></em> 还是 <i></i>？语义决定写法

表格里某列数据需要斜体，不是“随便斜一下”——得先看它有没有强调或特殊含义。比如「状态」列中显示 待审核，这是关键信息，该用 <em></em>；如果是外文术语如 <i>pending</i> 或拉丁学名 <i>Homo sapiens</i>，才用 <i></i>。用错标签，读屏软件会读错重点，SEO 也可能弱化关键字段。

font-style: italic 在 <td> 和 <code><th> 上怎么写才生效 <p>直接给单元格加类最稳妥：<code>td.italic-cell { font-style: italic; }。但要注意三处覆盖风险：

• 父级 <table> 或 <code><tbody> 设了 <code>font-style: normal，子元素没重写就会继承失效
• 全局 CSS 里写了 td { font-style: normal !important; }，你的类名权重压不过它
• 用了自定义字体但 @font-face 没声明 font-style: italic 对应的文件，浏览器 fallback 到合成斜体，中文尤其糊

验证方法：打开开发者工具 → 选中单元格 → 看「Computed」面板里的 font-family 实际加载的是哪个字体文件。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载

中文字体斜体不清晰？别硬扛 font-style: italic

微软雅黑、思源黑体等主流中文字体根本没有真实 italic 字形，浏览器只能算法倾斜（synthetic oblique），小字号下边缘发虚、笔画变形。实操建议：

• 英文/数字列：换用 "Source Serif Pro", "Georgia", serif 这类自带斜体的字体栈
• 纯中文列：放弃 font-style: italic，改用 transform: skewX(-12deg) 手动控角度（加 transform-origin: center 防偏移）
• 真要统一风格：引入 Noto Sans SC Italic 版本，@font-face 必须显式声明 font-style: italic 并指向对应 woff2 文件

斜体在表格里排版错位？检查行内流和 white-space

<em></em> 和 <i></i> 默认是 inline 元素，不会破坏表格单元格的布局流。但如果你发现斜体文字挤在一起、对不齐，大概率是以下原因：

• 父 <td> 设了 <code>white-space: nowrap，导致内部换行失效
• 用了 display: flex 布局但没设 align-items，文字垂直居中飘移
• 斜体字宽略增（尤其西文字体），而 <td> 宽度固定，造成溢出或折行异常 <p>解决方式不是给 <code><em></em> 加 display: block——那会破坏表格结构；而是调 <td> 的 <code>padding 或用 min-width 预留空间。 表格里斜体最容易被忽略的点，其实是字体本身有没有 italic 字形。写一堆 font-style: italic 却没配对字体文件，效果就只是“看起来勉强斜了”，实际可读性已经打折。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！