CSS自定义字体在ios上呈现缺陷

Question

我使用箭头＆＃34; A＆＃34;制作了一个自定义字体，将其导出为.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，许多移动设备（包括移动设备）都有标题标签（h1-h6）的默认css，字体更大胆，类似于font-weight: bold。

如果您使用的字体不包含粗体，则浏览器将创建一个虚假粗体和偏移量。这就是为什么这封信看起来翻了一倍。

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