Шрифт Awesome не отображается на Windows Phone 8

У меня есть тестовый сайт, который использует шрифт Font Awesome для отображения значков.

Значки хорошо отображаются на моем рабочем столе в IE и Chrome, а также на мобильных устройствах iPhone и Andriod.

Однако значки шрифтов не отображаются на телефоне Nokia Lumia 920 Windows 8.

Я не могу понять, что вызывает проблему. Другие сайты с шрифтом Font Awesome правильно отображаются на телефоне Nokia Lumia 920 Windows Phone. Поэтому должно быть что-то специфическое для созданной мной установки.

Тестовый сайт: http://www-peachtreedata.azurewebsites.net/?page_id=6

Любые советы о том, как заставить это работать на платформе Windows Phone, будут оценены.

Ответ 1

Это ситуация, когда наблюдаемая проблема является лишь симптомом реальной проблемы. У меня была такая же проблема с моим собственным сайтом. Но оказалось, что это не проблема с Windows Phone, но IIS 7 - 8.1 обслуживает неправильный тип MIME для файлов веб-шрифтов. Убедитесь, что правильные типы MIME подаются для ваших файлов шрифтов, как показано ниже: Правильный тип MIME для шрифтов

Кроме того, если вы используете Windows Azure Storage для своих шрифтов, вам необходимо установить тип MIME для каждого файла вручную. Самый простой способ сделать это для существующих файлов - это один из многих редакторов внешнего интерфейса Azure.

НТН

Ответ 2

Мне удалось установить мой набор шрифтов/значков на Windows Phone 8 с помощью base64. Убедитесь, что вы используете шрифты WOFF и TTF следующим образом (где * - длинные строки base64):

@font-face {
    font-family: 'icomoon-ac';
    src: url(data:application/x-font-woff;charset=utf-8;base64,***) format('woff'),
        url(data:application/x-font-ttf;charset=utf-8;base64,***) format('truetype');
    font-weight: normal;
    font-style: normal;
}

ОБНОВЛЕНИЕ: Этот вопрос снова появился в Hacker News, поэтому позвольте мне подробно изложить свое первоначальное сообщение здесь, если оно поможет другим: 1) Я только пробовал icomoon, и 2) я использовал только 1 встроенный шрифт.

Я использую jqMobi, теперь называемый Intel App Framework, для создания мобильного сайта, ориентированного на все основные мобильные браузеры. Рамка jqMobi включает ~ 70 значков из icomoon, встроенных в свой ui CSS. Мне понадобилось еще несколько, поэтому я сначала попытался расширить это, создав еще один файл шрифта, называемый icomoon-extra, загрузив его в http://www.motobit.com/util/base64-decoder-encoder.asp для создания строка base64 и добавление другого @font-face в CSS jqMobi. Это не сработало для меня, поэтому я просто создал новый файл icomoon-ac, который содержит большинство оригинальных значков из jqMobi icomoon selection, плюс еще около 30 или около того значков, которые мне нужны. Теперь я просто использую шрифт icomoon-ac в рамках, и он работает. Опять же, только 1 встроенный шрифт.

Ответ 3

CSS `@font-face` не работает надежно в IE Windows Phone.

Значки, такие как Font Awesome, зависят от загрузки соответствующего файла шрифта с удаленного сервера. По-видимому, загружать дополнительные шрифты с помощью @font-face на Windows Phone невозможно. В зависимости от источника это имеет место только для Windows Phone 7 или даже для версии 8:

Microsoft указывает, что веб-шрифты не работают на 7.1
Этот поток SO и другой сообщают о проблемах 7.5, но могут быть намеком на возможные решения
В комментариях этот пост указано, что даже кодированные в кодировке Base64 шрифты не работают в эмуляторе. Если я найду время, я проверю это на реальном телефоне (7.5).
Даже modernizr имеет некоторые проблемы с этим

Сидней: на моем Windows Phone, microsoft.com отображается с Tahoma, вторым шрифтом в стеке:

 font-family: wf_SegoeUI, Tahoma, Verdana, Arial, sans-serif;

Смешно, так как Windows Phone имеет локальную копию доступного пользовательского интерфейса Segoe. Интересно, почему веб-пользователи MS не помещают эту секунду в стек...

Ответ 4

Хорошо, это то, что сработало для меня на IIS7.5. Мне пришлось добавлять MIME-типы .otf,.svg и .woff в IIS, поскольку они еще не существовали. Чтобы добавить новый MIME-тип goto IIS, нажмите MIME types модуль, щелкните правой кнопкой мыши и выберите Add...

    .eot -> application/vnd.ms-fontobject
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/font-sfnt
    .woff -> application/font-woff

Ответ 5

Это может быть исправлено в 8.1 Обновление:

"Как и в Internet Explorer для Windows Phone 8.1 Update, Internet Explorer на Windows Phone позволяет загружать шрифты на основе кросс-кантри, независимо от заголовков контроля доступа, для улучшения совместимости с существующими сайтами" [1]

Ответ 6

Аналогично ответу @flo, я могу подтвердить, что следующие типы пантомимы в IIS7.5 в Windows Server 2008R2 решают проблему:

    .eot -> application/octet-stream
    .otf -> application/font-sfnt
    .svg -> image/svg+xml
    .ttf -> application/octet-stream
    .woff -> application/font-woff