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

Nemokama JavaScript biblioteka šriftų analizei ir rašymui

Atviro kodo JavaScript biblioteka, leidžianti analizuoti, skaityti ir rašyti TrueType arba OpenType šriftus. Ji palaiko šriftų tvarkymą, glifo matmenis ir teksto išdėstymą JS programose.

Didžiulėje internetinio dizaino ir kūrimo karalystėje tipografija atlieka lemiamą vaidmenį formuojant bendrą vartotojo patirtį. Tačiau dirbant su tipografija internete kyla savų iššūkių. Laimei, opentype.js, atviro kodo JavaScript biblioteka, iškilo kaip galinga priemonė, suteikianti programinės įrangos kūrėjams galimybę manipuliuoti ir išnaudoti tipografijos potencialą interneto programose. Biblioteka siūlo paprastą ir intuityvią API, todėl ji prieinama kūrėjams visų įgūdžių lygių. Ji suteikia kūrėjams lankstumo pritaikyti ir adaptuoti tipografiją pagal jų specifinius dizaino reikalavimus.

Opentype.js veikia plačioje šiuolaikinių interneto naršyklių apimtyje, todėl tai patikimas ir nuoseklus sprendimas tipografinių funkcijų įgyvendinimui. Bibliotekoje yra keli svarbūs bruožai, tokie kaip patikima šriftų analizės mechanizmas, sąveika su atskirais glifais šrifte, sudėtingų teksto išdėstymo palaikymas, įvairių šriftų atvaizdavimas, naršyklių tarpusavio suderinamumas, išsamios šrifto duomenų išgavimas, pažangus teksto išdėstymo palaikymas, atskirų glifų animavimas ir daugelis kitų. Ji sklandžiai integruojasi su esamomis interneto technologijomis ir gali būti naudojama su HTML5 drobėmis, SVG arba net kartu su CSS ir JavaScript karkasais.

Opentype.js yra atviro kodo JavaScript biblioteka, leidžianti žiniatinklio kūrėjams dirbti su OpenType šriftais, plačiai naudojamu šriftų formatu. OpenType šriftai siūlo pažangias tipografines funkcijas, tokias kaip ligatūros, kerningas ir glifų pakaitalai, kurios žymiai pagerina teksto vizualinį patrauklumą ir skaitomumą. Pasinaudodami opentype.js, programinės įrangos kūrėjai gali atrakinti šias funkcijas ir prieiti prie OpenType šriftų pagrindinių duomenų, leidžiantys kurti dinamiškas ir interaktyvias tipografines patirtis internete. Nesvarbu, ar tai būtų smulkių tipografinių detalių derinimas, ar sudėtingų tipografinių animacijų kūrimas, OpenType.js yra neįkainojama priemonė visiems, kurie aistringai domisi tipografijos menu skaitmeninėje erdvėje.

Previous Next

Pradžia su Opentype.js

Rekomenduojamas būdas įdiegti Opentype.js yra naudojant npm. Prašome naudoti šią komandą, kad pridėtumėte maven priklausomybę į savo projektą.

Įdiekite Opentype.js per npm

 npm install opentype.js

Taip pat galite įdiegti jį rankiniu būdu; atsisiųskite naujausius leidimo failus tiesiai iš GitHub saugyklos.

Šriftų duomenų prieiga per JavaScript API

Viena iš pagrindinių OpenType.js savybių yra gebėjimas išgauti išsamų šriftų duomenų su tik keliais JavaScript kodo eilutėmis. Atviro kodo Opentype.js biblioteka suteikė pilną funkcionalumą šriftų susijusių duomenų įkėlimui ir prieigai jų JavaScript programose. Kūrėjai gali pasiekti įvairius atributus, tokius kaip šrifto pavadinimas, dizainerio informacija, glifų formos, kerning poros ir daug daugiau. Ši informacija leidžia tiksliai valdyti tipografiją ir palengvina kūrybinį eksperimentavimą. Žemiau pateiktas pavyzdys rodo, kaip įkelti ir rodyti šriftų susijusius duomenis naudojant JavaScript komandas.

Kaip rodyti su šriftais susijusius duomenis JavaScript programose?

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 @@ 
Laisva programinė įranga

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

Atidarykite ir analizuokite šriftus JavaScript programose

Atviro kodo Opentype.js biblioteka leidžia programinės įrangos kūrėjams įkelti ir konvertuoti įvairius šriftų tipus savo JavaScript programose. Biblioteka suteikia patikimą šriftų analizės mechanizmą, leidžiantį kūrėjams įkelti OpenType (WOFF, OTF, TTF) šriftų failus į savo internetines programas. Kai šriftas įkeliamas, kūrėjai gali pasiekti ir manipuliuoti įvairiomis šrifto savybėmis, tokiomis kaip glifų formos, metrikos ir metaduomenys. Žemiau pateiktas pavyzdys rodo, kaip įkelti įvairius šriftų tipus, pvz., WOFF, OTF, TTF šriftus JavaScript programose.

Kaip įkelti WOFF arba TTF šriftus per 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);
})
 Lietuvių