@font-face не работает в Mobile Safari

Question

Я создал мобильное веб-приложение, используя jQuery Mobile Framework. Я также добавил внешний арабский шрифт в мой файл.css. Когда я тестирую веб-страницу в настольном браузере, таком как Chrome, Firefox и т. Д., Он работает хорошо. Но когда я тестирую веб-страницу в Mobile Safari на моем iPod touch, он не работает, он по-прежнему показывает шрифт по умолчанию...

Мой 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

Вы хотите использовать SVG на мобильном сафари. Я работал над этой вещью в эти выходные.

Answer 2

Похоже, что iOS не поддерживает шрифты OpenType для сложных скриптов: https://bugs.webkit.org/show_bug.cgi?id=92586, а Amiri является шрифтом OpenType. Арабские шрифты, поставляемые Apple, являются шрифтами AAT, и, вероятно, поэтому они работают нормально.

Смотрите также эту связанную дискуссию: https://discussions.apple.com/thread/5281738

Answer 3

Я вижу на http://www.amirifont.org/ он использует атрибут "lang" в html:

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

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

[ОБНОВИТЬ]

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. Там может быть что-то, чтобы проверить с набором символов, посмотрите на эти обсуждения о современном арабском языке (некоторые люди используют utf16 в некоторых случаях)

Какую кодировку символов следует использовать для веб-страницы, содержащей в основном арабский текст? Все в порядке с utf-8?

Достаточно ли UTF-8 для всех распространенных языков?

3. Попробуйте использовать шрифт Google, чтобы увидеть, если проблема связана с доступом

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