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

Gratis JavaScript-bibliotek för parsning och skrivning av typsnitt

Öppen källkod JavaScript-bibliotek som möjliggör att parsning, läsa och skriva TrueType- eller OpenType-typsnitt. Det stödjer teckensnittshantering, glyf-mått och textlayout i JS-appar.

Inom mjukvaruutveckling för webb och digital typografi kan hantering av teckensnittsfiler och skapande av sömlösa textrenderingsupplevelser vara en skrämmande uppgift. Att arbeta med OpenType-teckensnitt kan dock vara en utmaning, särskilt när det gäller att komma åt deras avancerade typografiska funktioner. Det är här OpenType.js kommer in – ett revolutionerande open‑source‑bibliotek som gör det enkelt att arbeta med OpenType-teckensnitt i webbläsaren. En av de viktigaste fördelarna med OpenType.js är dess förmåga att förenkla processen att arbeta med OpenType-teckensnitt. Till skillnad från andra bibliotek som kräver omfattande kunskap om teckensnittsteknik, erbjuder OpenType.js ett enkelt API som gör det lätt att komma igång.

OpenType.js är ett JavaScript-bibliotek som tillhandahåller ett enkelt och intuitivt API för att komma åt de avancerade typografiska funktionerna i OpenType-teckensnitt. Med OpenType.js kan mjukvaruutvecklare enkelt använda funktioner såsom ligaturer, alternativa glyfer, variabla teckensnitt och så vidare, vilket gör det möjligt att skapa komplexa och sofistikerade typografidesign. Förutom att analysera och manipulera befintliga teckensnitt stödjer opentype.js även att skapa nya teckensnittsfiler från grunden. Denna funktion är värdefull för utvecklare som vill generera anpassade teckensnitt programatiskt. Eftersom det är ett JavaScript-bibliotek kan opentype.js användas både på klient- och serversidan, vilket gör det till ett flexibelt val för olika projekt. Sammantaget är det ett kraftfullt och mångsidigt bibliotek som erbjuder ett enkelt och intuitivt sätt att arbeta med OpenType-teckensnitt i webbläsaren.

Previous Next

Komma igång med Opentype.js

Det rekommenderade sättet att installera OpenType.js är att använda NPM. Använd följande kommando för en smidig installation.

Installera Opentype.js med npm

 npm install opentype.js

Du kan också installera det manuellt; ladda ner de senaste release‑filerna direkt från GitHub-arkivet.

Typsnittsanalysering i Node.js-appar

Ett av de viktigaste funktionerna i OpenType.js är dess förmåga att parsra OpenType- och TrueType-typsnittsfiler med bara ett par rader JavaScript‑kod. Detta gör det möjligt för mjukvaruutvecklare att läsa och förstå strukturen i ett typsnitt, inklusive dess glyfer, kerninginformation och annan väsentlig data. I följande exempel laddas typsnittet Roboto Regular från en TTF‑fil. Biblioteket parsar typsnittet och gör dess data tillgänglig för vidare manipulation.

Hur laddar och analyserar man ett typsnitt från en TTF-fil i 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);
    }
});

Åtkomst till och manipulering av typsnittets glyf i Node.js

Det öppna källkods‑biblioteket OpenType.js för Node.js låter mjukvaruutvecklare att komma åt och manipulera enskilda glyfer i ett typsnitt inom Node.js‑applikationer. Glyfer är de visuella representationerna av tecken i ett typsnitt. Med den här funktionen kan du extrahera glyfvägar, modifiera dem eller till och med skapa nya glyfer. Här är ett kodexempel som laddar ett typsnitt, hämtar glyfen för tecknet "A" och sedan skalar glyfen med 1,5 gånger dess ursprungliga storlek. Metoden toPathData() konverterar glyfens bana till SVG‑vägdata, vilket kan användas för rendering eller vidare manipulation.

Hur laddar man ett typsnitt och modifierar glyf i Node.js-appar?

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());
    }
});

Arbeta med typsnittstabeller via Node.js-biblioteket

OpenType.js ger utvecklare åtkomst till de underliggande fonttabellerna, som lagrar detaljerad information om fontens design och mått. Detta kan vara särskilt användbart för avancerade fontmanipulationer eller analyser. Kodsnutten i följande exempel visar hur man får åtkomst till specifika fonttabeller, såsom head‑tabellen (som innehåller fontens huvudinformation) och hhea‑tabellen (som innehåller horisontella huvudmått). Dessa tabeller ger väsentliga detaljer som kan användas för exakt kontroll över fontrendering och layout.

Hur får man åtkomst till specifika teckensnittstabeller och teckensnittet i dem med Node.js-biblioteket?

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);
  }
});
 Svenska