Использование css font-face в приложении Phonegap для Windows Phone 8

Font-face не работает для меня в Windows Phone 8 с помощью Cordova/Phonegap.

Используя шаблон Cordova WP8, я добавил простое определение шрифта и установил * для использования этого шрифта ИЛИ wingdings (чтобы быть более ясным, чтобы он не работал).

html

Файл находится в папке /fonts, установленной как "Содержимое" и "Копировать всегда".

fontlocation

(вау, что изображение огромно)

Если я запустил это в Chrome, он правильно загрузит шрифт:

font works in chrome

Даже если я запустил его в IE10 (или в режиме IE9), он правильно загрузит шрифт:

font works in IE10

Но если я запустил его на симуляторе Windows Phone 8, я получаю крылышки:

windowsphone8simulator

Любые идеи? Обходные? Должен ли я просто пойти и спрыгнуть с моста?

UPDATE:

Кто-то предложил использовать формат шрифта WOFF, поэтому я пошел в http://www.font2web.com/ и преобразовал свой TTF-шрифт. Я скопировал новые файлы в папку www/fonts/. Как и прежде, я убедился, что для "Build Action" установлено значение Content и Copy Always.

Кроме того, я прочитал кое-что о попытке загрузить шрифты после срабатывания события deviceReady. Стоит попробовать... ничего не может повредить.

Здесь css файл с именем `fonts.css ', который определяет новый шрифт со всеми возможными комбинациями:

new css

Затем я редактировал запас js/index.js и добавил некоторый script для динамической загрузки нового fonts.css в DOM после deviceReady:

deviceReady

BTW: loadjscssfile() немного script Я получил от http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml, чтобы загрузить содержимое файла fonts.css в DOM.

Я проверил его в Internet Explorer 10/9, Chrome и Firefox. Через 3 секунды шрифты меняются. Я попробовал это в симуляторе Windows Phone 8. Через 3 секунды крылышки.

ОТВЕТЫ

Ответ 1

Font-face, заданный в css, не будет работать , если css хранится локально (содержимое изолированного хранилища или XAP). У меня была аналогичная проблема, и вот ответ от команды WP WebBrowserControl:

Это известная проблема, и, к сожалению, неизвестно обходное решение кроме размещения страницы и ресурсов удаленно.

Итак, в качестве обходного пути вы можете попробовать разместить свой файл css и html на удаленном сайте, но я понимаю, что это не идеально.

ИЗМЕНИТЬ

Я также попробовал следующее - загрузить шрифт в приложение wp8 silverlight, чтобы его можно было узнать по имени (как и другие предварительно загруженные шрифты), и это сработало для silverlight ui - я мог бы ссылаться на этот новый шрифт по имени из xaml, но это, к сожалению, не работало для содержимого веб-браузера.

Ответ 2

Похоже, если вы закодируете шрифт в base64 и поместите его непосредственно в файл css, то он также будет работать в приложении WP8.

С веб-приложениями, такими как Icomoon или Fontsquirrel вы можете легко сгенерировать css, содержащий строку base64.

Ответ 3

Ну, у меня была такая же проблема, поэтому я решил: Я использую sencha touch, поэтому у меня есть два отдельных файла css. Для элемента значка я добавляю дополнительный класс win и к окнам css я добавил

.list.win {
  background-image: url('data:image/png;base64,IMAGECODE HERE');
}

Ну, наверное, он застопорился, но все-таки это работает, поэтому он работает, потому что я не нашел что-то лучше

PS: Мое решение - это когда вы используете шрифты в качестве значков.