1. Produse
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

Bibliotecă JavaScript gratuită pentru parsarea și scrierea fonturilor

Bibliotecă JavaScript Open Source care permite parsarea, citirea și scrierea fonturilor TrueType sau OpenType. Suportă gestionarea fonturilor, metricile glifului și aranjarea textului în aplicații JS.

În vastul regat al designului și dezvoltării web, tipografia joacă un rol esențial în modelarea experienței generale a utilizatorului. Totuși, lucrul cu tipografia pe web are propriile sale provocări. Din fericire, opentype.js, o bibliotecă JavaScript open-source, a apărut ca un instrument puternic care permite dezvoltatorilor de software să manipuleze și să valorifice potențialul tipografiei în aplicațiile web. Biblioteca oferă un API simplu și intuitiv, făcându-l accesibil dezvoltatorilor de toate nivelurile de experiență. Aceasta le oferă dezvoltatorilor flexibilitatea de a personaliza și adapta tipografia pentru a se potrivi cerințelor lor specifice de design.

Opentype.js funcționează pe o gamă largă de browsere web moderne, fiind o soluție fiabilă și consecventă pentru implementarea funcțiilor tipografice. Există mai multe caracteristici importante ale bibliotecii, cum ar fi mecanismul robust de parsare a fonturilor, interacțiunea cu glife individuale dintr-un font, suport pentru aranjamente complexe de text, redarea diverselor fonturi, compatibilitate cross-browser, extragerea datelor detaliate ale fontului, suport avansat pentru aranjament de text, animarea glifelor individuale și multe altele. Se integrează perfect cu tehnologiile web existente și poate fi utilizat cu canvas HTML5, SVG sau chiar combinat cu cadre CSS și JavaScript.

Opentype.js este o bibliotecă JavaScript open source care permite dezvoltatorilor web să lucreze cu fonturi OpenType, un format de fonturi utilizat pe scară largă. Fonturile OpenType oferă funcții tipografice avansate, cum ar fi ligaturi, kerning și substituții de glife, care îmbunătățesc semnificativ atractivitatea vizuală și lizibilitatea textului. Prin utilizarea opentype.js, dezvoltatorii pot debloca aceste funcții și accesa datele de bază ale fonturilor OpenType, permițându-le să creeze experiențe tipografice dinamice și interactive pe web. Fie că este vorba de ajustarea detaliilor tipografice sau de crearea de animații tipografice complexe, Opentype.js este un instrument indispensabil pentru oricine este pasionat de arta tipografiei în mediul digital.

Previous Next

Începerea cu Opentype.js

Metoda recomandată pentru instalarea Opentype.js este utilizarea npm. Vă rugăm să folosiți comanda următoare pentru a adăuga dependența Maven în proiectul dumneavoastră.

Instalați Opentype.js prin npm

 npm install opentype.js

De asemenea, îl puteți instala manual; descărcați cele mai recente fișiere de lansare direct de pe depozitul GitHub.

Accesarea datelor de font prin API JavaScript

Una dintre caracteristicile cheie ale OpenType.js este capacitatea sa de a extrage date detaliate despre fonturi cu doar câteva linii de cod JavaScript. Biblioteca open source Opentype.js a oferit funcționalitate completă pentru încărcarea și accesarea datelor legate de fonturi în aplicațiile lor JavaScript. Dezvoltatorii pot accesa diverse atribute, cum ar fi numele fontului, informațiile despre designer, formele glifulor, perechile de kerning și multe altele. Aceste informații permit un control precis asupra tipografiei și facilitează experimentarea creativă. Exemplul următor arată cum să încărcați și să afișați datele legate de fonturi utilizând comenzi JavaScript.

Cum să afișați datele legate de fonturi în aplicații JavaScript?

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 @@ 
Software Gratuit

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

Deschideți și analizați fonturi în aplicații JavaScript

Biblioteca open source Opentype.js permite dezvoltatorilor de software să încarce și să convertească diverse tipuri de fonturi în propriile aplicații JavaScript. Biblioteca oferă un mecanism robust de parsare a fonturilor, permițând dezvoltatorilor să încarce fișiere de font OpenType (WOFF, OTF, TTF) în aplicațiile lor web. Odată ce fontul este încărcat, dezvoltatorii pot accesa și manipula diverse proprietăți ale fontului, cum ar fi formele glifulor, metricile și metadatele. Exemplul următor arată cum să încărcați diverse tipuri de fonturi, cum ar fi fonturile WOFF, OTF, TTF, în aplicații JavaScript.

Cum să încărcați fonturi WOFF sau TTF prin API JavaScript?

// 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);
})
 Română