Question

我使用jQuery Mobile框架创建了移动Web应用程序。我还在我的.css文件中添加了一些外部阿拉伯字体。当我在Chrome浏览器，Firefox等桌面浏览器中测试网页时，它运行良好。但是，当我在iPod touch上的Mobile Safari中测试网页时，它无法正常工作，它仍会显示默认字体...

我的CSS是：

@font-face {
    font-family: 'Amiri-Bold';
    src: url('amiri-bold.eot');
    src: url('amiri-bold.eot?#iefix') format('embedded-opentype'),
         url('famiri-bold.woff') format('woff'),
         url('amiri-bold.ttf') format('truetype'),
         url('amiri-bold.svg#amiri-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-size:16px;
    font-family:Amiri-Bold;
}

我的HTML是：

<h1>يبييبي يب يب يبب</h1>

Answer 1

我在http://www.amirifont.org/看到他在html中使用了“lang”属性：

<div lang="ar">
    <p>some arabic text</p>
</div>

<div lang="en">
    <p>english text</p>
</div>

[UPDATE]

<强> 1。可能需要使用unicode-bidi进行检查

“unicodeBidi属性与direction属性一起使用，用于设置或返回是否应覆盖文本以支持同一文档中的多种语言。”

/*I've have not tested this one */
arabic-text {
    direction: ltr;
    unicode-bidi: embed;
}

http://reference.sitepoint.com/css/unicode-bidi

http://www.quackit.com/css/properties/css_unicode-bidi.cfm

http://www.w3schools.com/jsref/prop_style_unicodebidi.asp

<强> 2。可能有一些东西需要检查charset，看一看关于现代阿拉伯语脚本的讨论（有些人在某些情况下使用utf16）

What character encoding should I use for a web page containing mostly Arabic text? Is utf-8 okay?

Is UTF-8 enough for all common languages?

第3。尝试使用谷歌字体来查看问题是否来自访问

http://www.google.com/webfonts/earlyaccess

Answer 2

似乎iOS不支持复杂脚本的 OpenType 字体：https://bugs.webkit.org/show_bug.cgi?id=92586，而Amiri是 OpenType 字体。 Apple提供的阿拉伯字体是 AAT 字体，这可能是他们工作正常的原因。

另见此相关讨论：https://discussions.apple.com/thread/5281738

@ font-face无法在Mobile Safari上运行

2 个答案: