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

Gratis JavaScript-bibliotheek voor het parseren en schrijven van lettertypen

Open Source JavaScript-bibliotheek die het mogelijk maakt TrueType- of OpenType-lettertypen te parseren, lezen en schrijven. Het ondersteunt lettertypebeheer, glyph-metriek & tekstlay-out binnen JS-apps.

In het domein van software webontwikkeling en digitale typografie kan het omgaan met lettertypebestanden en het creëren van naadloze tekstweergave-ervaringen een ontmoedigende taak zijn. Het werken met OpenType-lettertypen kan echter een uitdagende taak zijn, vooral wanneer het gaat om het benaderen van hun geavanceerde typografische functies. Hier komt OpenType.js in beeld – een revolutionaire open-source bibliotheek die het gemakkelijk maakt om met OpenType-lettertypen in de browser te werken. Een van de belangrijkste voordelen van OpenType.js is het vermogen om het proces van werken met OpenType-lettertypen te vereenvoudigen. In tegenstelling tot andere bibliotheken die uitgebreide kennis van lettertype-technologie vereisen, biedt OpenType.js een eenvoudige API die het gemakkelijk maakt om te beginnen.

OpenType.js is een JavaScript-bibliotheek die een eenvoudige en intuïtieve API biedt voor het benaderen van de geavanceerde typografische functies van OpenType-lettertypen. Met OpenType.js kunnen softwareontwikkelaars gemakkelijk functies zoals ligaturen, alternatieve glyphs, variabele lettertypen, enzovoort benaderen, waardoor ze complexe en verfijnde typografische ontwerpen kunnen maken. Naast het parseren en manipuleren van bestaande lettertypen ondersteunt opentype.js ook het creëren van nieuwe lettertypebestanden vanaf nul. Deze functie is waardevol voor ontwikkelaars die op zoek zijn naar het programmatisch genereren van aangepaste lettertypen. Als JavaScript-bibliotheek kan opentype.js zowel in client-side als server-side omgevingen worden gebruikt, waardoor het een flexibele keuze is voor diverse projecten. Over het geheel genomen is het een krachtige en veelzijdige bibliotheek die een eenvoudige en intuïtieve manier biedt om met OpenType-lettertypen in de browser te werken.

Previous Next

Aan de slag met Opentype.js

De aanbevolen manier om OpenType.js te installeren is via NPM. Gebruik alstublieft het volgende commando voor een soepele installatie.

Installeer Opentype.js met npm

 npm install opentype.js

U kunt het ook handmatig installeren; download de nieuwste releasebestanden rechtstreeks van de GitHub-repository.

Lettertypeparsing binnen Node.js-applicaties

Een van de kernfuncties van OpenType.js is het vermogen om OpenType- en TrueType-lettertypebestanden te parseren met slechts een paar regels JavaScript-code. Dit stelt softwareontwikkelaars in staat om de structuur van een lettertype te lezen en te begrijpen, inclusief de glyphs, kerninginformatie en andere essentiële gegevens. In het volgende voorbeeld wordt het Roboto Regular-lettertype geladen vanuit een TTF-bestand. De bibliotheek parseert het lettertype en maakt de gegevens beschikbaar voor verdere manipulatie.

Hoe een lettertype laden en parseren vanuit een TTF-bestand binnen 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);
    }
});

Toegang tot en manipulatie van lettertype-glyphs binnen Node.js

De open source Node.js-bibliotheek OpenType.js stelt softwareontwikkelaars in staat om individuele glyphs binnen een lettertype te benaderen en te manipuleren in Node.js-toepassingen. Glyphs zijn de visuele weergaven van tekens in een lettertype. Met deze functie kun je glyph-paden extraheren, aanpassen, of zelfs nieuwe glyphs creëren. Hier is een codefragment dat een lettertype laadt, de glyph voor het teken "A" ophaalt, en vervolgens de glyph schaalt tot 1,5 keer de oorspronkelijke grootte. De methode toPathData() zet het pad van de glyph om in SVG-padgegevens, die kunnen worden gebruikt voor weergave of verdere manipulatie.

Hoe een lettertype laden en glyph aanpassen binnen Node.js-applicaties?

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

Werken met lettertype-tabellen via Node.js-bibliotheek

OpenType.js geeft ontwikkelaars toegang tot de onderliggende fonttabellen, die gedetailleerde informatie over het ontwerp en de metriek van het lettertype opslaan. Dit kan bijzonder nuttig zijn voor geavanceerde fontmanipulaties of analyses. Het codefragment in het volgende voorbeeld laat zien hoe specifieke fonttabellen benaderd kunnen worden, zoals de head‑tabel (die de headerinformatie van het lettertype bevat) en de hhea‑tabel (die de horizontale headermetriek bevat). Deze tabellen bieden essentiële details die gebruikt kunnen worden voor precieze controle over het renderen en de lay‑out van lettertypen.

Hoe krijg je toegang tot specifieke lettertype-tabellen en het lettertype erin met behulp van de Node.js-bibliotheek?

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