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

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

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

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

Ответ 1

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

Ответ 2

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

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

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

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

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

Я использовал приложение 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 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, вы можете выполнить одно из следующих действий:

<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts  -->
<!-- This means that regular characters are default. Icons are a fallback  -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>

<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts  -->
<!-- This means that regular characters are default. Icons are a fallback  -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie &#9733;&#9733;&#9733;&#9733;&#9734;!!</p></div>

<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>

<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">&#9733;&#9733;&#9733;&#9733;&#9734;</span>!!</p>

<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">☆</span>
    !!
</p>

<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
    <span class="icon">&#9733;</span>
    <span class="icon">&#9733;</span>
    <span class="icon">&#9733;</span>
    <span class="icon">&#9733;</span>
    <span class="icon">&#9734;</span>
    !!
</p>

<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
    <span class="icon icon-star"></span>
    <span class="icon icon-star"></span>
    <span class="icon icon-star"></span>
    <span class="icon icon-star"></span>
    <span class="icon icon-star-unfilled"></span>
    !!
</p>

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

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

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

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

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

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

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

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

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