Введение

Шрифты играют важную роль в веб-дизайне, влияя как на эстетику, так и на удобство использования сайта. Как веб-разработчикам, нам необходимо обеспечить оптимизацию шрифтов для производительности и совместимости в разных браузерах. В этом блоге мы рассмотрим практический скрипт на Node.js, который конвертирует файлы TTF (TrueType Font) в форматы WOFF (Web Open Font Format) и WOFF2. Это поможет улучшить время загрузки вашего сайта и повысить удобство использования.

Начинаем!

Понимание форматов шрифтов

Что такое TTF?

TTF означает TrueType Font, стандарт, разработанный Apple и Microsoft в конце 1980-х годов. Шрифты TTF широко используются благодаря своему высокому качеству и масштабируемости.

Что такое WOFF и WOFF2?

WOFF (Web Open Font Format) и WOFF2 — это современные веб-форматы шрифтов, оптимизированные для использования в Интернете. Они предлагают лучшую компрессию и производительность по сравнению с TTF, что делает их идеальными для веб-разработки.

Настройка окружения

Прежде чем мы начнем с скрипта, убедитесь, что у вас установлен Node.js на вашем компьютере. Вы можете скачать его с nodejs.org . После установки создайте новую директорию проекта и инициализируйте ее с помощью:

npm init -y

Затем установите необходимые пакеты:

npm install ttf2woff ttf2woff2

Пошаговое руководство по конвертации шрифтов

Шаг 1: Проверка аргумента пути к директории

Сначала убедитесь, что скрипт получает путь к директории, содержащей шрифты, в качестве аргумента командной строки. Этот шаг проверяет, что путь к директории предоставлен.

const fs = require("fs");
const path = require("path");
const ttf2woff = require("ttf2woff");
const ttf2woff2 = require("ttf2woff2");

// Проверьте, предоставлен ли путь к директории
if (process.argv.length < 3) {
  console.error("Пожалуйста, укажите путь к директории, содержащей шрифты.");
  process.exit(1);
}

Шаг 2: Определение и проверка директории шрифтов

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

// Определите путь к файлам шрифтов
const FONT_DIR = path.resolve(process.argv[2]);

// Убедитесь, что предоставленный путь существует и является директорией
if (!fs.existsSync(FONT_DIR) || !fs.lstatSync(FONT_DIR).isDirectory()) {
  console.error("Предоставленный путь не существует или не является директорией.");
  process.exit(1);
}

Шаг 3: Фильтрация файлов TTF

Получите список файлов шрифтов в директории и отфильтруйте все файлы, кроме тех, которые имеют расширение .ttf.

// Получите список файлов шрифтов
const fontFiles = fs.readdirSync(FONT_DIR).filter(file => path.extname(file).toLowerCase() === '.ttf');

Шаг 4: Обработка каждого файла шрифта

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

for (const fontFile of fontFiles) {
  try {
    // Прочитайте файл TTF
    const ttfPath = path.join(FONT_DIR, fontFile);
    console.log(`Обработка файла: ${ttfPath}`);
    const ttf = fs.readFileSync(ttfPath);

    // Конвертируйте TTF в WOFF
    const woff = ttf2woff(ttf).buffer;
    const woffPath = path.join(FONT_DIR, fontFile.replace('.ttf', '.woff'));
    fs.writeFileSync(woffPath, Buffer.from(woff));
    console.log(`Конвертировано в WOFF: ${woffPath}`);

    // Конвертируйте TTF в WOFF2
    const woff2 = ttf2woff2(ttf);
    const woff2Path = path.join(FONT_DIR, fontFile.replace('.ttf', '.woff2'));
    fs.writeFileSync(woff2Path, Buffer.from(woff2));
    console.log(`Конвертировано в WOFF2: ${woff2Path}`);
  } catch (error) {
    console.error(`Не удалось обработать ${fontFile}:`, error);
  }
}

Шаг 5: Сообщение о завершении

Наконец, добавьте сообщение, чтобы указать, что процесс конвертации завершен.

console.log("Конвертация завершена.");

Полный скрипт

Вот полный скрипт, объединяющий все шаги:

const fs = require("fs");
const path = require("path");
const ttf2woff = require("ttf2woff");
const ttf2woff2 = require("ttf2woff2");

// Проверьте, предоставлен ли путь к директории
if (process.argv.length < 3) {
  console.error("Пожалуйста, укажите путь к директории, содержащей шрифты.");
  process.exit(1);
}

// Определите путь к файлам шрифтов
const FONT_DIR = path.resolve(process.argv[2]);

// Убедитесь, что предоставленный путь существует и является директорией
if (!fs.existsSync(FONT_DIR) || !fs.lstatSync(FONT_DIR).isDirectory()) {
  console.error("Предоставленный путь не существует или не является директорией.");
  process.exit(1);
}

// Получите список файлов шрифтов
const fontFiles = fs.readdirSync(FONT_DIR).filter(file => path.extname(file).toLowerCase() === '.ttf');

for (const fontFile of fontFiles) {
  try {
    // Прочитайте файл TTF
    const ttfPath = path.join(FONT_DIR, fontFile);
    console.log(`Обработка файла: ${ttfPath}`);
    const ttf = fs.readFileSync(ttfPath);

    // Конвертируйте TTF в WOFF
    const woff = ttf2woff(ttf).buffer;
    const woffPath = path.join(FONT_DIR, fontFile.replace('.ttf', '.woff'));
    fs.writeFileSync(woffPath, Buffer.from(woff));
    console.log(`Конвертировано в WOFF: ${woffPath}`);

    // Конвертируйте TTF в WOFF2
    const woff2 = ttf2woff2(ttf);
    const woff2Path = path.join(FONT_DIR, fontFile.replace('.ttf', '.woff2'));
    fs.writeFileSync(woff2Path, Buffer.from(woff2));
    console.log(`Конвертировано в WOFF2: ${woff2Path}`);
  } catch (error) {
    console.error(`Не удалось обработать ${fontFile}:`, error);
  }
}

console.log("Конвертация завершена.");

Запуск скрипта

Чтобы запустить скрипт, используйте следующую команду, заменив fonts/rubik на путь к вашей директории, содержащей файлы TTF:

node bin/convertFonts.js fonts/rubik

Итог

В этом блоге мы рассмотрели простой скрипт на Node.js, который конвертирует шрифты TTF в форматы WOFF и WOFF2. Вот краткий обзор того, что мы рассмотрели:

  • TTF, WOFF и WOFF2 : Понимание различных форматов шрифтов и их применение.
  • Настройка окружения : Подготовка среды Node.js и установка необходимых пакетов.
  • Пошаговое руководство : Подробные шаги по созданию и запуску скрипта конвертации.

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

Присоединяйтесь к обсуждению!

С какими трудностями вы сталкивались при оптимизации шрифтов в своих веб-проектах? Пробовали ли вы использовать другие инструменты или методы для конвертации форматов шрифтов? Поделитесь своим опытом и давайте обсудим это в наших группах: t.me/DoCodeChat или discord.gg/zjqNCTDm

Счастливого кодинга! 😊