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

Bezplatná JavaScript knihovna pro analýzu a vykreslování fontů

Open source JavaScript knihovna pro zpracování fontů, která podporuje analýzu a vykreslování fontů TrueType i OpenType přímo v prohlížeči.

V oblasti vývoje webu a softwaru hraje typografie klíčovou roli při formování celkového uživatelského zážitku. Pro efektivní manipulaci a vykreslování fontů se vývojáři spoléhají na robustní knihovny, které proces zjednodušují. Jednou z takových knihoven je Typr.js, výkonná JavaScriptová knihovna speciálně navržená pro parsování a vykreslování fontů. Je navržena tak, aby byla lehká, což umožňuje rychlou integraci do webových projektů. Knihovna podporuje všechny hlavní webové prohlížeče, včetně Chrome, Firefox, Safari a Edge. To zajišťuje konzistentní vykreslování fontů napříč různými platformami a zařízeními.

Typr.js je výkonná open source knihovna JavaScript, která poskytuje vývojářům softwaru lehké a univerzální řešení pro práci s různými typy souborů písem. Umožňuje parsování a vykreslování písem TrueType a OpenType přímo v prohlížeči, čímž eliminuje potřebu serverového zpracování. To činí z Typr.js neocenitelný nástroj pro webové designéry a vývojáře, kteří chtějí optimalizovat typografii na svých webových stránkách. Knihovna plně podporuje implementaci funkcí přístupnosti, jako je škálování textu, úpravy mezery mezi písmeny a načítání vlastních písem, aby vyhověla uživatelům s různými potřebami a mnohým dalším.

Typr.js je velmi snadno ovladatelný a lze jej použít v různých webových aplikacích, od jednoduchého vykreslování textu až po složitější projekty související s typografií. Podporuje zjednodušující funkce, jako je načítání a správa fontů na webových stránkách, analýza a extrakce různých metrik z fontů, snadná manipulace a stylování textu online, podpora internacionalizace a lokalizace, pokročilá typografie a mnoho dalšího. Jeho bohatá sada funkcí, lehká povaha a kompatibilita napříč prohlížeči z něj činí neocenitelný nástroj pro zlepšení typografie na webu.

Previous Next

Začínáme s Typr.js

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

Instalace Typr.js pomocí npm

 npm install @fredli74/typr --save-dev

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

Načítání a správa fontů pomocí JavaScript API

Open source knihovna Typr.js poskytla kompletní podporu pro načítání a správu fontů v JavaScriptových aplikacích. Zjednodušuje proces načítání a správy fontů na webových stránkách. Podporuje různé formáty fontů, včetně TrueType (TTF), OpenType (OTF) a Web Open Font Format (WOFF), což vývojářům umožňuje bezproblémově integrovat vlastní fonty do jejich projektů. Poskytnutím pohodlného rozhraní pro správu fontů umožňuje Typr.js vývojářům efektivně řídit načítání fontů a upřednostňovat podmnožiny fontů pro optimalizaci výkonu.

Přidat SVG tabulkový parser pro analýzu SVG barevných fontů

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;

}

Použít formátování a stylování textu pomocí JavaScript API

Open source knihovna Typr.js usnadňuje softwarovým vývojářům aplikovat různé typy formátování textu v JavaScriptových aplikacích. S Typr.js mohou vývojáři snadno manipulovat s textem a stylizovat jej na webových stránkách. Poskytuje rozsáhlou škálu funkcí pro rozvržení textu, jako je dělení řádků, zarovnání textu a dělení slov, což umožňuje přesnou kontrolu nad tím, jak je text prezentován. Kromě toho knihovna podporuje širokou škálu možností stylování textu, včetně mezery mezi písmeny, mezery mezi slovy a dekorace textu, což vývojářům umožňuje vytvářet vizuálně atraktivní a čitelný text.

Použít formátování a stylování textu v JavaScript aplikacích

// 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 a ligatury pomocí JavaScript API

Typr.js umožňuje vývojářům softwaru využívat pokročilé typografické funkce, jako jsou kerning a ligatury, k vylepšení vizuálního vzhledu textu. Kerning upravuje mezery mezi konkrétními dvojicemi znaků, aby se zlepšila celková čitelnost, zatímco ligatury nahrazují sekvence znaků vizuálně příjemnými alternativami. Využitím těchto funkcí mohou vývojáři dosáhnout jemnější a harmoničtější typografie na webu.

 Čeština