Семейство шрифтов Wingdings не работает в Firefox и Opera.

Question

Я использовал шрифт Wingdings в CSS для некоторых символов, таких как карандаш и значок дома.

Он работал в IE, Chrome и Safari, но не в Firefox и Opera. Я гуглил это, но не нашел лучшего решения.

Почему это не работает в Firefox? Мне нужно использовать эти значки, есть ли способ использовать Wingdings в Firefox?

Answer 1

Mozilla и Opera совместимы со стандартами. Wingdings не является стандартным (какой сюрприз от Microsoft), потому что не привязан к Unicode, и поэтому никогда не должен использоваться на веб-сайте.

Однако, не отчаивайтесь, большинство символов доступно в Юникоде: проверьте http://www.alanwood.net/demos/wingdings.html

Важное дополнение (октябрь 2014 г.): начиная с Unicode v7, выпущенного 16 июня 2014 г., все символы из Webdings и Wingdings были добавлены в Unicode. Смотрите комментарий ниже.

Answer 2

Вы можете использовать символы Юникода, такие как

✎

http://www.fileformat.info/info/unicode/char/270e/index.htm

Answer 3

Доступ к символам Wingdings возможен в Unicode-совместимом виде через "Частную область использования" (кодовые точки U+E000 в U+F7FF). Эти коды символов зарезервированы для любых специфичных для шрифта символов, не являющихся частью обычного набора символов Unicode, и, действительно, Wingdingds отображает все свои символы в поддиапазон. U+F021 в U+F0FF,

Например, треугольный флаг, который отображается на P знак равно 0x50 в устаревшем кодировании, можно получить доступ через U+F050 знак равно  знак равно  (HTML) = \F050 (CSS).

Я не уверен насчет других браузеров, но он работает в Firefox 12.

Answer 4

Цитировать сайт:

Люди, которые говорили, что Mozilla должна поддерживать шрифт символа в его конфигурации по умолчанию, бесконечно спорили, потому что это ценная возможность, и юристы по стандартам сказали "нет", так как считают, что поддержка нарушает стандарт HTML. Пока что обструкционисты победили.

http://hutchinson.belmont.ma.us/tth/Wfonts.html

Answer 5

Вы можете использовать Gimp или другое графическое программное обеспечение и сделать несколько GIF-файлов нужных иконок из шрифта Wingdings.

Answer 6

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }

подробнее здесь http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

простое решение в вашем HTML

<style type="text/css">
@font-face {
    font-family: "Ace Crikey";
    src: url(ace.ttf);
}
.ace {
    font-family: "Ace Crikey";
    font-size: 230%;
}
</style>