1. Termékek
  2.   Font
  3.   JavaScript
  4.   Typr.js
 
  

Ingyenes JavaScript könyvtár a betűtípusok elemzéséhez és megjelenítéséhez

Nyílt forráskódú JavaScript betűtípus-feldolgozó könyvtár, amely támogatja a TrueType és az OpenType betűtípusok elemzését és megjelenítését közvetlenül a böngészőben.

Az web- és szoftverfejlesztés területén a tipográfia kulcsfontosságú szerepet játszik a felhasználói élmény alakításában. A betűtípusok hatékony manipulálásához és megjelenítéséhez a fejlesztők robusztus könyvtárakra támaszkodnak, amelyek egyszerűsítik a folyamatot. Ilyen könyvtár a Typr.js, egy erőteljes JavaScript könyvtár, amely kifejezetten betűtípus-elemzésre és -renderelésre lett tervezve. Könnyűsúlyú, így gyorsan integrálható webes projektekbe. A könyvtár támogatja a főbb webböngészőket, köztük a Chrome-ot, a Firefoxot, a Safarit és az Edge-et. Ez biztosítja a betűtípusok konzisztens megjelenítését különböző platformokon és eszközökön.

Typr.js egy erőteljes nyílt forráskódú JavaScript könyvtár, amely könnyű és sokoldalú megoldást nyújt a szoftverfejlesztőknek a különféle betűtípus-fájlokkal való munkához. Lehetővé teszi a TrueType és OpenType betűtípusok böngészőben történő elemzését és megjelenítését, ezzel megszüntetve a szerveroldali feldolgozás szükségességét. Ez teszi a Typr.js-t felbecsülhetetlenül hasznos eszközzé a webdizájnerek és fejlesztők számára, akik a weboldalaikon a tipográfia optimalizálására törekednek. A könyvtár teljes mértékben támogatja a hozzáférhetőségi funkciók megvalósítását, mint például a szövegméretezés, a betűköz beállítása és az egyedi betűtípus betöltése, kielégítve a különböző igényű felhasználókat és még sok mást.

A Typr.js nagyon könnyen kezelhető, és számos webalkalmazásban használható, az egyszerű szövegmegjelenítéstől a bonyolultabb tipográfiával kapcsolatos projektekig. Támogatja az egyszerűsítő funkciókat, mint a betűkészletek betöltése és kezelése a weboldalakon, a betűk különböző metrikáinak elemzése és kinyerése, a szöveg könnyed manipulálása és stílusozása online, a nemzetköziesítés és lokalizáció támogatása, a fejlett tipográfia, és még sok más. Gazdag funkciókészlete, könnyű súlya és böngészőközi kompatibilitása felbecsülhetetlen eszközzé teszi a webes tipográfia fejlesztéséhez.

Previous Next

Első lépések a Typr.js használatával

A Typr.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éhez.

Typr.js telepítése npm segítségével

 npm install @fredli74/typr --save-dev

Telepí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 betöltése és kezelése JavaScript API-n keresztül

A nyílt forráskódú Typr.js teljes támogatást nyújt a betűtípusok betöltéséhez és kezeléséhez JavaScript alkalmazásokon belül. Egyszerűsíti a betűtípusok betöltésének és kezelésének folyamatát a weboldalakon. Támogatja a különféle betűtípus-formátumokat, beleértve a TrueType (TTF), OpenType (OTF) és a Web Open Font Format (WOFF) formátumokat, lehetővé téve a fejlesztők számára, hogy zökkenőmentesen integrálják az egyedi betűtípusokat projektjeikbe. Egy kényelmes betűtípus-kezelő felület biztosításával a Typr.js lehetővé teszi a fejlesztőknek, hogy hatékonyan irányítsák a betűtípusok betöltését, és a teljesítmény optimalizálása érdekében priorizálják a betűtípus-alhalmazokat.

SVG táblaparser hozzáadása SVG színbetűtípus elemzéshez

Typr.SVG = {};
Typr.SVG.parse = function(data, offset, length)
{
  var bin = Typr._bin;
  var obj = { entries: []};

  var offset0 = offset;

  var tableVersion = bin.readUshort(data, offset);  offset += 2;
  var svgDocIndexOffset = bin.readUint(data, offset);  offset += 4;
  var reserved = bin.readUint(data, offset); offset += 4;

  offset = svgDocIndexOffset + offset0;

  var numEntries = bin.readUshort(data, offset);  offset += 2;

  for(var i=0; i < numEntries ; i++)
  {
    var startGlyphID = bin.readUshort(data, offset);  offset += 2;
    var endGlyphID = bin.readUshort(data, offset);  offset += 2;
    var svgDocOffset = bin.readUint(data, offset);  offset += 4;
    var svgDocLength = bin.readUint(data, offset); offset += 4;

    var svg = bin.readASCII(data, offset0 + svgDocOffset + svgDocIndexOffset, svgDocLength);

    for(var f=startGlyphID; f<=endGlyphID; f++){
      obj.entries[f] = svg;
    }
  }

  return obj;

}

Szövegformázás és stílus alkalmazása JavaScript API-n keresztül

A nyílt forráskódú Typr.js könyvtár megkönnyíti a szoftverfejlesztők számára, hogy különféle szövegformázási típusokat alkalmazzanak JavaScript alkalmazásokban. A Typr.js segítségével a fejlesztők könnyedén manipulálhatják és stílusozhatják a szöveget a weboldalakon. Kiterjedt szövegelrendezési funkciókat kínál, mint például a sortörés, a szöveg igazítása és a szóelválasztás, lehetővé téve a szöveg megjelenítésének pontos szabályozását. Emellett a könyvtár számos szövegstílus opciót támogat, beleértve a betűköz, szóköz és szövegdekoráció beállításait, lehetővé téve a fejlesztőknek, hogy vizuálisan vonzó és könnyen olvasható szöveget hozzanak létre.

Szövegformázás és stílus alkalmazása JavaScript alkalmazásokban

// Assume that Typr.js library is already loaded

// Define the target element where the text will be formatted and styled
const targetElement = document.getElementById('myTextElement');

// Load and parse the font file using Typr.js
Typr.loadFont('path/to/font.ttf', (font) => {
  // Font loading is complete
  
  // Apply the loaded font to the target element
  targetElement.style.fontFamily = font.name.fontFamily;

  // Set text content for the target element
  targetElement.textContent = 'Hello, Typr.js!';

  // Apply text styling
  targetElement.style.fontSize = '24px';
  targetElement.style.letterSpacing = '2px';
  targetElement.style.wordSpacing = '4px';
  targetElement.style.textDecoration = 'underline';

  // Additional text layout adjustments
  targetElement.style.textAlign = 'center';
  targetElement.style.lineHeight = '1.5';
  targetElement.style.textJustify = 'inter-word';
});

Kerning és ligatúrák JavaScript API-n keresztül

A Typr.js lehetővé teszi a szoftverfejlesztők számára, hogy kihasználják a fejlett tipográfiai funkciókat, például a kerninget és a ligatúrákat, a szöveg vizuális vonzerejének növelése érdekében. A kerning a karakterek bizonyos párosainak távolságát állítja be a jobb olvashatóság érdekében, míg a ligatúrák a karakterek sorozatát vizuálisan vonzó alternatívákkal helyettesítik. Ezeknek a funkcióknak a kihasználásával a fejlesztők kifinomultabb és harmonikusabb tipográfiát érhetnek el a weben.

 Magyar