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

Gratis JavaScript-bibliotek för parsning och rendering av typsnitt

Öppen källkod JavaScript-typsnittsbearbetningsbibliotek som stödjer parsning och rendering av TrueType- samt OpenType-typsnitt direkt i webbläsaren.

I webb- och mjukvaruutvecklingens värld spelar typografi en avgörande roll för att forma den övergripande användarupplevelsen. För att manipulera och rendera typsnitt effektivt förlitar sig utvecklare på robusta bibliotek som förenklar processen. Ett sådant bibliotek är Typr.js, ett kraftfullt JavaScript-bibliotek speciellt utformat för typparsning och rendering. Det är designat för att vara lättviktigt, vilket möjliggör snabb integration i webbprojekt. Biblioteket stöder alla större webbläsare, inklusive Chrome, Firefox, Safari och Edge. Detta säkerställer konsekvent typrendering över olika plattformar och enheter.

Typr.js är ett kraftfullt open source JavaScript-bibliotek som ger mjukvaruutvecklare en lättviktig och mångsidig lösning för att arbeta med olika typer av teckensnittsfiler. Det möjliggör parsning och rendering av TrueType- och OpenType-teckensnitt direkt i webbläsaren, vilket eliminerar behovet av server‑sidig bearbetning. Detta gör Typr.js till ett ovärderligt verktyg för webbdesigners och utvecklare som vill optimera typografin på sina webbplatser. Biblioteket stödjer fullt ut implementeringen av tillgänglighetsfunktioner, såsom textskalning, justering av teckenavstånd och anpassad teckensnittsladdning, för att tillgodose användare med olika behov och mycket mer.

Typr.js är mycket enkelt att hantera och kan användas i en mängd olika webbapplikationer, från enkel textrendering till mer komplexa typografirelaterade projekt. Det stöder förenklade funktioner som att ladda och hantera typsnitt på webbsidor, analysera och extrahera olika mått från typsnitt, enkelt manipulera och styla text online, stöd för internationalisering och lokalisering, avancerad typografi och mycket mer. Dess rika funktionsuppsättning, lätta natur och webbläsarkompatibilitet gör det till ett ovärderligt verktyg för att förbättra typografi på webben.

Previous Next

Komma igång med Typr.js

Det rekommenderade sättet att installera Typr.js är att använda npm. Använd följande kommando för att lägga till Maven‑beroendet i ditt projekt.

Installera Typr.js via npm

 npm install @fredli74/typr --save-dev

Du kan också installera det manuellt; ladda ner de senaste release‑filerna direkt från GitHub-arkivet.

Typladdning och hantering via JavaScript API

Den öppna källkoden Typr.js har gett fullständigt stöd för att ladda och hantera typsnitt i JavaScript‑applikationer. Det förenklar processen att ladda och hantera typsnitt på webbsidor. Det stödjer olika typsnittformat, inklusive TrueType (TTF), OpenType (OTF) och Web Open Font Format (WOFF), vilket gör det möjligt för utvecklare att sömlöst integrera anpassade typsnitt i sina projekt. Genom att erbjuda ett bekvämt gränssnitt för typsnittshantering möjliggör Typr.js för utvecklare att effektivt kontrollera typsnittsladdning och prioritera typsnittssubset för att optimera prestanda.

Lägg till SVG-tabellparser för SVG-färgfontparsing

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;

}

Tillämpa textformatering & styling via JavaScript API

Det öppna källkods‑biblioteket Typr.js gör det enkelt för mjukvaruutvecklare att tillämpa olika typer av textformatering i JavaScript‑applikationer. Med Typr.js kan utvecklare utan ansträngning manipulera och styla text på webbsidor. Det erbjuder ett omfattande utbud av textlayoutfunktioner, såsom radbrytning, textjustering och avstavning, vilket ger exakt kontroll över hur text presenteras. Dessutom stödjer biblioteket ett brett spektrum av textstilsalternativ, inklusive teckenavstånd, ordavstånd och textdekoration, vilket gör det möjligt för utvecklare att skapa visuellt tilltalande och läsbar text.

Tillämpa textformatering och styling i JavaScript-appar

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

Typr.js låter mjukvaruutvecklare utnyttja avancerade typografiska funktioner, såsom kerning och ligaturer, för att förbättra textens visuella attraktionskraft. Kerning justerar avståndet mellan specifika teckenpar för att förbättra den övergripande läsbarheten, medan ligaturer ersätter teckensekvenser med visuellt tilltalande alternativ. Genom att utnyttja dessa funktioner kan utvecklare uppnå en mer förfinad och harmonisk typografi på webben.

 Svenska