ios上的CSS自定义字体渲染缺陷答案

【问题标题】：CSS Custom Font render flaw on iosios上的CSS自定义字体渲染缺陷
【发布时间】：2016-02-09 10:12:49
【问题描述】：

我制作了一个带有箭头“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 上它们是两倍，如屏幕截图所示。

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

【问题讨论】：

不确定这是否是您的情况，但是“许多移动设备（包括移动 Safari）样式标题标签 (h1-h6) 带有类似字体粗细：粗体。如果您使用的字体没有” t 包括粗体，然后浏览器将创建一个假粗体并偏移它" (source)
是的，就是这样。谢谢 :) 你能把它写成答案吗？

标签： ios css fonts

【解决方案1】：

如on CSS-tricks 所述，许多移动设备（包括移动 safari）具有用于标题标签 (h1-h6) 的默认 css，具有更粗的字体，例如 font-weight: bold。

如果您使用的字体不包含粗体，则浏览器将创建一个假粗体并抵消它。这就是为什么这封信看起来是双倍的。

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

【讨论】：