Ingyenes JavaScript könyvtár betűtípusok elemzéséhez és írásához
Nyílt forráskódú JavaScript könyvtár, amely lehetővé teszi a TrueType vagy OpenType betűtípusok elemzését, olvasását és írását. Támogatja a betűtípus-kezelést, a glif metrikákat és a szöveg elrendezést JS alkalmazásokban.
A webdesign és fejlesztés hatalmas birodalmában a tipográfia kulcsfontosságú szerepet játszik a felhasználói élmény alakításában. Azonban a tipográfiával való munka a weben saját kihívásokkal jár. Szerencsére az opentype.js, egy nyílt forráskódú JavaScript könyvtár, erőteljes eszközként jelent meg, amely lehetővé teszi a szoftverfejlesztők számára, hogy manipulálják és kiaknázzák a tipográfia potenciálját webalkalmazásokban. A könyvtár egyszerű és intuitív API-t biztosít, így minden szintű fejlesztő számára hozzáférhető. Rugalmasan teszi lehetővé a fejlesztőknek, hogy testre szabják és adaptálják a tipográfiát a konkrét tervezési igényeikhez.
Az Opentype.js a modern web böngészők széles skáláján működik, megbízható és következetes megoldást nyújtva a tipográfiai funkciók megvalósításához. A könyvtár több fontos funkcióval is rendelkezik, mint például a robusztus betűtípus-elemzési mechanizmus, az egyes glifekkel való interakció a betűtípuson belül, a komplex szövegelrendezés támogatása, különféle betűtípusok megjelenítése, a böngészők közötti kompatibilitás, részletes betűtípusadatok kinyerése, fejlett szövegelrendezési támogatás, egyes glifek animálása és még sok más. Zökkenőmentesen integrálódik a meglévő webtechnológiákkal, és használható HTML5 canvas-szal, SVG-vel, vagy akár CSS-sel és JavaScript keretrendszerekkel kombinálva.
Az Opentype.js egy nyílt forráskódú JavaScript könyvtár, amely lehetővé teszi a webfejlesztők számára, hogy OpenType betűtípusokkal dolgozzanak, egy széles körben használt betűtípus-formátummal. Az OpenType betűtípusok fejlett tipográfiai funkciókat kínálnak, mint például ligatúrák, kerning és glifcsere, amelyek jelentősen növelik a szöveg vizuális vonzerejét és olvashatóságát. Az opentype.js használatával a szoftverfejlesztők feloldhatják ezeket a funkciókat, és hozzáférhetnek az OpenType betűtípusok mögöttes adataihoz, lehetővé téve dinamikus és interaktív tipográfiai élmények létrehozását a weben. Legyen szó a tipográfiai részletek finomhangolásáról vagy összetett tipográfiai animációk készítéséről, az OpenType.js felbecsülhetetlen eszköz mindenki számára, aki szenvedélyesen szereti a digitális tipográfia művészetét.
Az Opentype.js használatának megkezdése
Az Opentype.js telepítésének ajánlott módja az npm használata. Kérjük, használja a következő parancsot a Maven függőség hozzáadásához a projektjében.
Az Opentype.js telepítése npm segítségével
npm install opentype.jsTelepítheti manuálisan is; töltse le a legújabb kiadási fájlokat közvetlenül a GitHub tárolóból.
Betűtípus-adatok elérése JavaScript API-n keresztül
Az OpenType.js egyik kulcsfontosságú jellemzője, hogy néhány JavaScript sorral képes részletes betűtípus-adatokat kinyerni. A nyílt forráskódú Opentype.js könyvtár teljes funkcionalitást biztosít a betűtípusokkal kapcsolatos adatok betöltéséhez és eléréséhez JavaScript alkalmazásaikban. A fejlesztők hozzáférhetnek különféle attribútumokhoz, mint a betűtípus neve, a tervező adatai, a glif alakjai, a kerning párok és még sok más. Ezek az információk pontos tipográfiai irányítást tesznek lehetővé, és elősegítik a kreatív kísérletezést. Az alábbi példa bemutatja, hogyan lehet betölteni és megjeleníteni a betűtípusokkal kapcsolatos adatokat JavaScript parancsokkal.
Hogyan jelenítsük meg a betűtípusokkal kapcsolatos adatokat JavaScript alkalmazásokban?
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 @@ Ingyenes szoftver
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);
});
Betűtípusok megnyitása és elemzése JavaScript alkalmazásokban
A nyílt forráskódú Opentype.js könyvtár lehetővé teszi a szoftverfejlesztők számára, hogy saját JavaScript alkalmazásaikban betöltsék és konvertálják a különféle betűtípusokat. A könyvtár robusztus betűtípus-elemzési mechanizmust biztosít, amely lehetővé teszi a fejlesztőknek, hogy OpenType (WOFF, OTF, TTF) betűtípus-fájlokat töltsenek be webalkalmazásaikba. Miután a betűtípus betöltődött, a fejlesztők hozzáférhetnek és manipulálhatják a különféle betűtípus-tulajdonságokat, például a glif alakokat, a metrikákat és a metaadatokat. Az alábbi példa bemutatja, hogyan kell betölteni a különféle típusú betűtípusokat, mint a WOFF, OTF, TTF betűtípusok JavaScript alkalmazásokba.
Hogyan töltsünk be WOFF vagy TTF betűtípusokat JavaScript API-n keresztül?
// 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);
})
