html - 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。如果缺少正确的粗体版本(例如您的情况)，则大多数操作系统或浏览器都会通过将细字体设置为“fatter”(也称为faux bold)来创建伪造的粗体版本。但是iOS不会:它将保持您要求的原始字体:Helvetica Light。

解决方案是在加载Helvetica Bold时包括一个@font-face规则。