带有重音的字母在移动浏览器中无法正确显示

时间:2015-11-09 22:19:46

标签: html unicode fonts character-encoding character

我对Google字体的重音字母有疑问。字母“š”在我的电脑上的所有浏览器中都能正确显示,但它在所有移动浏览器,Android和iOS中都被系统字体取代(但在Android Chrome中可以正常使用)。字体是Abril Fatface,你可以在Screenshot

看到结果

这里https://jsfiddle.net/Lauven/zkL04kbx/embedded/result/

它在我的服务器和Jsfiddle上的行为相同。

到目前为止,我已尝试过这些事情:

  • <meta http-equiv="Content-type" content="text/html; charset=UTF-8"><meta charset="UTF-8">放入首部
  • 为.htaccess文件添加了utf-8编码
  • 在我的文本编辑器中使用utf-8编码保存文件

但我不确定这是编码问题,因为我的电脑和Android Chrome浏览器中的字母显示正确。任何人都知道如何解决这个问题?

更新:它实际上仅适用于Chrome / Windows和Chrome / Android

3 个答案:

答案 0 :(得分:0)

该字体不支持您尝试使用它的字符。看一下http://jsbin.com/zucatufaxi/edit?html,css,output:最后的š的风格与文本的其他部分完全不同。

因此,真正的解决方案是“确保您使用的字体支持您需要设置样式的文本”,或者查看它是否支持组合字符并使用unicode序列s + {{ 1}}:combining caron

虽然上面的bin中的quck测试显示字体不能正确支持此序列,但是:您需要找到一个完全支持的字体,找到一个字体,看起来与fallthrough字体相似(第一种通常更有意义)。

答案 1 :(得分:0)

更新:我尝试使用托管在我服务器上的相同字体,而不是使用谷歌字体,从那以后一切都适用于所有浏览器。我仍然不知道Google字体有什么问题。但至少它是这样运作的。

答案 2 :(得分:0)

我遇到了完全相同的问题,在Chrome中正确呈现字母但在Firefox中被替换。 在我的案例中的解决方案是,我从Google字体下载字体时忘记包含拉丁语扩展选项。

2部分中从https://www.google.com/fonts#UsePlace:use/Collection:Abril+Fatface下载字体时的情况。选择您想要的字符集:确保您已包含拉丁语扩展(latin-ext)选项。