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

Gratis JavaScript-bibliotek for parsing & rendering av fonter

Open source JavaScript-fontebehandlingsbibliotek som støtter parsing og rendering av TrueType så vel som OpenType-fonter direkte i nettleseren.

I web‑ og programvareutviklingens verden spiller typografi en avgjørende rolle i å forme den samlede brukeropplevelsen. For å manipulere og gjengi skrifttyper effektivt, stoler utviklere på robuste biblioteker som forenkler prosessen. Et slikt bibliotek er Typr.js, et kraftig JavaScript‑bibliotek spesielt designet for parsing og rendering av skrifttyper. Det er laget for å være lettvektig, noe som gjør rask integrering i webprosjekter mulig. Biblioteket støtter alle de viktigste nettleserne, inkludert Chrome, Firefox, Safari og Edge. Dette sikrer konsistent skrifttype‑rendering på tvers av ulike plattformer og enheter.

Typr.js er et kraftig åpen kildekode JavaScript-bibliotek som gir programvareutviklere en lettvektig og allsidig løsning for å arbeide med ulike typer skrifttypefiler. Det gjør det mulig å parse og gjengi TrueType- og OpenType-skrifter direkte i nettleseren, og eliminerer behovet for server‑side behandling. Dette gjør Typr.js til et uvurderlig verktøy for webdesignere og utviklere som ønsker å optimalisere typografi på sine nettsteder. Biblioteket støtter fullt ut implementering av tilgjengelighetsfunksjoner, som tekstskalering, justering av bokstavavstand og lasting av egendefinerte skrifttyper, og imøtekommer brukere med ulike behov og mye mer.

Typr.js er veldig enkelt å håndtere og kan brukes i en rekke webapplikasjoner, fra enkel tekstgjengivelse til mer komplekse typografirelaterte prosjekter. Det støtter forenklede funksjoner som lasting og håndtering av skrifttyper på websider, analyse og uttrekk av ulike måleverdier fra skrifttyper, enkel manipulering og styling av tekst på nettet, støtte for internasjonalisering og lokalisering, avansert typografi, og mye mer. Dens rike funksjonssett, lette natur og nettleserkompatibilitet gjør det til et uvurderlig verktøy for å forbedre typografi på nettet.

Previous Next

Kom i gang med Typr.js

Den anbefalte måten å installere Typr.js på er ved å bruke npm. Vennligst bruk følgende kommando for å legge til Maven-avhengigheten i prosjektet ditt.

Installer Typr.js via npm

 npm install @fredli74/typr --save-dev

Du kan også installere det manuelt; last ned de nyeste utgivelsesfilene direkte fra GitHub-repoet.

Lasting og håndtering av skrifttyper via JavaScript API

Den åpne kildekoden Typr.js har gitt full støtte for innlasting og håndtering av skrifttyper i JavaScript‑applikasjoner. Den forenkler prosessen med å laste inn og administrere skrifttyper på websider. Den støtter ulike skrifttypeformater, inkludert TrueType (TTF), OpenType (OTF) og Web Open Font Format (WOFF), slik at utviklere sømløst kan integrere tilpassede skrifttyper i prosjektene sine. Ved å tilby et praktisk grensesnitt for skrifttypehåndtering gjør Typr.js det mulig for utviklere å effektivt kontrollere innlasting av skrifttyper og prioritere skrifttype‑undersettelser for å optimalisere ytelsen.

Legg til SVG-tabellparser for SVG-fargefontparsing

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;

}

Bruk tekstformatering & styling via JavaScript API

Den åpne kildekode‑biblioteket Typr.js gjør det enkelt for programvareutviklere å bruke ulike typer tekstformatering i JavaScript‑applikasjoner. Med Typr.js kan utviklere enkelt manipulere og style tekst på websider. Det tilbyr et omfattende spekter av tekstlayout‑funksjoner, som linjebryting, tekstjustering og orddeling, som gir presis kontroll over hvordan teksten presenteres. I tillegg støtter biblioteket et bredt utvalg av tekststilingsalternativer, inkludert bokstavavstand, ordavstand og tekstdekorasjon, slik at utviklere kan lage visuelt tiltalende og lett lesbar tekst.

Bruk tekstformatering og styling i JavaScript‑apper

// 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 og ligaturer via JavaScript API

Typr.js gjør det mulig for programvareutviklere å utnytte avanserte typografiske funksjoner, som kerning og ligaturer, for å forbedre tekstens visuelle appell. Kerning justerer avstanden mellom spesifikke tegnpar for å forbedre den generelle lesbarheten, mens ligaturer erstatter tegnsekvenser med visuelt tiltalende alternativer. Ved å utnytte disse funksjonene kan utviklere oppnå en mer raffinert og harmonisk typografi på nettet.

 Norsk