1. Produkty
  2.   Font
  3.   Node.js
  4.   OpenType.js
 
  

Darmowa biblioteka JavaScript do parsowania i zapisu czcionek

Biblioteka JavaScript Open Source, która umożliwia parsowanie, odczyt i zapis czcionek TrueType lub OpenType. Wspiera obsługę czcionek, metryki glifów i układ tekstu w aplikacjach JS.

W dziedzinie tworzenia oprogramowania internetowego i cyfrowej typografii obsługa plików czcionek oraz tworzenie płynnych doświadczeń renderowania tekstu może być trudnym zadaniem. Jednak praca z czcionkami OpenType może być wyzwaniem, szczególnie gdy chodzi o dostęp do ich zaawansowanych funkcji typograficznych. Właśnie tutaj wkracza OpenType.js – rewolucyjna biblioteka open-source, która ułatwia pracę z czcionkami OpenType w przeglądarce. Jedną z kluczowych zalet OpenType.js jest jej zdolność do upraszczania procesu pracy z czcionkami OpenType. W przeciwieństwie do innych bibliotek, które wymagają dogłębnej wiedzy o technologii czcionek, OpenType.js oferuje prosty interfejs API, który ułatwia rozpoczęcie.

OpenType.js to biblioteka JavaScript, która zapewnia prosty i intuicyjny interfejs API do korzystania z zaawansowanych funkcji typograficznych czcionek OpenType. Dzięki OpenType.js programiści mogą łatwo uzyskać dostęp do funkcji takich jak ligatury, alternatywne glify, zmienne czcionki i inne, co pozwala tworzyć złożone i wyrafinowane projekty typograficzne. Oprócz parsowania i manipulacji istniejącymi czcionkami, opentype.js obsługuje także tworzenie nowych plików czcionek od podstaw. Funkcja ta jest cenna dla programistów, którzy chcą generować niestandardowe czcionki programowo. Jako biblioteka JavaScript, opentype.js może być używana zarówno po stronie klienta, jak i po stronie serwera, co czyni ją elastycznym wyborem dla różnych projektów. Ogólnie jest to potężna i wszechstronna biblioteka, która zapewnia prosty i intuicyjny sposób pracy z czcionkami OpenType w przeglądarce.

Previous Next

Rozpoczęcie pracy z Opentype.js

Zalecany sposób instalacji OpenType.js to użycie NPM. Proszę użyć następującego polecenia, aby przeprowadzić płynną instalację.

Zainstaluj Opentype.js przy użyciu npm

 npm install opentype.js

Możesz również zainstalować go ręcznie; pobierz najnowsze pliki wydania bezpośrednio z GitHub repozytorium.

Parsowanie czcionek w aplikacjach Node.js

Jedną z kluczowych funkcji OpenType.js jest możliwość parsowania plików czcionek OpenType i TrueType przy użyciu zaledwie kilku linii kodu JavaScript. Umożliwia to programistom odczytanie i zrozumienie struktury czcionki, w tym jej glifów, informacji o kerningu oraz innych niezbędnych danych. W poniższym przykładzie czcionka Roboto Regular jest ładowana z pliku TTF. Biblioteka parsuje czcionkę, udostępniając jej dane do dalszej manipulacji.

Jak załadować i sparsować czcionkę z pliku TTF w 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);
    }
});

Dostęp i manipulacja glifami czcionki w Node.js

Biblioteka open source OpenType.js dla Node.js umożliwia programistom dostęp i manipulację pojedynczymi glifami w czcionce w aplikacjach Node.js. Glify są wizualnymi reprezentacjami znaków w czcionce. Dzięki tej funkcji możesz wyodrębniać ścieżki glifów, modyfikować je lub nawet tworzyć nowe glify. Poniżej znajduje się fragment kodu, który ładuje czcionkę, pobiera glif dla znaku "A" i następnie skaluje glif o 1,5‑krotność jego pierwotnego rozmiaru. Metoda toPathData() konwertuje ścieżkę glifu na dane ścieżki SVG, które można wykorzystać do renderowania lub dalszej manipulacji.

Jak załadować czcionkę i zmodyfikować glif w aplikacjach 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());
    }
});

Praca z tabelami czcionek za pomocą biblioteki Node.js

OpenType.js daje programistom dostęp do podstawowych tabel czcionek, które przechowują szczegółowe informacje o projekcie i metrykach czcionki. Może to być szczególnie przydatne przy zaawansowanych manipulacjach lub analizach czcionek. Fragment kodu w poniższym przykładzie pokazuje, jak uzyskać dostęp do konkretnych tabel czcionek, takich jak tabela head (zawierająca informacje nagłówka czcionki) oraz tabela hhea (zawierająca metryki nagłówka poziomego). Tabele te dostarczają niezbędnych szczegółów, które mogą być użyte do precyzyjnej kontroli renderowania i układu czcionki.

Jak uzyskać dostęp do określonych tabel czcionek i czcionki w nich przy użyciu biblioteki 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);
  }
});
 Polski