是的，italic类设font-style:italic，但效果取决于字体是否提供真斜体；无衬线字体常触发伪斜体，应优先引入Inter等带italic变体的字体，并用not-italic重置为normal以覆盖父级样式。
italic 类是否真的让文字变斜体？
是的，italic 类会设置 font-style: italic，但效果取决于字体本身是否提供真正的斜体字形。很多无衬线字体（如系统默认的 San Francisco、Segoe UI）没有独立的 italic 字形，浏览器会用算法倾斜常规字形（即“伪斜体”），视觉上略显模糊或失真。
如何避免伪斜体导致的渲染问题
关键不是加不加 italic，而是确保字体栈中包含真正支持斜体的字体，并优先加载它们：
- 在
@layer base中重定义font-sans，把Inter、IBM Plex Sans或Source Sans Pro这类明确提供 italic 变体的字体放在系统字体前 - 使用
@font-face显式引入字体的italic文件（注意font-style: italic和font-weight需与文件匹配） - 若用 Google Fonts，务必带上
&display=swap&text=...并指定ital,wght@1,400参数，确保 italic 变体被加载
italic 和 not-italic 的实际使用边界
not-italic 不是“取消斜体”，而是显式重置为 font-style: normal。它常用于覆盖父级或组件库的默认斜体设置：
- Markdown 渲染器（如 remark）可能给
<em></em>加了italic，而你希望某段<em></em>不斜体 → 用not-italic - 按钮内嵌
<span class="italic">（可选）</span>，但按钮禁用了所有样式继承 → 需确认父容器没设font-style: italic，否则italic会叠加生效 - 响应式场景下：移动端要正体，桌面端才斜体 → 用
md:italic sm:not-italic，注意顺序，后者会覆盖前者
斜体在可访问性与语义中的隐含风险
仅靠斜体传达信息（比如“这是重点”“这是变量名”）不符合 WCAG 1.4.1，屏幕阅读器不会读出斜体状态。更稳妥的做法：
立即学习“前端免费学习笔记（深入）”；
- 用
<em></em>或<strong></strong>标签承载语义，再用italic辅助视觉表现 - 代码块中表示变量名时，优先用
<var></var>+font-mono italic，而非纯 class 控制 - 如果设计稿要求“斜体但不可复制”（如水印），别用
italic—— 改用transform: skewX(-12deg)，并加user-select: none
