Вторник, 14.09.2021 08:00

Создаем веб-шрифт из TTF-файла

Создаем веб-шрифт из TTF-файла

При создании веб-сайта перед дизайнером зачастую встает выбор: каким образом отображать на сайте символы и иконки? С одной стороны, можно подготовить картинки, но для адаптивного дизайна придется создавать множество изображений в разном разрешении. Можно использовать SVG-графику, но и тут есть свои ограничения.

А что если же необходимо отображать иероглифы? Основная проблема состоит в том, что, например, в китайском языке, иероглифов несколько тысяч и в результате размер файла со шрифтами может достигать 11 и больше мегабайт, что для нас неприемлемо.

Сегодня мы рассмотрим использование бесплатной программы FontForge для извлечения нужных символов - глифов из TTF-файла с последующим созданием WOFF2 файла.

Исходный шрифт

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

Скачиваем отсюда:

https://www.wfonts.com/font/kaiti

И распаковываем в нашу рабочую папку.

Из архива нам нужен файл simkai.ttf размером 11 мегабайт.

Установка FontForge

Скачать FontForge вы можете с официального сайта

https://fontforge.org/en-US/downloads/windows/

Просто нажмите на кнопку:

Confirm and Download

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

Открываем шрифт в FontForge

Запустим FontForge и откроем файл simkai.ttf

И сразу получим сообщение.

2021-09-14_10-26-02.png

Проигнорируем его и нажмем Ок

Загрузка шрифта занимает некоторое время.

После окончания загрузки откроется окно:

2021-09-14_10-29-51.png

Пролистав вниз вы найдете иероглифы.

Выбираем нужные иероглифы

Допустим нам нужно отображать на сайте некоторые иероглифы

На китайском это:

  • 〇
  • 一
  • 二
  • 三
  • 四
  • 六
  • 七
  • 八
  • 九
  • 十

Если использовать обычный шрифт, выглядит это не очень красиво.

А при использовании Simkai получим следующее:

2021-09-14_10-53-06.png

Результат намного красивее.

Главное препятствие – размер файла, и это 11 мегабайт!

Создаем пустой файл для шрифта

Для начала нам нужно создать пустой файл, в который мы скопируем нужные нам глифы.

Проблема состоит в том, что он должен содержать множество настроек, для корректного отображения глифов. Чтобы не углубляться в дебри создания шрифтов, в качестве шаблона, мы используем файл simkai.ttf

Выберем пункт меню:

Файл -> Сохранить как

И сохраним файл в формате проекта FontForge как:

simkai.sfd

Дождитесь окончания сохранения файла.

Сохраним его еще раз, но на этот раз под именем:

simkai_web.sdf

Выберем пункт меню:

Правка -> Выделить -> Выделить всё

Выберем пункт меню:

Правка -> Очистить

Сохраним файл.

Обратите внимание все глифы из файла исчезли и размер уменьшился до 5Кб, в то время, как размер файла simkai.sfd составляет 108Мб!

Таким образом мы подготовили пустой файл для будущего шрифта.

Извлекаем глифы из файла со шрифтом

Снова откроем файл

simkai.sfd

Выберем пункт меню:

Вид -> Переход

Теперь копируем первый символ 

〇

В буфер обмена и вставляем в окно:

2021-09-14_11-10-15.png

Не забываем ставить каждый раз галочку Merge into selection

Нажмем Ок 

2021-09-14_11-13-28.png

Обратите внимание теперь глиф выбран.

Повторим для оставшихся иероглифов. 

Как только все иероглифы выбраны, выберем пункт меню:

Правка -> Выделить -> Инвертировать выделение

Затем:

Правка -> Очистить

Будут удалены все глифы кроме выбранных нами.

Выберем меню:

Кодировка -> Компактная

2021-09-14_11-21-59.png

В файле нас остались только нужные нам глифы.

Выберем меню:

Файл -> Сохранить как

Сохраним файл под именем

simkai_num.sdf

Закроем все файлы

Откроем:

simkai_web.sdf

Выберем:

Элемент -> Объединить шрифты

Выберем файл:

simkai_ num.sdf

На запрос:

2021-09-14_11-23-32.png

Ответим Да

2021-09-14_11-35-24.png

Глифы были добавлены в список

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

На предыдущем шаге мы создали новый шрифт, но пропустили иероглиф

五

Давайте добавим его.

Откроем файл:

simkai.sfd

Найдем и выделим иероглиф:

五

Инвертируем выделение и очистим остальные символы.

Сохраним файл под именем:

simkai5.sdf

Откроем:

simkai_web.sdf

И как было описано выше объединим его с файлом simkai5.sdf

2021-09-14_12-30-21.png

Сохраним файл

simkai_web.sdf

Любые ошибки игнорируем!

Создаем веб-шрифт

Мы скопировали все нужные глифы в новый файл, пришла пора создать из него веб-шрифт.

Выберем пункт меню:

Файл -> Содать шрифты

2021-09-14_12-32-37.png

Нажмем на указанную кнопку и выберем

WOFF2

2021-09-14_12-32-48.png

Назовем файл:

simkai_web.woff2

Нажмем Создать

Будет создан файл размером 2Кб, в то время как размер исходного файла со шрифтом 11 Мб!

Тестирование созданного веб-шрифта

Давайте проверим созданный нами шрифт.

Для этого создадим HTML файл со следующим содержимым:

<html>

<head>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC:300&display=swap');

        @font-face {
            font-family: simkaiweb;
            src: url("simkai_web.woff2") format("opentype");
        }

        .regular {
            font-size: 60px;
        }
        .notoserif {
            font-size: 60px;
            font-family: 'Noto Serif TC';   
        }
        .simkaiweb {
            font-size: 60px;
            font-family: 'simkaiweb';   
        }
    </style>
</head>

<body>

    <table>
        <tr>
            <td class="regular" colspan="10">Обычный шрифт</td>
        </tr>
        <tr>
            <td class="regular">〇</td>
            <td class="regular">一</td>
            <td class="regular">二</td>
            <td class="regular">三</td>
            <td class="regular">四</td>
            <td class="regular">五</td>
            <td class="regular">六</td>
            <td class="regular">七</td>
            <td class="regular">八</td>
            <td class="regular">九</td>
            <td class="regular">十</td>
        </tr>
    </table>

    <p>

    <table>
        <tr>
            <td class="notoserif" colspan="10">Noto Serif TC</td>
        </tr>
        <tr>
            <td class="notoserif">〇</td>
            <td class="notoserif">一</td>
            <td class="notoserif">二</td>
            <td class="notoserif">三</td>
            <td class="notoserif">四</td>
            <td class="notoserif">五</td>
            <td class="notoserif">六</td>
            <td class="notoserif">七</td>
            <td class="notoserif">八</td>
            <td class="notoserif">九</td>
            <td class="notoserif">十</td>
        </tr>
    </table>


    <table>
        <tr>
            <td class="simkaiweb" colspan="10">Наш шрифт</td>
        </tr>
        <tr>
            <td class="simkaiweb">〇</td>
            <td class="simkaiweb">一</td>
            <td class="simkaiweb">二</td>
            <td class="simkaiweb">三</td>
            <td class="simkaiweb">四</td>
            <td class="simkaiweb">五</td>
            <td class="simkaiweb">六</td>
            <td class="simkaiweb">七</td>
            <td class="simkaiweb">八</td>
            <td class="simkaiweb">九</td>
            <td class="simkaiweb">十</td>
        </tr>
    </table>


</body>

</html>

  Загрузим файл на сервер и в эту же папку загрузим файл

simkai_web.woff2

Откроем страницу в браузере и получим следующее

2021-09-14_16-54-39.png

Заключение

Сегодня мы рассмотрели создание небольшого веб-шрифта.

В качестве «донора» использовали шрифт Simkai.

Установили программу FontForge.

В программе создали пустой файл для будущего шрифта.

Вырезали из основного шрифта нужные нам иероглифы и сохранили их в отдельный файл.

Объединили пустой файл с файлом, содержащим наши иероглифы.

Рассмотрели способ добавления дополнительных глифов в уже созданный шрифт.

Экспортировали результат в виде файла формата woff2.

Создали тестовую HTML страничку, для проверки нашего шрифта.

Категория Статьи

Добавить комментарий

О текстовых форматах

Простой текст

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Строки и абзацы переносятся автоматически.
  • Адреса веб-страниц и email-адреса преобразовываются в ссылки автоматически.
Просмотров: 125