Bezmaksas JavaScript bibliotēka fontu parsēšanai un rakstīšanai
Atvērtā koda JavaScript bibliotēka, kas ļauj parsēt, lasīt un rakstīt TrueType vai OpenType fontus. Tā atbalsta fontu apstrādi, glifu metriku un teksta izkārtojumu JS lietotnēs.
Lietojumprogrammu tīmekļa izstrādes un digitālās tipogrāfijas jomā fontu failu apstrāde un nevainojamu teksta renderēšanas pieredzes radīšana var būt sarežģīts uzdevums. Tomēr darbs ar OpenType fontiem var būt izaicinošs, īpaši, ja runa ir par to papildu tipogrāfisko iespēju piekļuvi. Šeit nāk palīgā OpenType.js – revolucionāra atvērtā koda bibliotēka, kas ļauj viegli strādāt ar OpenType fontiem pārlūkā. Viens no galvenajiem OpenType.js ieguvumiem ir spēja vienkāršot procesu, strādājot ar OpenType fontiem. Atšķirībā no citām bibliotēkām, kas prasa plašas zināšanas par fontu tehnoloģijām, OpenType.js nodrošina vienkāršu API, kas ļauj viegli sākt darbu.
OpenType.js ir JavaScript bibliotēka, kas nodrošina vienkāršu un intuitīvu API, lai piekļūtu OpenType fontu uzlabotajām tipogrāfijas funkcijām. Ar OpenType.js programmatūras izstrādātāji var viegli piekļūt tādām funkcijām kā ligatūras, alternatīvie glifi, mainīgi fonti un tā tālāk, ļaujot viņiem radīt sarežģītus un izsmalcinātus tipogrāfijas dizainus. Papildus esošo fontu parsēšanai un manipulēšanai, opentype.js arī atbalsta jaunu fontu failu izveidi no nulles. Šī funkcija ir vērtīga izstrādātājiem, kas vēlas programmatiski ģenerēt pielāgotus fontus. Kā JavaScript bibliotēka, opentype.js var tikt izmantota gan klienta, gan servera pusē, padarot to par elastīgu izvēli dažādiem projektiem. Kopumā tas ir spēcīgs un daudzpusīgs rīks, kas nodrošina vienkāršu un intuitīvu veidu, kā strādāt ar OpenType fontiem pārlūkā.
Sākšana ar Opentype.js
Ieteicamais veids, kā instalēt OpenType.js, ir izmantot NPM. Lūdzu, izmantojiet šādu komandu, lai veiktu gludu instalāciju.
Instalējiet Opentype.js, izmantojot npm
npm install opentype.jsJūs varat arī instalēt to manuāli; lejupielādējiet jaunākos izlaiduma failus tieši no GitHub krātuves.
Fontu parsēšana Node.js lietotnēs
Viena no galvenajām OpenType.js funkcijām ir spēja parsēt OpenType un TrueType fontu failus tikai ar pāris JavaScript koda rindām. Tas ļauj programmatūras izstrādātājiem lasīt un izprast fonta struktūru, ieskaitot tā glifi, kērningu un citus būtiskus datus. Tālāk sniegtajā piemērā tiek ielādēts Roboto Regular fonts no TTF faila. Bibliotēka parsē fontu, padarot tā datus pieejamus turpmākai manipulācijai.
Kā ielādēt un parsēt fontu no TTF faila Node.js vidē??
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);
}
});
Piekļūt un manipulēt ar fonta glifiem Node.js vidē
Atvērtā koda Node.js bibliotēka OpenType.js ļauj programmatūras izstrādātājiem piekļūt un manipulēt ar atsevišķiem glifiem fontā Node.js lietojumprogrammās. Glifi ir vizuālie rakstzīmju attēlojumi fontā. Izmantojot šo funkciju, varat izvilkt glifu ceļus, tos modificēt vai pat izveidot jaunus glifus. Šeit ir koda fragments, kas ielādē fontu, izgūst glifu rakstzīmei "A," un pēc tam mērogo glifu 1,5 reizes tā sākotnējā izmērā. Metode toPathData() pārvērš glifa ceļu SVG ceļa datā, ko var izmantot renderēšanai vai turpmākai manipulācijai.
Kā ielādēt fontu un modificēt glifu Node.js lietotnēs?
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());
}
});
Darbs ar fontu tabulām caur Node.js bibliotēku
OpenType.js nodrošina izstrādātājiem piekļuvi pamata fontu tabulām, kuras saglabā detalizētu informāciju par fonta dizainu un metriku. Tas var būt īpaši noderīgi sarežģītām fontu manipulācijām vai analīzēm. Zemāk esošajā piemēra koda fragmentā parādīts, kā piekļūt konkrētām fontu tabulām, piemēram, head tabulai (kas satur fonta galvenes informāciju) un hhea tabulai (kas satur horizontālo galvenes metriku). Šīs tabulas sniedz būtiskus datus, kas var tikt izmantoti precīzai fontu renderēšanas un izkārtojuma vadībai.
Kā piekļūt konkrētām fonta tabulām un fontam tajā, izmantojot Node.js bibliotēku?
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);
}
});