iOS 设备上的字体粗细问题

Question

我有 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');
}

Answer 1

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

解决方案是在加载 Helvetica Bold 时添加

@font-face

规则。

Answer 2

你可以试试这个：

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

Answer 3

尝试这个例子：

.textweight {
    font-family: sans-serif;
    font-weight: 800;
}