Вторник, 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

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

Изображение удалено.

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

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

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

Изображение удалено.

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

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

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

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

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

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

Изображение удалено.

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

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

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

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

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

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

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

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

simkai.sfd

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

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

simkai_web.sdf

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

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

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

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

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

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

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

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

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

simkai.sfd

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

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

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

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

Изображение удалено.

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

Нажмем Ок 

Изображение удалено.

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

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

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

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

Затем:

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

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

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

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

Изображение удалено.

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

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

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

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

simkai_num.sdf

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

Откроем:

simkai_web.sdf

Выберем:

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

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

simkai_ num.sdf

На запрос:

Изображение удалено.

Ответим Да

Изображение удалено.

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

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

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

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

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

simkai.sfd

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

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

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

simkai5.sdf

Откроем:

simkai_web.sdf

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

Изображение удалено.

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

simkai_web.sdf

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

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

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

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

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

Изображение удалено.

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

WOFF2

Изображение удалено.

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

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

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

Изображение удалено.

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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