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

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.

Lielajā tīmekļa dizaina un izstrādes valstībā tipogrāfija spēlē izšķirošu lomu, veidojot kopējo lietotāja pieredzi. Tomēr darbs ar tipogrāfiju tīmeklī ir saistīts ar savām grūtībām. Par laimi, opentype.js, atvērtā koda JavaScript bibliotēka, ir parādījusies kā spēcīgs rīks, kas ļauj programmatūras izstrādātājiem manipulēt un izmantot tipogrāfijas potenciālu tīmekļa lietojumprogrammās. Bibliotēka nodrošina vienkāršu un intuitīvu API, padarot to pieejamu izstrādātājiem visos prasmju līmeņos. Tā sniedz izstrādātājiem elastību pielāgot un modificēt tipogrāfiju, lai atbilstu viņu konkrētajām dizaina prasībām.

Opentype.js darbojas plašā mūsdienīgu tīmekļa pārlūkprogrammu spektrā, padarot to par uzticamu un konsekventu risinājumu tipogrāfisko funkciju īstenošanai. Bibliotēkā ir vairākas svarīgas funkcijas, piemēram, robusta fontu parsēšanas mehānisms, mijiedarbība ar atsevišķiem glifiem fontā, sarežģīta teksta izkārtojuma atbalsts, dažādu fontu renderēšana, pārlūkprogrammu saderība, detalizētas fontu datu izguve, uzlabots teksta izkārtojuma atbalsts, atsevišķu glifu animēšana un daudz kas cits. Tā bezšuvām integrējas ar esošajām tīmekļa tehnoloģijām un var tikt izmantota ar HTML5 audeklu, SVG vai pat kombinēta ar CSS un JavaScript ietvariem.

Opentype.js ir atvērtā koda JavaScript bibliotēka, kas ļauj tīmekļa izstrādātājiem strādāt ar OpenType fontiem, plaši izmantotu fontu formātu. OpenType fonti piedāvā uzlabotas tipogrāfijas iespējas, piemēram, ligatūras, rakstzīmju pārvietojumu (kerning) un glifu aizvietošanu, kas ievērojami uzlabo teksta vizuālo pievilcību un lasāmību. Izmantojot opentype.js, programmatūras izstrādātāji var atslēgt šīs funkcijas un piekļūt OpenType fontu pamatdatiem, ļaujot radīt dinamiskas un interaktīvas tipogrāfiskās pieredzes tīmeklī. Neatkarīgi no tā, vai tas ir smalks tipogrāfijas detaļu pielāgojums vai sarežģītu tipogrāfisko animāciju veidošana, OpenType.js ir nenovērtējams rīks ikvienam, kurš ir kaislīgs par tipogrāfijas mākslu digitālajā pasaulē.

Previous Next

Sākšana ar Opentype.js

Ieteicamais veids, kā instalēt Opentype.js, ir izmantojot npm. Lūdzu, izmantojiet šādu komandu, lai pievienotu Maven atkarību savam projektam.

Instalējiet Opentype.js, izmantojot npm

 npm install opentype.js

Jūs varat arī instalēt to manuāli; lejupielādējiet jaunākos izlaiduma failus tieši no GitHub krātuves.

Piekļuve fontu datiem, izmantojot JavaScript API

Viena no galvenajām OpenType.js funkcijām ir spēja izvilkt detalizētus fontu datus tikai ar pāris JavaScript koda rindām. Atvērtā koda Opentype.js bibliotēka nodrošina pilnīgu funkcionalitāti fontu saistīto datu ielādēšanai un piekļuvei to JavaScript lietojumprogrammās. Izstrādātāji var piekļūt dažādiem atribūtiem, piemēram, fonta nosaukumam, dizainera informācijai, glifu formām, kērningu pāriem un daudz ko citu. Šī informācija ļauj precīzu tipogrāfijas kontroli un veicina radošu eksperimentēšanu. Zemāk esošais piemērs parāda, kā ielādēt un attēlot fontu saistītos datus, izmantojot JavaScript komandas.

Kā parādīt fontu saistītos datus JavaScript lietotnēs?

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 @@ 
Bezmaksas programmatūra

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

Atvērt un parsēt fontus JavaScript lietotnēs

Atvērtā koda Opentype.js bibliotēka ļauj programmatūras izstrādātājiem ielādēt un konvertēt dažādus fontu tipus savās JavaScript lietojumprogrammās. Bibliotēka nodrošina stabilu fontu parsēšanas mehānismu, ļaujot izstrādātājiem ielādēt OpenType (WOFF, OTF, TTF) fontu failus savās tīmekļa lietojumprogrammās. Kad fonts ir ielādēts, izstrādātāji var piekļūt un manipulēt ar dažādām fonta īpašībām, piemēram, glifu formām, metriku un metadatiem. Zemāk esošais piemērs parāda, kā ielādēt dažādus fontu tipus, piemēram, WOFF, OTF, TTF fontus JavaScript lietotnēs.

Kā ielādēt WOFF vai TTF fontus, izmantojot 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);
})
 Latviski