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

Zdarma JavaScript knihovna pro parsování a zápis fontů

Open Source JavaScript knihovna, která umožňuje parsovat, číst a zapisovat TrueType nebo OpenType fonty. Podporuje správu fontů, metriky glyfů a rozvržení textu v JS aplikacích.

V rozsáhlém království webdesignu a vývoje hraje typografie klíčovou roli při formování celkového uživatelského zážitku. Nicméně práce s typografií na webu přináší své vlastní výzvy. Naštěstí se opentype.js, open-source JavaScriptová knihovna, objevila jako výkonný nástroj, který umožňuje vývojářům softwaru manipulovat a využívat potenciál typografie ve webových aplikacích. Knihovna poskytuje jednoduché a intuitivní API, což ji činí přístupnou vývojářům všech úrovní dovedností. Umožňuje vývojářům flexibilitu přizpůsobit a upravit typografii tak, aby vyhovovala jejich konkrétním požadavkům na design.

Opentype.js funguje napříč širokou škálou moderních webových prohlížečů, což z něj činí spolehlivé a konzistentní řešení pro implementaci typografických funkcí. Knihovna obsahuje několik důležitých funkcí, jako je robustní mechanismus parsování fontů, interakce s jednotlivými glyfy ve fontu, podpora komplexního rozvržení textu, renderování různých fontů, kompatibilita napříč prohlížeči, extrakce podrobných dat o fontu, pokročilá podpora rozvržení textu, animace jednotlivých glyfů a mnoho dalšího. Bez problémů se integruje s existujícími webovými technologiemi a lze ji použít s HTML5 canvas, SVG nebo dokonce kombinovat s CSS a JavaScriptovými frameworky.

Opentype.js je open source knihovna JavaScriptu, která umožňuje webovým vývojářům pracovat s fonty OpenType, široce používaným formátem písma. Fonty OpenType nabízejí pokročilé typografické funkce, jako jsou ligatury, kerning a substituce glyfů, které výrazně zvyšují vizuální atraktivitu a čitelnost textu. Využitím opentype.js mohou vývojáři softwaru odemknout tyto funkce a získat přístup k podkladovým datům fontů OpenType, což jim umožňuje vytvářet dynamické a interaktivní typografické zážitky na webu. Ať už jde o doladění typografických detailů nebo tvorbu složitých typografických animací, OpenType.js je neocenitelným nástrojem pro každého, kdo je nadšený pro umění typografie v digitálním prostředí.

Previous Next

Začínáme s Opentype.js

Doporučený způsob instalace Opentype.js je pomocí npm. Použijte prosím následující příkaz k přidání Maven závislosti do vašeho projektu.

Nainstalujte Opentype.js pomocí npm

 npm install opentype.js

Můžete jej také nainstalovat ručně; stáhněte si nejnovější soubory vydání přímo z úložiště GitHub.

Přístup k datům fontů pomocí JavaScript API

Jednou z klíčových funkcí OpenType.js je její schopnost extrahovat podrobné údaje o fontu pomocí jen několika řádků JavaScript kódu. Open‑source knihovna Opentype.js poskytuje kompletní funkčnost pro načítání a přístup k datům souvisejícím s fonty v jejich JavaScript aplikacích. Vývojáři mohou získat různé atributy, jako je název fontu, informace o designérovi, tvary glyfů, páry kerningu a mnoho dalšího. Tyto informace umožňují přesnou kontrolu typografie a usnadňují kreativní experimentování. Následující příklad ukazuje, jak načíst a zobrazit data související s fonty pomocí JavaScript příkazů.

Jak zobrazit data související s fonty v JavaScriptových aplikacích?

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 @@ 
Volný 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);
});

Otevřít a parsovat fonty v JavaScriptových aplikacích

Open‑source knihovna Opentype.js umožňuje vývojářům softwaru načítat a konvertovat různé typy fontů ve vlastních JavaScript aplikacích. Knihovna poskytuje robustní mechanismus parsování fontů, který vývojářům umožňuje načíst soubory OpenType (WOFF, OTF, TTF) do jejich webových aplikací. Jakmile je font načten, mohou vývojáři přistupovat k různým vlastnostem fontu a manipulovat s nimi, jako jsou tvary glyfů, metriky a metadata. Následující příklad ukazuje, jak načíst různé typy fontů, jako jsou WOFF, OTF, TTF, v JavaScript aplikacích.

Jak načíst WOFF nebo TTF fonty pomocí 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);
})
 Čeština