TTF против WOFF2: Сравнение форматов веб-шрифтов

Веб-топография является важным элементом формирования пользовательского опыта и идентичности бренда.
Если вы создаете проект Django или статический веб-сайт, вы столкнетесь с различными форматами шрифтов, такими как .ttf и .woff2.

В этой статье мы обсудим различия между .ttf и .woff2, почему веб-разработчики предпочитают .woff2,
и как преобразовать .ttf в .woff2 на Ubuntu.
Также мы предоставим Bash-скрипт, который автоматизирует процесс преобразования.

1. Что такое TTF?

TTF (TrueType Font) — это универсальный формат шрифта, совместно разработанный Apple и Microsoft.
Он поддерживает как печать, так и отображение на экране и широко используется на различных операционных системах.

• ✅ Преимущества:
• Широко поддерживается на всех операционных системах

• Подходит для рендеринга изображений или настольных приложений

• ❌ Недостатки (для веба):

• Большой размер файла
• Не оптимизирован для веба
• Медленная скорость загрузки

2. Что такое WOFF2?

WOFF2 (Web Open Font Format 2) — это последний формат шрифтов сжатия, разработанный специально для веба.

• ✅ Преимущества:
• Очень высокая степень сжатия (до 30% меньше, чем TTF)
• Быстрая загрузка, оптимизация сети

• Полная поддержка всех современных браузеров

• ❌ Недостатки:

• Неподходящ для настольных приложений или некоторых рендерингов изображений
• Необходимо отдельное преобразование из .ttf или .otf

3. Почему веб-разработчики должны использовать WOFF2?

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

4. Преобразование TTF → WOFF2 на Ubuntu

Установка необходимых пакетов

sudo apt update
sudo apt install woff2

После установки преобразование становится возможным с помощью команды woff2_compress.

Команда для ручного преобразования

woff2_compress Poppins-Regular.ttf

В той же директории будет создан файл Poppins-Regular.woff2.

5. Бонус: Автоматизированный Bash-скрипт для преобразования

Используя скрипт ниже, вы сможете преобразовать файлы .ttf за один раз. Те, кто знаком с bash-скриптами, могут его скопировать и использовать.

convert-ttf-to-woff2.sh

#!/bin/bash

# Директория, содержащая шрифты
FONT_DIR="./"
OUTPUT_DIR="$FONT_DIR/woff2"

# Проверка наличия команды woff2_compress
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ Не удалось найти команду 'woff2_compress'"
    echo "Установите с помощью следующей команды:"
    echo "    sudo apt install woff2"
    exit 1
fi

# Создание директории для результатов
mkdir -p "$OUTPUT_DIR"
echo "📁 Директория для результатов преобразования: $OUTPUT_DIR"

# Запуск преобразования
echo "🔄 Преобразование TTF → WOFF2..."

find "$FONT_DIR" -maxdepth 1 -type f -name "*.ttf" | while read -r ttf_file; do
    filename=$(basename "$ttf_file")
    base="${filename%.ttf}"
    output_file="$OUTPUT_DIR/$base.woff2"

    if [[ -f "$output_file" ]]; then
        echo "⚠️  Уже существует: $output_file (пропускаем)"
        continue
    fi

    woff2_compress "$ttf_file"
    mv "${ttf_file}.woff2" "$output_file"
    echo "✅ Преобразование завершено: $output_file"
done

echo "🎉 Все преобразования завершены!"

✅ Резюме

---

---

• .woff2 — это последний формат, разработанный специально для веба, который превосходит по производительности и объему.
• .ttf неэффективен для веба, но полезен для других целей, таких как рендеринг изображений.
• Использование автоматизированного скрипта для преобразования поможет более эффективно управлять шрифтами в вашем проекте.

Надеюсь, это поможет улучшить производительность шрифтов в ваших веб-проектах!