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

Gratis JavaScript-bibliotek til parsing og skrivning af skrifttyper

Open Source JavaScript-bibliotek, der tillader at parse, læse og skrive TrueType- eller OpenType-skrifttyper. Det understøtter skrifthåndtering, glyph-målinger og tekstlayout i JS‑apps.

I det enorme rige af webdesign og -udvikling spiller typografi en afgørende rolle i at forme den samlede brugeroplevelse. Dog har arbejdet med typografi på nettet sine egne udfordringer. Heldigvis er opentype.js, et open‑source JavaScript‑bibliotek, fremkommet som et kraftfuldt værktøj, der giver softwareudviklere mulighed for at manipulere med og udnytte typografiens potentiale i webapplikationer. Biblioteket leverer et enkelt og intuitivt API, som gør det tilgængeligt for udviklere på alle færdighedsniveauer. Det giver udviklere fleksibiliteten til at tilpasse og justere typografi, så den passer til deres specifikke designkrav.

Opentype.js fungerer på tværs af et bredt udvalg af moderne webbrowsere, hvilket gør det til en pålidelig og konsistent løsning til implementering af typografiske funktioner. Der er flere vigtige funktioner som en del af biblioteket, såsom en robust skrifttolkningsmekanisme, interagere med individuelle glyphs inden for en skrifttype, understøttelse af kompleks tekstlayout, rendering af forskellige skrifttyper, tværbrowser-kompatibilitet, udtrække detaljerede skriftdatas, avanceret tekstlayout-understøttelse, animere individuelle glyphs og meget mere. Det integreres problemfrit med eksisterende webteknologier og kan bruges med HTML5 canvas, SVG eller endda kombineres med CSS- og JavaScript-rammer.

Opentype.js er et open source JavaScript-bibliotek, der gør det muligt for webudviklere at arbejde med OpenType-skrifttyper, et meget brugt skrifttypeformat. OpenType-skrifttyper tilbyder avancerede typografiske funktioner, såsom ligaturer, kerning og glyph-udskiftninger, som i høj grad forbedrer tekstens visuelle appel og læsbarhed. Ved at udnytte opentype.js kan softwareudviklere låse op for disse funktioner og få adgang til de underliggende data i OpenType-skrifttyper, hvilket gør dem i stand til at skabe dynamiske og interaktive typografiske oplevelser på nettet. Uanset om det er finjustering af typografiske detaljer eller oprettelse af indviklede typografiske animationer, er OpenType.js et uvurderligt værktøj for alle, der brænder for typografiens kunst i den digitale verden.

Previous Next

Kom i gang med Opentype.js

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

Installer Opentype.js via npm

 npm install opentype.js

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

Få adgang til skrifttype-data via JavaScript API

En af de vigtigste funktioner i OpenType.js er dens evne til at udtrække detaljerede skriftdatas med blot et par linjer JavaScript-kode. Det open source Opentype.js-bibliotek har leveret fuld funktionalitet til indlæsning og adgang til skriftrelaterede data i deres JavaScript-applikationer. Udviklere kan få adgang til forskellige attributter såsom skriftnavn, designerinformation, glyphformer, kernepar og meget mere. Disse oplysninger muliggør præcis kontrol over typografi og fremmer kreativ eksperimentering. Det følgende eksempel viser, hvordan man indlæser og viser skriftrelaterede data ved hjælp af JavaScript-kommandoer.

Hvordan viser man skrifttype‑relaterede data i JavaScript‑apps?

function displayFontData() {
    document.getElementById("font-data").innerHTML = JSON.stringify(font.tables, null, 4);
	var html, tablename, table, property, value;
	for(tablename in font.tables) {
		table = font.tables[tablename];
		html = '';
		for(property in table) {
			value = table[property];
			html += '
'+property+'
';
			html += value;
			html += '
';
		}
		document.getElementById(tablename+"-table").innerHTML = html;
	}
}

function onFontLoaded(font) {
@@ -331,6 +384,13 @@ 
Gratis software

fontSizeSlider.addEventListener('input', fontSizeChanged, false);
fontSizeSlider.addEventListener('change', fontSizeChanged, false);

var tableHeaders = document.getElementById('font-data').getElementsByTagName('h3');
for(var i = tableHeaders.length; i--; ) {
	tableHeaders[i].addEventListener('click', function(e) {
		e.target.className = (e.target.className === 'collapsed') ? 'expanded' : 'collapsed';
	}, false);
}

opentype.load(fontFileName, function (err, font) {
    var amount, glyph, ctx, x, y, fontSize;
    if (err) {
        showErrorMessage(err.toString());
        return;
    }
    onFontLoaded(font);
});

Åbn og parse skrifttyper i JavaScript‑apps

Det open source Opentype.js-bibliotek gør det muligt for softwareudviklere at indlæse og konvertere forskellige typer skrifttyper i deres egne JavaScript-applikationer. Biblioteket leverer en robust skrifttype‑parsningsmekanisme, der gør det muligt for udviklere at indlæse OpenType‑ (WOFF, OTF, TTF) skrifttypefiler i deres webapplikationer. Når skrifttypen er indlæst, kan udviklere få adgang til og manipulere forskellige skrifttypeegenskaber, såsom glyphformer, målinger og metadata. Det følgende eksempel viser, hvordan man indlæser forskellige typer skrifttyper som WOFF, OTF, TTF i JavaScript‑apps.

Hvordan indlæser man en WOFF‑ eller TTF‑skrift via JavaScript API?

// case 1: from an URL
const buffer = fetch('/fonts/my.woff').then(res => res.arrayBuffer());
// case 2: from filesystem (node)
const buffer = require('fs').promises.readFile('./my.woff');
// case 3: from an 
const buffer = document.getElementById('myfile').files[0].arrayBuffer();

// if running in async context:
const font = opentype.parse(await buffer);
console.log(font);

// if not running in async context:
buffer.then(data => {
    const font = opentype.parse(data);
    console.log(font);
})
 Dansk