ios - iOS 上的 CSS 自定义字体呈现缺陷

Question

我制作了带有箭头“A”的自定义字体，将其导出为 .eot .svg 和 .ttf 字体格式，并使用以下 css 将其放在我的网站上:

@font-face{
    font-family: 'Nautix-Light';
    src: url('Nautix-Light.eot');
    src: url('Nautix-Light.eot?iefix') format('eot'),
    url('Nautix-Light.ttf') format('truetype'),
    url('Nautix-Light.svg#webfont') format('svg');
}

它在 Android 设备和带有 Firefox 和 Safari 的 Mac 上运行良好，但在 iPhone 6 上它有一个渲染缺陷:

峰值应该很尖锐，但在 iPhone 6 上峰值翻了一番，如屏幕截图所示。

任何可能导致此问题的想法 - 或者我可以尝试解决什么问题？

Answer 1

如前所述on CSS-tricks ，许多移动设备(包括移动 safari)的标题标签 (h1-h6) 都有默认的 css，字体更粗，类似于 font-weight: bold .

如果您使用的字体不包含粗体，那么浏览器将创建一个人造粗体并对其进行偏移。这就是为什么这封信看起来加倍了。

如果您不愿意为不同的字体绘制字体，请添加具有相同源字体的粗体字体，或者始终强制使用 normal在使用字体的任何地方使用字体粗细。