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 uitgestrekte koninkrijk van webdesign en -ontwikkeling speelt typografie een cruciale rol bij het vormgeven van de algehele gebruikerservaring. Echter, werken met typografie op het web brengt zijn eigen uitdagingen met zich mee. Gelukkig is opentype.js, een open-source JavaScript-bibliotheek, naar voren gekomen als een krachtig hulpmiddel dat softwareontwikkelaars in staat stelt typografie in webapplicaties te manipuleren en te benutten. De bibliotheek biedt een eenvoudige en intuïtieve API, waardoor hij toegankelijk is voor ontwikkelaars van alle vaardigheidsniveaus. Het geeft ontwikkelaars de flexibiliteit om typografie aan te passen en te customizen volgens hun specifieke ontwerpeisen.
Opentype.js werkt op een breed scala aan moderne webbrowsers, waardoor het een betrouwbare en consistente oplossing is voor het implementeren van typografische functies. Er zijn verschillende belangrijke functies onderdeel van de bibliotheek, zoals een robuust lettertype‑parsingmechanisme, interactie met individuele glyphs binnen een lettertype, ondersteuning voor complexe tekstlay-out, weergave van diverse lettertypen, cross‑browser compatibiliteit, het extraheren van gedetailleerde lettertype‑gegevens, geavanceerde tekstlay-outondersteuning, het animeren van individuele glyphs en nog veel meer. Het integreert naadloos met bestaande webtechnologieën en kan worden gebruikt met HTML5 canvas, SVG, of zelfs gecombineerd met CSS- en JavaScript‑frameworks.
Opentype.js is een open source JavaScript-bibliotheek die webontwikkelaars in staat stelt te werken met OpenType-lettertypen, een veelgebruikt lettertypeformaat. OpenType-lettertypen bieden geavanceerde typografische functies, zoals ligaturen, kerning en glyph-substituties, die de visuele aantrekkingskracht en leesbaarheid van tekst aanzienlijk verbeteren. Door gebruik te maken van opentype.js kunnen softwareontwikkelaars deze functies ontgrendelen en toegang krijgen tot de onderliggende gegevens van OpenType-lettertypen, waardoor ze dynamische en interactieve typografische ervaringen op het web kunnen creëren. Of het nu gaat om het fijn afstemmen van typografische details of het maken van ingewikkelde typografische animaties, is OpenType.js een onschatbare tool voor iedereen die gepassioneerd is over de kunst van typografie in het digitale domein.
Aan de slag met Opentype.js
De aanbevolen manier om Opentype.js te installeren is via npm. Gebruik alstublieft het volgende commando om de Maven-afhankelijkheid aan uw project toe te voegen.
Installeer Opentype.js via npm
npm install opentype.jsU kunt het ook handmatig installeren; download de nieuwste releasebestanden rechtstreeks van de GitHub-repository.
Lettertypegegevens benaderen via JavaScript API
Een van de belangrijkste kenmerken van OpenType.js is het vermogen om gedetailleerde lettertypegegevens te extraheren met slechts een paar regels JavaScript-code. De open‑source Opentype.js‑bibliotheek biedt volledige functionaliteit voor het laden en benaderen van lettertypegerelateerde gegevens binnen hun JavaScript‑applicaties. Ontwikkelaars kunnen verschillende attributen raadplegen, zoals de lettertype‑naam, ontwerperinformatie, glyph‑vormen, kerning‑paren en nog veel meer. Deze informatie maakt precieze controle over typografie mogelijk en faciliteert creatieve experimenten. Het volgende voorbeeld toont hoe je lettertypegerelateerde gegevens kunt laden en weergeven met JavaScript‑opdrachten.
Hoe lettertypegerelateerde gegevens weergeven in JavaScript-apps?
function displayFontData() {
document.getElementById("font-data").innerHTML = JSON.stringify(font.tables, null, 4);
var html, tablename, table, property, value;
for(tablename in font.tables) {
table = font.tables[tablename];
html = '';
for(property in table) {
value = table[property];
html += ''+property+' ';
html += value;
html += ' ';
}
document.getElementById(tablename+"-table").innerHTML = html;
}
}
function onFontLoaded(font) {
@@ -331,6 +384,13 @@ Gratis software
fontSizeSlider.addEventListener('input', fontSizeChanged, false);
fontSizeSlider.addEventListener('change', fontSizeChanged, false);
var tableHeaders = document.getElementById('font-data').getElementsByTagName('h3');
for(var i = tableHeaders.length; i--; ) {
tableHeaders[i].addEventListener('click', function(e) {
e.target.className = (e.target.className === 'collapsed') ? 'expanded' : 'collapsed';
}, false);
}
opentype.load(fontFileName, function (err, font) {
var amount, glyph, ctx, x, y, fontSize;
if (err) {
showErrorMessage(err.toString());
return;
}
onFontLoaded(font);
});
Lettertypen openen en parseren in JavaScript-apps
De open‑source Opentype.js‑bibliotheek stelt software‑ontwikkelaars in staat om verschillende soorten lettertypen te laden en te converteren binnen hun eigen JavaScript‑applicaties. De bibliotheek biedt een robuust lettertype‑parsingmechanisme, waardoor ontwikkelaars OpenType‑ (WOFF, OTF, TTF) lettertypebestanden in hun webapplicaties kunnen laden. Zodra het lettertype is geladen, kunnen ontwikkelaars diverse lettertype‑eigenschappen benaderen en manipuleren, zoals glyph‑vormen, metriek en metadata. Het volgende voorbeeld toont hoe je verschillende soorten lettertypen zoals WOFF, OTF, TTF‑lettertypen kunt laden in JavaScript‑apps.
Hoe een WOFF- of TTF-lettertype laden via JavaScript API?
// case 1: from an URL
const buffer = fetch('/fonts/my.woff').then(res => res.arrayBuffer());
// case 2: from filesystem (node)
const buffer = require('fs').promises.readFile('./my.woff');
// case 3: from an
const buffer = document.getElementById('myfile').files[0].arrayBuffer();
// if running in async context:
const font = opentype.parse(await buffer);
console.log(font);
// if not running in async context:
buffer.then(data => {
const font = opentype.parse(data);
console.log(font);
})
