应显式设置font-family fallback链（中文字体优先）和line-height:1.5，并避免transform微调；中英文混排时用span分别包裹并用em单位控制letter-spacing，禁用optimizelegibility以解决safari baseline偏差。
button里中英文混排基线不齐怎么办
直接设 vertical-align 没用，因为 button 是替换元素，内部文本默认按字体度量对齐，而中文字体和英文字体的 ascender/descender 值差异大，导致“登录 Login”这类文本里，中文下沉、英文上浮。
真正有效的做法是：给 button 显式设置 line-height 和 font-family fallback 链，并确保中文字体在前、西文字体在后——但顺序必须是「中文字体, sans-serif」而非「中文字体, Arial」，否则英文会被强制套用中文字体的窄 x-height 和细字重。
- 推荐写法：
font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif -
line-height: 1.5（不是1.5em或24px），让行高基于当前字号弹性计算 - 避免对
button设padding-top/padding-bottom单独调，容易破坏垂直居中逻辑
letter-spacing 调整按钮文字间距时的常见误用
想让“立即下载”四个字拉开一点，随手加 letter-spacing: 2px，结果发现英文部分（比如 “Download”）被撑得更开，甚至换行错位——这是因为 letter-spacing 对所有字符一视同仁，而汉字本身字宽大、英文字符窄，等量加空隙后视觉失衡。
更稳妥的做法是只作用于明确需要调整的片段，而不是整个 button：
- 用
<span></span>包裹中文或英文部分，分别控制：<button>立即<span class="en">Download</span></button> - CSS 中：
.en { letter-spacing: 0.05em; }（用em单位，随字号缩放） - 不要在
button上设word-spacing，它对中文无效，且会干扰英文单词内空格渲染
移动端 Safari 下按钮文字错位的隐藏原因
真机测试时发现 iOS 17+ 的 Safari 里，“提交订单”按钮里的“订”字总比“单”字低半像素——这不是 bug，而是 WebKit 对某些中文字体（尤其是未声明 font-feature-settings: "liga" 的旧版 Noto Sans CJK）的 baseline 渲染策略不同。
绕过方式很实际：
- 加一行
text-rendering: optimizeSpeed;（禁用optimizeLegibility，后者会触发更激进的字形微调） - 把按钮内容用
display: flex; align-items: center;包一层span，再设height和line-height一致，强制视觉居中 - 慎用负
letter-spacing：Safari 对小字号（14px以下）+-0.5px渲染不稳定，可能直接丢弃该样式
为什么 button 内部不能直接用 transform 调整文字位置
有人试过给 button > span 加 transform: translateY(-1px) 强行抬高，结果在 Chrome 和 Firefox 下正常，Safari 却出现文字模糊、点击热区偏移——因为 button 的渲染层在多数浏览器里是独立合成层，transform 会触发额外图层提升，而 Safari 对子元素 transform 的像素对齐处理不一致。
真正安全的微调方式只有两种：
- 用
padding整体推移（如padding: 8px 16px→padding: 9px 16px），代价是按钮高度变化 - 用
line-height+vertical-align: middle组合，在已知固定高度按钮中精确控制（例如height: 40px; line-height: 40px;）
最常被忽略的是：按钮内文字是否用了系统默认字体。如果用了自定义 WebFont，必须确认其 ascender 和 descender 值与系统字体接近，否则任何 CSS 对齐手段都只是打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
