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

Gratis JavaScript-bibliotek til parsing og rendering af skrifttyper

Open source JavaScript-skrifttypebehandlingsbibliotek, der understøtter parsing og rendering af TrueType‑ såvel som OpenType‑skrifttyper direkte i browseren.

I web- og softwareudviklingens verden spiller typografi en afgørende rolle i at forme den samlede brugeroplevelse. For at manipulere og gengive skrifttyper effektivt, stoler udviklere på robuste biblioteker, der forenkler processen. Et sådant bibliotek er Typr.js, et kraftfuldt JavaScript-bibliotek specifikt designet til skrifttype‑parsing og -rendering. Det er designet til at være letvægts, så det hurtigt kan integreres i webprojekter. Biblioteket understøtter alle større webbrowsere, herunder Chrome, Firefox, Safari og Edge. Dette sikrer ensartet skrifttype‑rendering på tværs af forskellige platforme og enheder.

Typr.js er et kraftfuldt open source JavaScript-bibliotek, der giver softwareudviklere en letvægts- og alsidig løsning til at arbejde med forskellige typer skrifttypefiler. Det muliggør parsing og rendering af TrueType- og OpenType-skrifttyper direkte i browseren, hvilket eliminerer behovet for server-side behandling. Dette gør Typr.js til et uvurderligt værktøj for webdesignere og udviklere, der ønsker at optimere typografi på deres hjemmesider. Biblioteket understøtter fuldt ud implementeringen af tilgængelighedsfunktioner, såsom tekstskalering, justering af bogstavafstand og indlæsning af brugerdefinerede skrifttyper, der imødekommer brugere med forskellige behov og meget mere.

Typr.js er meget nem at håndtere og kan bruges i en række webapplikationer, fra simpel tekstrepræsentation til mere komplekse typografirelaterede projekter. Det understøtter forenklede funktioner som indlæsning og håndtering af skrifttyper på websider, analyse og udtræk af forskellige målinger fra skrifttyper, ubesværet manipulation og styling af tekst online, understøttelse af internationalisering og lokalisering, avanceret typografi og meget mere. Dets rige funktionssæt, letvægtige karakter og tværbrowser-kompatibilitet gør det til et uvurderligt værktøj til at forbedre typografi på nettet.

Previous Next

Kom i gang med Typr.js

Den anbefalede måde at installere Typr.js på er ved at bruge npm. Brug venligst følgende kommando for at tilføje Maven-afhængigheden i dit projekt.

Installer Typr.js via npm

 npm install @fredli74/typr --save-dev

Du kan også installere det manuelt; download de seneste udgivelsesfiler direkte fra GitHub-repositoryet.

Fontindlæsning og -styring via JavaScript API

Den open source Typr.js har leveret fuld support til indlæsning og håndtering af skrifttyper i JavaScript-applikationer. Den forenkler processen med at indlæse og administrere skrifttyper på websider. Den understøtter forskellige skrifttypeformater, herunder TrueType (TTF), OpenType (OTF) og Web Open Font Format (WOFF), så udviklere problemfrit kan integrere brugerdefinerede skrifttyper i deres projekter. Ved at tilbyde en praktisk grænseflade til skrifttypehåndtering gør Typr.js det muligt for udviklere effektivt at styre indlæsning af skrifttyper og prioritere skrifttypeundersæt for at optimere ydeevnen.

Tilføj SVG-tabelparser til SVG-farvefont-parsing

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;

}

Anvend tekstformatering og styling via JavaScript API

Det open source Typr.js-bibliotek gør det nemt for softwareudviklere at anvende forskellige typer tekstformatering i JavaScript-applikationer. Med Typr.js kan udviklere ubesværet manipulere og style tekst på websider. Det tilbyder et omfattende udvalg af tekstlayoutfunktioner, såsom linjebrud, tekstjustering og orddeling, hvilket giver præcis kontrol over, hvordan teksten præsenteres. Derudover understøtter biblioteket et bredt udvalg af tekststilindstillinger, herunder tegnafstand, ordafstand og tekstdekoration, så udviklere kan skabe visuelt tiltalende og læsbar tekst.

Anvend tekstformatering og styling i JavaScript apps

// 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 giver softwareudviklere mulighed for at udnytte avancerede typografiske funktioner, såsom kerning og ligaturer, for at forbedre tekstens visuelle appel. Kerning justerer afstanden mellem specifikke tegnpar for at forbedre den samlede læsbarhed, mens ligaturer erstatter sekvenser af tegn med visuelt tiltalende alternativer. Ved at udnytte disse funktioner kan udviklere opnå en mere raffineret og harmonisk typografi på nettet.

 Dansk