iPhone 将斜体标签 (<in></a>) 渲染得很小答案

【问题标题】：iPhone renders italic tag (<i></i>) tinyiPhone 将斜体标签 (<in></a>) 渲染得很小
【发布时间】：2015-01-21 02:05:05
【问题描述】：

我们发现 iPhone 的斜体标签呈现存在问题。当为它定义的 font-family 不同于其父级的 font-family 时，斜体文本呈现的比应有的小得多。该问题似乎并非在所有 iOS 设备上都会出现，仅在 iPhone（至少版本 4 - 6）上出现。

测试：http://www.eyesforward.com/etc/italic-fail.html

<!DOCTYPE html>
<html>
  <head>
  <style type="text/css">
    body {
      font-family: serif;
    }
    i {
      font-family: Arial;
    }
  </style>
  </head>
  <body>
    <p>
      "The freaking thing <i>works</i>," Strong said with amazement, punctuating this key verb with his hands like an orchestra conductor giving a downbeat. "It's beautiful. It does exactly what we wanted it to do."
    </p>
  </body>
</html>

http://i.stack.imgur.com/Arh20.png

【问题讨论】：

当您使用不同的字体系列时，例如这里的 serif 和 Arial，您应该预期字形大小的差异，即使字体大小相同。通常 Arial 字形比典型的衬线字体字形更大。我想知道 iPhone 是否会尝试通过自动使用较小的字体来弥补这一点。在任何情况下，出于排版的原因，字体系列不应该混合在文本段落中，或者至少您应该选择匹配字体。

标签： ios css iphone webkit rendering

【解决方案1】：

尝试设置正文和斜体元素的字体大小，看看是否能解决问题：

<style type="text/css">
    body {
      font-family: serif;
      font-size: 16px;
    }
    i {
      font-family: Arial;
      font-size: 16px;
    }
</style>

然后尝试只为身体设置它，看看问题是否仍然存在。每个浏览器都有自己的样式规则，适用于各种元素。

【讨论】：

【解决方案2】：

试试这个：

<style type="text/css">
    body {
        -webkit-text-size-adjust: none;
    }
</style>

【讨论】：