button文字倾斜应优先用CSS类设置font-style: italic，确保字体支持斜体字形；避免内联样式、oblique及transform: skewX()，以防兼容性、可访问性与布局问题。
button文字倾斜用font-style就行，但别直接写在<button>标签里
直接在<button>上加style="font-style: italic;"确实能斜，但实际项目中更推荐用CSS类控制。因为按钮常复用，硬编码样式难维护，也容易和全局按钮样式冲突。
常见错误是把font-style写成font-style: oblique;——它和italic渲染效果可能不同（尤其在无斜体字体时，oblique只是机械倾斜，italic会调用字体自带斜体字形）。除非明确需要模拟倾斜，否则优先用italic。
- 正确写法：
.btn-tilt { font-style: italic; } - 避免写：
button { font-style: oblique; }（兼容性差，部分字体下看不出区别） - 注意：如果按钮用了
font-family指定非系统字体，要确认该字体文件包含italic字重，否则 fallback 到浏览器模拟斜体，效果发虚
用transform: skewX()强行倾斜？不推荐
有人试过用transform: skewX(-10deg)让文字“看起来”斜，但这不是真正的字体倾斜，而是整个按钮盒模型被扭曲。会导致点击热区偏移、文字边缘锯齿、与邻近元素对齐错乱，且无法被屏幕阅读器正确识别语义。
真正需要倾斜效果的场景（比如设计稿强制要求 12° 倾斜），应先确认是否必须用视觉 hack —— 大多数情况下，设计师要的只是font-style: italic带来的语义化斜体。
立即学习“前端免费学习笔记（深入）”；
-
skewX()会破坏button的可访问性属性（如aria-label位置偏移） - 响应式布局中，
transform缩放或旋转后，文字大小可能意外变化 - 如果按钮内含图标，
skewX()会让图标也歪掉，需额外重置
Vue/React组件里怎么安全加斜体？
框架里直接写style或绑定class都行，关键是别用内联style硬编码值。比如 Vue 模板里写<button :class="{ 'btn-tilt': isSpecial }">，比<button :style="{ 'font-style': isSpecial ? 'italic' : 'normal' }">更利于 CSS 维护和复用。
- React 中避免：
<button style={{ fontStyle: 'italic' }}>—— 这样没法用 CSS 预处理器变量或媒体查询覆盖 - 全局按钮组件（如
<BaseButton>）应在 props 中暴露variant或textStyle，而不是让使用者传fontStyle字符串 - 如果项目用 Tailwind，直接用
class="font-italic"，但注意 Tailwind 默认只启用了italic，没开oblique
移动端 Safari 下font-style: italic失效？检查字体加载
真机测试时发现 iOS 上文字不斜，大概率是 Web Font 加载失败或未声明font-style: italic对应的@font-face。Safari 对字体字重/样式匹配极严格，哪怕font-family: 'Inter'写了，但没定义font-style: italic的@font-face规则，就会 fallback 到系统字体（而系统字体不一定有斜体）。
- 检查
@font-face是否包含font-style: italic;和对应src路径 - 用 Safari 开发者工具 → Elements → 计算样式，看
font-style是否被覆盖（比如被重置 CSS 的button { font-style: normal; }干掉了） - 临时加
!important验证是否是层叠问题（上线前必须删掉）
font-style背后那堆字体加载和 CSS 层叠细节里。 
