1. Товары
  2.   Font
  3.   Node.js
  4.   OpenType.js
 
  

Бесплатная JavaScript‑библиотека для разбора и записи шрифтов

Открытая JavaScript‑библиотека, позволяющая разбирать, читать и записывать шрифты TrueType или OpenType. Она поддерживает работу со шрифтами, метрики глифов и верстку текста в JS‑приложениях.

В области веб-разработки программного обеспечения и цифровой типографии работа с файловыми шрифтами и создание бесшовных текстовых рендерингов может быть сложной задачей. Однако работа с шрифтами OpenType может быть сложной, особенно когда речь идет о доступе к их продвинутым типографическим функциям. Здесь на помощь приходит OpenType.js — революционная библиотека с открытым исходным кодом, упрощающая работу с шрифтами OpenType в браузере. Одним из ключевых преимуществ OpenType.js является её способность упрощать процесс работы с шрифтами OpenType. В отличие от других библиотек, требующих обширных знаний о технологии шрифтов, OpenType.js предоставляет простой API, который облегчает начало работы.

OpenType.js — это JavaScript‑библиотека, предоставляющая простой и интуитивный API для доступа к расширенным типографическим возможностям OpenType‑шрифтов. С помощью OpenType.js разработчики программного обеспечения могут легко использовать такие функции, как лигатуры, альтернативные глифы, переменные шрифты и т.д., что позволяет создавать сложные и изысканные типографические дизайны. Помимо разбора и манипулирования существующими шрифтами, opentype.js также поддерживает создание новых файлов шрифтов с нуля. Эта возможность ценна для разработчиков, желающих программно генерировать пользовательские шрифты. Будучи JavaScript‑библиотекой, opentype.js может использоваться как в клиентской, так и в серверной среде, что делает её гибким выбором для различных проектов. В целом, это мощная и универсальная библиотека, предоставляющая простой и интуитивный способ работы с OpenType‑шрифтами в браузере.

Previous Next

Начало работы с Opentype.js

Рекомендуемый способ установки OpenType.js — использовать NPM. Пожалуйста, используйте следующую команду для беспроблемной установки.

Установите Opentype.js с помощью npm

 npm install opentype.js

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

Разбор шрифтов в приложениях Node.js

Одна из основных возможностей OpenType.js — способность разбирать файлы шрифтов OpenType и TrueType всего лишь несколькими строками кода JavaScript. Это позволяет разработчикам программного обеспечения читать и понимать структуру шрифта, включая его глифы, информацию о кернинге и другие важные данные. В следующем примере шрифт Roboto Regular загружается из файла TTF. Библиотека разбирает шрифт, делая его данные доступными для дальнейшей обработки.

Как загрузить и разобрать шрифт из TTF‑файла в Node.js??

const opentype = require('opentype.js');

// Load a font from a file
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        console.log('Font loaded successfully:', font);
        console.log('Number of glyphs:', font.numGlyphs);
    }
});

Доступ и манипуляция глифами шрифта в Node.js

Открытая библиотека Node.js OpenType.js позволяет разработчикам программного обеспечения получать доступ к отдельным глифам шрифта и изменять их в приложениях Node.js. Глифы — это визуальные представления символов в шрифте. С помощью этой функции вы можете извлекать пути глифов, изменять их или даже создавать новые глифы. Ниже приведён фрагмент кода, который загружает шрифт, получает глиф для символа "A," и затем масштабирует глиф в 1,5 раза от его исходного размера. Метод toPathData() преобразует путь глифа в данные пути SVG, которые можно использовать для рендеринга или дальнейшей обработки.

Как загрузить шрифт и изменить глиф в приложениях Node.js?

const opentype = require('opentype.js');

// Load a font and modify a glyph
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        const glyph = font.charToGlyph('A');
        console.log('Original Glyph Path:', glyph.path.toPathData());

        // Modify the glyph path (e.g., scale it)
        glyph.path.scale(1.5);
        console.log('Scaled Glyph Path:', glyph.path.toPathData());
    }
});

Работа с таблицами шрифтов через библиотеку Node.js

OpenType.js предоставляет разработчикам доступ к базовым таблицам шрифтов, которые хранят подробную информацию о дизайне и метриках шрифта. Это может быть особенно полезно для продвинутых манипуляций со шрифтами или их анализа. Фрагмент кода в следующем примере демонстрирует, как получить доступ к конкретным таблицам шрифтов, таким как таблица head (содержащая информацию заголовка шрифта) и таблица hhea (содержащая горизонтальные метрики заголовка). Эти таблицы предоставляют важные детали, которые можно использовать для точного контроля над рендерингом и расположением шрифта.

Как получить доступ к определённым таблицам шрифтов и шрифту внутри них с помощью библиотеки Node.js?

const opentype = require('opentype.js');

opentype.load('path/to/font.ttf', function(err, font) {
  if (err) {
    console.error('Font could not be loaded: ' + err);
  } else {
    // Access the 'head' table (font header)
    const headTable = font.tables.head;
    console.log('Units per Em: ' + headTable.unitsPerEm);

    // Access the 'hhea' table (horizontal header)
    const hheaTable = font.tables.hhea;
    console.log('Ascender: ' + hheaTable.ascender);
    console.log('Descender: ' + hheaTable.descender);
  }
});
 Русский