CSS定义字体呈现在iOS

缺陷我做了一个箭头“A”的自定义字体，远销它.eot .SVG和的.ttf字体格式，并把它放在我的网站下面的CSS：CSS定义字体呈现在iOS

@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设备和Mac上的Firefox和Safari浏览器，但在iPhone 6它有一个渲染缺陷：

峰应该是尖锐的，但他们都对iPhone 6一倍，如截图所示。

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

来源

2016-02-09 Mischa

不知道这是你的情况，但“许多移动设备（包括移动Safari浏览器）样式标题标签（h1-h6）与font-weight：bold。如果您使用的字体不包括粗体重，那么浏览器将创建一个仿粗体和偏移量“（[source]（https://css-tricks.com/forums/topic/weird-mobile-safari-font-face-problem-font-doubled-and-偏移至左/）） –

是的，就是这样。谢谢你:)你能写这个答案吗？ – Mischa

如前所述on CSS-tricks，很多移动设备（包括移动Safari）都有大胆标题（h1-h6）的默认css，如font-weight: bold。

如果您使用的字体不包含粗体重，那么浏览器将创建一个仿粗体和偏移量。这就是为什么这封信似乎翻了一番。

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

来源

2016-02-09 10:50:22

CSS定义字体呈现在iOS

回答

相关问题