Mac 和 PC 上的字体行高差异

Mac 和 PC 系统之间的字体渲染和行高差异问题可以通过一直令网页设计师头疼的问题。 HTML 和 CSS 对元素外部的行高提供有限的控制，这可能会导致在使用基于表格的布局或使用特定字体时内容未对齐。

在所呈现的情况下，编码设计旨在对齐信息小部件垂直位于 div 中间。然而，在 Mac 系统上，文本似乎呈现在元素之外，从而导致对齐方式不正确。此行为在最左侧的“条件”部分尤其明显。

故障排除尝试

已多次尝试纠正该问题，包括：

• 设置所有元素的行高
• 调整字体粗细
• 定义所有元素的高度
• 组合每个元素的高度/顶部填充
• 利用不同的单位类型（百分比、em、px）进行填充

尽管做出了这些努力，Mac 和 PC 上的完美对齐仍然难以实现。

潜在的解决方案

1. 使用替代字体： 切换到其他字体（例如 Arial）可以解决该问题。这表明字体本身，而不是 CSS，可能是问题的根源。
2. 地址字体垂直指标： Cutive，设计中使用的字体，可能有不同的垂直指标Mac 和 PC 系统之间。通过 Font Squirrel 字体生成器运行字体并启用“修复垂直指标”选项可能会缓解此问题。
3. 放弃基于表格的布局：考虑放弃显示：表格-细胞;布局策略。相反，为每个元素及其子元素定义特定的高度和填充。这可能会导致两个操作系统上的元素之间的间距略有不同。

分类

对此问题进行分类具有挑战性。它属于以下交集：

• 行高变化：不同的字体渲染引擎对行高的解释不同，尤其是在元素之外。
• 基于表格的布局： 显示：table-cell；属性可能会在操作系统之间引入细微的对齐差异。
• 字体兼容性： 设备和操作系统之间的字体规格可能有所不同，从而影响垂直对齐。

解决此问题需要创造性解决方案的结合以及对 Mac 和 PC 系统上字体渲染特性的透彻理解。