1. Продукти
  2.   Font
  3.   Node.js
  4.   OpenType.js
 
  

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

Відкрита JavaScript бібліотека, яка дозволяє парсити, читати та записувати шрифти TrueType або OpenType. Вона підтримує обробку шрифтів, метрики гліфів та розмітку тексту в JavaScript-додатках.

У сфері розробки веб‑програмного забезпечення та цифрової типографії обробка файлів шрифтів і створення безшовних рендеринг‑досвідів тексту може бути складним завданням. Однак робота з шрифтами 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);
  }
});
 Українська