iOS 设备上的字体粗细问题答案

【问题标题】：Font weight issue on iOS devicesiOS 设备上的字体粗细问题
【发布时间】：2017-12-27 00:55:58
【问题描述】：

我有用于 Android 和 iOS 应用程序的 HTML 页面的 Helvetica Light 字体。问题是，当我将 font-weight: bold 指定给标题时，它在 Android 上运行良好，但在 iOS 设备上却不行。

这里是font-face：

@font-face {
font-family: 'HelveticaLight';
src: url('./fonts/helveticalight.eot');
src: url('./fonts/helveticalight.eot') format('embedded-opentype'),
     url('./fonts/helveticalight.woff2') format('woff2'),
     url('./fonts/helveticalight.woff') format('woff'),
     url('./fonts/helveticalight.ttf') format('truetype'),
     url('./fonts/helveticalight.svg#helveticalight') format('svg');
}

【问题讨论】：

为什么你不使用 helvetica 粗体字体而不是 light font 粗体字体？

标签： html ios css fonts

【解决方案1】：

问题是您没有加载粗体版的 Helvetica — 您只是加载了 Helvetica Light。如果缺少正确的粗体版本，就像您的情况一样，大多数操作系统或浏览器都会通过使细字体“更胖”（又名faux bold）来创建假的粗体版本。但 iOS 不会：它会坚持使用您要求的原始字体：Helvetica Light。

解决方案是在加载 Helvetica Bold 的位置包含 @font-face 规则。

【讨论】：

如果我使用 标签，这也不适用于 IOS 设备。
"如果我使用 标签，这也不起作用" — 嗯，确实不会因为同样的原因 :)
"strong 标签是否适用于 h3,h4 之类的 h 标签？？" — 是的，但这与您的原始问题无关。
这是我的问题的正确答案。我嵌入了来自 Google 的字体，但我几乎不知道您需要自定义嵌入 URL，以便您还可以包含粗体字体。谢谢。

【解决方案2】：

试试这个例子；.textweight{ font-family: sans-serif; font-weight: 800; }

【讨论】：

【解决方案3】：

你可以试试这个：

body{  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

【讨论】：

@piyushbalouria，如果有效，请接受答案。
让我试试这个。
这会影响渲染，但不能解决原来的问题：没有加载粗体。
然后让我们尝试将您的字体大小减小1px 如果仍然相同，请使用 helvetica 粗体字体。
无论如何感谢我使用 -webkit-text-stroke 属性来解决 IOS 中的字体粗体问题。