Создание webfont с дополнительными многоязычными символами плоскости Unicode

Я сделал доказательную концепцию онлайн-реализации традиционной карточной игры. Чтобы избежать фактического рисования карт, я использовал соответствующие символы Юникода (например, U + 1F0A1 🂡). Хотя это отлично работает на современном рабочем столе Linux (где DejaVu Sans используется для отображения этих символов), другие операционные системы (например, Windows или Android), похоже, не имеют шрифта, который может отображать символы.

Легким решением было бы загрузить DejaVu Sans через @font-face . Чтобы не загружать все DejaVu Sans, я хотел бы создать шрифт, содержащий только соответствующие кодовые точки. В принципе , Webfont Generator Font Squirrel позволяет это, но я не могу заставить его работать с символами из Unicode Plane 1 (где есть символы игровой карты).

Есть ли простой способ создания @font-face совместимых шрифтов, которые содержат U + 1F0A0 в U + 1F0DF?

Вы можете попробовать адаптировать скрипт построения dejavu, используемый для создания dejavu-lgc. Это или отредактировать его прямо в fontforge.

Да, есть. Вот как это работает.

Создание шрифта

Чтобы избежать использования гигантских шрифтов только для поддержки нескольких специальных символов, вы можете создавать свои собственные шрифты с помощью таких инструментов, как Icomoon App .

Приложение Icomoon позволяет выполнять следующие действия:

  • Получить один или несколько значков из нескольких популярных шрифтов значков
  • Загрузите другие шрифты, которые могут быть значками шрифтов, а также обычные шрифты
  • Загрузка SVG-файлов для использования в качестве значков
  • Объединяйте любое количество значков из любого количества доступных шрифтов
  • Установите шестнадцатеричное значение UNICODE для любых символов, которые вам нужны
  • Экспортируйте и / или сохраните созданный набор шрифтов

Я использовал приложение Icomoon для создания шрифта эмоций Emoji, а также для создания пользовательских шрифтов значков для каждого проекта.

Icomoon


Использование шрифта

Чтобы включить шрифт значка в свой CSS, вы можете включить следующий код:

 @font-face { font-family: 'myfont'; src:url('fonts/myfont.eot?-td2xif'); src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'), url('fonts/myfont.woff?-td2xif') format('woff'), url('fonts/myfont.ttf?-td2xif') format('truetype'), url('fonts/myfont.svg?-td2xif#myfont') format('svg'); // Different URLs are required for optimal browser support // Make sure to : // 1) replace the URLs with your font's URLs // 2) replace `#myfont` with the name of your font font-weight: normal; // To avoid the font inherits boldness font-style: normal; // To avoid font inherits obliqueness or italic } .icon { font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback speak: none; // To avoid screen readers trying to read the content font-style: normal; // To avoid font inherits obliqueness or italic font-weight: normal; // To avoid the font inherits boldness font-variant: normal; // To avoid the font inherits small-caps text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase line-height: 1; // To avoid the font inherits an undesired line-height -webkit-font-smoothing: antialiased; // For improved readability on Webkit -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla } 

Чтобы использовать значок в своем HTML, вы можете выполнить одно из следующих действий:

       

I rate this movie ★★★★☆!!

I rate this movie ★★★★☆!!

I rate this movie ★★★★☆!!

I rate this movie ★★★★☆!!

I rate this movie !!

I rate this movie !!

I rate this movie !!

Если вы хотите выбрать метод 7, вам понадобится дополнительный CSS-код. Этот CSS-код будет выглядеть так:

 .icon-star:before { content: "\2605"; } .icon-star-unfilled:before { content: "\2606"; } 

icons шрифтов, таких как Iconic , шрифт Awesome или Glyphicons, как правило, используют метод 7. Это, чтобы избежать необходимости копировать специальные символы из чит-листа или принудительно использовать объекты HTML.

Это, однако, метод, который имеет несколько недостатков. Прежде всего, для этого требуется поддержка :before селектором CSS и использование escape-последовательности для символов UNICODE. Эта поддержка не поддерживается ни IE6-7, ни некоторыми версиями Webkit .

Другим недостатком является то, что для каждого значка необходимо использовать отдельный тег HTML, причем каждый тег соответствует одному символу из шрифта значка. Отображение нескольких значков в теге HTML невозможно с помощью метода 7, в отличие от других методов.

Однако другие методы имеют свои собственные недостатки. Способы 1, 3 и 5 требуют, чтобы вы скопировали символ из обложки или использовали средства, чтобы поместить символ в свой код. Возможно, ваш редактор кода не может отображать символ или может отображать другой символ, отличный от символа в шрифте значка, если шрифт значка использует нестандартное сопоставление этого символа.

Методы 1, 3 и 5 также требуют, чтобы ваш браузер использовал правильную кодировку для отображения правильного символа. Для символов UNICODE это не так очевидно, как для символов ASCII. Однако это должно быть обеспечено добавлением метатега где-то в head вашего HTML-документа.

Методы 2, 4 и 6 не требуют, чтобы вы копировали-вставляете символ, однако он делает ваш код менее читаемым людьми и вносит какие-либо изменения в код, более подверженный человеческой ошибке. Кроме того, поскольку вам нужно будет искать код HTML-сущности для каждого из значков, которые вы хотите использовать, или вам нужно запомнить их. Хотя то же самое относится и к classам, используемым в методе 7, эти classы гораздо легче запоминать, чем код объекта HTML.

Interesting Posts

Неверные типы и тернарный оператор: почему? 10: null` запрещено?

В чем разница между typeof и instanceof и когда следует использовать против другого?

JConsole через пересылку локального порта ssh

Подстрока T-SQL – разделение имени и фамилии

неверное преобразование из `void * ‘в` char *’ при использовании malloc?

Как читать и записывать значения узлов XML-документа?

Java-swing прослушивает действие в текстовом поле формы

Оптимальные настройки MySQL для запросов, которые предоставляют большие объемы данных?

Как закрыть все действия моего приложения?

Сложность времени для Java ArrayList

Как добавить некоторые небольшие служебные функции в приложение AngularJS?

Как отключить горячие клавиши в Internet Explorer 9?

Выбор файловой системы для GNU / Linux на SD-карте

Можно ли восстановить предметы, удаленные из «Корзины»?

Решение Visual Studio 2015 обеспечивает обратную совместимость с Visual Studio 2013

Давайте будем гением компьютера.