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);
  }
});
 Български