font-style: italic 是最直接、语义正确且兼容性最好的斜体设置方式，但中文字体大多无内置 italic 字形，实际触发浏览器合成倾斜，易发虚失真；英文字体如 Georgia 则能呈现真实斜体；中文需引入显式声明 font-style: italic 的 Web Font（如 Noto Sans SC Italic）才能实现真正斜体。
font-style: italic 是最直接、语义正确且兼容性最好的方式，但效果取决于字体是否提供真实斜体字形——中文字体大多不带 italic 变体，浏览器会合成倾斜，导致发虚或失真。
用 font-style: italic 但别指望中文“真斜体”
多数中文字体（如「微软雅黑」「思源黑体」）没有内置 italic 字重，font-style: italic 实际触发的是浏览器算法倾斜（synthetic oblique），小字号下边缘模糊、笔画变形。这不是 bug，是字体设计限制。
- 英文/数字文本可放心用：
font-family: "Georgia", "Times New Roman", serif;这类字体自带高质量斜体字形 - 中文要“真正斜体”，必须引入含
italic字重的 Web Font，例如Noto Sans SC Italic，并在@font-face中显式声明font-style: italic - 避免写
font-style: oblique—— 它不保证调用真实斜体，且部分浏览器渲染差异大
需要固定角度倾斜？别直接 skew button 或 span
直接对文本容器加 transform: skewX(-12deg) 看似简单，但会扭曲整个盒模型：点击区域偏移、边框错位、文字锯齿、屏幕阅读器定位失效。
- 若必须视觉倾斜，用两层结构：
<div class="tilt-wrapper"><span class="tilt-text">文字</span></div>，外层skewX()，内层反向skewX(12deg)补偿 - 外层加
overflow: hidden防溢出，内层加position: relative微调垂直对齐 - 禁用
transform的按钮交互热区问题：别在button上直接套skewX，否则用户点中“视觉文字”却未触发点击
<em> 和 <i> 不是“加斜体”的快捷键
它们是语义标签，不是样式开关。<em> 表示语气强调（读屏软件会重读），<i> 表示非强调类斜体（如外文词、学名）。纯为“看起来斜一点”而用，属于语义滥用。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 按钮里写
<button>确认<em>删除</em></button>合理——“删除”是操作重点，需强调 - 写
<button><i>Edit</i> Mode</button>也合理——Edit是外文术语 - 但写
<button><em>提交</em></button>单纯只为视觉倾斜？语义错，CSS 重置后可能直接失效
移动端 Safari 斜体失效？先查字体加载链
iOS Safari 对字体子集和合成行为极其敏感。PC 上正常的 font-style: italic，到 iPhone 上变正体或发虚，90% 是字体加载问题。
- 打开 DevTools → Elements → 选中元素 → Computed → 查看
font-family实际加载的是哪个文件（常 fallback 到系统字体） - 检查
@font-face是否为italic单独声明了src，且font-style值严格匹配 - 禁用
font-synthesis: none（它会阻止合成，但若字体没 italic 就彻底失效） -
font-display: swap可能造成初始渲染用无斜体的系统字体，等自定义字体加载完才切换，产生闪烁
真正难的不是怎么写那行 font-style: italic，而是判断这个“斜”到底要承担语义、还是视觉、还是设计稿硬性角度——三者对应完全不同的技术路径，混用就踩坑。
