移动 Safari 前导/行高问题（使用@font-face）答案

【问题标题】：Mobile Safari Leading/Line-height problems (using @font-face)移动 Safari 前导/行高问题（使用@font-face）
【发布时间】：2012-12-22 23:06:19
【问题描述】：

我正在开发一个响应式网站，但我自己没有移动设备。（仍然生活在黑暗时代）无论如何，我的同事已经给我发了一张 ipad 上网站的屏幕截图。

前导/行高很糟糕，但在常规 Safari 中看起来不错。这是一些相关的（我认为）CSS：

@font-face {font-family: 'Rubrik-Regular';src: url('fonts/237360_5_0.eot');src: url('fonts/237360_5_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_5_0.woff') format('woff'),url('fonts/237360_5_0.ttf') format('truetype'); font-style: normal; font-weight: normal; }
@font-face {font-family: 'Rubrik-Medium';src: url('fonts/237360_6_0.eot');src: url('fonts/237360_6_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_6_0.woff') format('woff'),url('fonts/237360_6_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }
@font-face {font-family: 'Rubrik-Bold';src: url('fonts/237360_7_0.eot');src: url('fonts/237360_7_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_7_0.woff') format('woff'),url('fonts/237360_7_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }

html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} 

html{font-size:81.25%;-webkit-text-size-adjust:81.25%;-ms-text-size-adjust:81.25%}  /* shrink to ~13px body font without changing all other sizes */
/* 16px base font size with 162.5% (26px) line height */
body, button, input, select, textarea { font: 1em/1.6154em 'Rubrik-Regular', Arial, Verdana, sans-serif; color: #262626; }

这是一个并排比较：

live demo link

为什么不考虑行高？

【问题讨论】：

您是否已经解决了这个问题？我在 iOS Simulator（Apple 官方工具）中查看，行高看起来不错。
是的，谢谢@Nick。我一直在努力，最后偶然发现了我在 -webkit-text-size-adjust 中的错误。

标签： css mobile-safari font-face

【解决方案1】：

这似乎已经解决了：

html{ font-size: 16px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}

我错误地试图像这样调整字体大小：

html{ font-size: 82.5%; -webkit-text-size-adjust:82.5%; -ms-text-size-adjust:82.5%}

而且尺寸调整参数偷偷地扼杀了我在移动设备上的排版。

【讨论】：