Шрифт Awesome Icons не работает в некоторых браузерах

Ответ 1

Есть несколько разных проблем, которые я хотел бы изучить, и надеюсь, что вы его исправите.

Если вы отметите, какой шрифт работал, мы, вероятно, могли бы помочь лучше. Я бы сравнил шрифт, который, как вы сказали, работал с FontAwesome, чтобы узнать, каковы различия. Я бы сказал, что глифы отображаются в другую область юникода и, возможно, браузер не читает оттуда?

Вы можете использовать инструмент, например Font Forge, для проверки отличий от других шрифтов. Я заметил, что при попытке сгенерировать шрифт FontAwesome из Font Forge я получил ошибки проверки с интервалом em, и у глифов были ошибки (самопересечение, неправильное направление, отсутствие точек в экстремумах). Я видел это раньше в знаковых шрифтах и ​​никогда не имел проблемы, но я еще не тестировал Opera. Если вы сравниваете попытку создания шрифта с чем-то, что работает, вы, вероятно, можете уменьшить проблему.

Другое вещество Я уверен, что вы накрыли, но дважды проверяли:

Я читал здесь, что наличие локальной версии установленного шрифта может конфликтовать с вложением шрифта. https://github.com/FortAwesome/Font-Awesome/issues/247

Если вы взяли значок-шрифт, а затем добавили к нему свои собственные глифы, то использовали что-то вроде белки шрифта для создания всех безопасных в Интернете форматов, чтобы вы сказали генератору добавить диапазон юникодов созданных вами глифов. Однажды я забыл сделать это, и приложение добавило только глифы в диапазоне a-z. Простой способ проверить - посмотреть вкладку gyphs на странице demo html и убедиться, что все значки включены.

Вы используете правильное правило шрифта CSS3 и встраиваете eot, ttf, woff и svg, и вы немного подождали. Я заметил, что на некоторых старых iphones шрифт выводится навсегда.

Использование такого инструмента, как функция определения шрифта font-face modernizr, может немного облегчить некоторую поддержку между браузерами.

Мне интересно узнать, в чем проблема.

Ответ 2

Opera Mini не поддерживает шрифт как упоминается на официальном сайте http://www.opera.com/docs/specs/productspecs/

Один "грязный" маленький трюк, который я мог бы подумать, будет заключаться в том, чтобы преобразовать ваш шрифт в SVG и использовать его в вашем CSS, поскольку он частично поддерживается (как это также написано на их веб-сайте).

Что-то вроде

.icon{

 background-image: url(icon.svg);
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
}

Посмотрите также на ссылку выше http://www.w3.org/TR/SVGTiny12/fonts.html

UPDATE

Opera mini не поддерживает FontAwesome в IOS 6.1

Ни другие примеры шрифтов не работают (http://codepen.io/bennettfeely/full/ErFGv)

Но использование SVG кажется отличным решением, доказательством концепции Исходный источник: http://dbushell.com/demos/css-sprites/ Более подробная информация о демо: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

Ответ 3

РЕШЕНИЕ ДЛЯ OPERA MOBILE (без Opera Mini)

Я попытался использовать два инструмента преобразования шрифтов в Интернете. Сначала я использовал http://www.freefontconverter.com/ для преобразования исходного файла FontAwesome svg в ttf. Затем я использовал http://www.font2web.com/ для преобразования этого .ttf в .eot,.woof anf.otf.

Наконец, я заменил исходные файлы, и теперь Opera Mobile отображает значки должным образом.

Ответ 4

Для этого я знаю, что существует поддержка @font-face в Opera Mini и поддержка частичного @font-face в Andoroid с 2,2 до 3,0 (ранее версии для Android не поддерживали @font-face). См.: http://caniuse.com/fontface

Частичная поддержка, которую я знаю, означает, что они не поддерживают DRM-защищенные шрифты, и некоторый синтаксис, подобный синтаксису "смайлик", не работает для них.

Итак, если вы хотите показывать значки в Opera Mini и Android 2.1, вам нужно будет сделать резервную копию значков изображений. Если у вас проблемы с Android 2.2-3.0, вы можете исправить это, изменив синтаксис.

Ответ 5

Такие ошибки сообщаются для FortAwesome:

• https://github.com/FortAwesome/Font-Awesome/issues/246
• https://github.com/FortAwesome/Font-Awesome/issues/791

Они еще не исправлены, они связались с отношениями разработчиков Opera, чтобы узнать, что вызывает это. У вас не так много вариантов, кроме как ждать их исправления. Отслеживайте ошибки, чтобы узнать больше.

Ответ 6

• Перейдите к http://icomoon.io/app/

• Кнопка Icon Library

• Добавить библиотеку Font Awesome

• Выберите нужные иконки

• Нажмите кнопку "Шрифт" (экспортируйте значки в шрифт css awesome)

• Замените шрифты Awesome (ttf, svg и т.д.) с новыми шрифтами Awesome

CSS

 @font-face{
font-family:"FontAwesome";
src:url('../fonts/awesome/fontawesome.eot');
src:url('../fonts/awesome/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/awesome/fontawesome.woff') format('woff'),    url('../fonts/awesome/fontawesome.ttf') format('truetype'),
        url('../fonts/awesome/fontawesome.svg#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal;}.flag:before,.mobile:before{font-family:"FontAwesome";font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;display: inline-block; text-decoration: inherit;}.flag:before{content:"\f024";}.mobile:before{content:"\f10b";}

Я пробую это, а затем в Opera Mobile работают Awesome Fonts:)

Ответ 7

Возможно, это связано с кодировкой? Вы объявляете UTF-8 в своем документе, а также в таблице стилей?

<meta charset="UTF-8">

или

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

и в таблице стилей (обратите внимание, должна быть первая строка, первая колонка):

@charset "utf-8";

Ответ 8

Как ссылка, у меня была эта проблема, и проблема была в доменах. Некоторые браузеры, Firefox, в частности, отказываются загружать шрифты из другого домена (называемые Same domain policy). Заголовки

Access-Control-Allow-Origin "*"

В nginx, например, это настраивается следующим образом:

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

Должен быть установлен, а также помнить, что тип содержимого шрифтов должен быть

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

Неправильный тип содержимого может привести к тому, что шрифт не загрузится, поэтому вы потеряете значки. Полезно иметь эту информацию в качестве справки:)

Ответ 9

У меня тоже были проблемы с отображением SVG-шрифта в Blackberry. Проблема заключается в имени svg (в документе), и имя семейства шрифтов должно быть одинаковым. Я нашел этот ответ здесь, в комментариях к последнему ответу:

@fontface на ежевике os 7

Ответ 10

используйте приложение icomoon http://icomoon.io/app/, чтобы изменить шрифт svg на веб-шрифты и заменить старый шрифт для шрифта Awesome. он работает для меня в оперном мобильном