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

Gratis JavaScript-bibliotek for parsing og skriving av fonter

Åpen kildekode JavaScript-bibliotek som gjør det mulig å parse, lese og skrive TrueType- eller OpenType-fonter. Det støtter fontbehandling, glyph-målinger og tekstlayout i JS‑apper.

I det enorme riket av webdesign og utvikling spiller typografi en avgjørende rolle i å forme den samlede brukeropplevelsen. Imidlertid har arbeid med typografi på nettet sine egne utfordringer. Heldigvis har opentype.js, et åpen‑kilde‑JavaScript‑bibliotek, dukket opp som et kraftig verktøy som gir programvareutviklere muligheten til å manipulere og utnytte typografiens potensial i nettapplikasjoner. Biblioteket tilbyr et enkelt og intuitivt API, noe som gjør det tilgjengelig for utviklere på alle ferdighetsnivåer. Det gir utviklere fleksibiliteten til å tilpasse og justere typografi slik at den passer til deres spesifikke designkrav.

Opentype.js fungerer på tvers av et bredt spekter av moderne nettlesere, og gjør det til en pålitelig og konsistent løsning for implementering av typografiske funksjoner. Det finnes flere viktige funksjoner som er en del av biblioteket, som robust font‑parsing‑mekanisme, interagere med individuelle glyphs i en font, støtte for kompleks tekstlayout, rendering av ulike fonter, tverr‑nettleser‑kompatibilitet, hente detaljert fontdata, avansert tekstlayoutstøtte, animere individuelle glyphs og mye mer. Den integreres sømløst med eksisterende webteknologier og kan brukes med HTML5‑canvas, SVG, eller til og med kombineres med CSS‑ og JavaScript‑rammeverk.

Opentype.js er et åpen kildekode JavaScript-bibliotek som gjør det mulig for webutviklere å arbeide med OpenType-skrifter, et mye brukt skriftformat. OpenType-skrifter tilbyr avanserte typografiske funksjoner, som ligaturer, kerning og glyf-utskiftninger, som i stor grad forbedrer tekstens visuelle appell og lesbarhet. Ved å utnytte opentype.js kan programvareutviklere låse opp disse funksjonene og få tilgang til de underliggende dataene i OpenType-skrifter, noe som gjør dem i stand til å skape dynamiske og interaktive typografiske opplevelser på nettet. Enten det gjelder finjustering av typografiske detaljer eller å lage intrikate typografiske animasjoner, er OpenType.js et uvurderlig verktøy for alle som er lidenskapelig opptatt av typografiens kunst i den digitale verden.

Previous Next

Kom i gang med Opentype.js

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

Installer Opentype.js via npm

 npm install opentype.js

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

Tilgang til skriftdata via JavaScript API

En av hovedfunksjonene i OpenType.js er evnen til å hente detaljert skrifttypedata med bare noen få linjer JavaScript‑kode. Det åpne kildekodebiblioteket Opentype.js har levert full funksjonalitet for lasting og tilgang til skrifttype‑relatert data i JavaScript‑applikasjoner. Utviklere kan få tilgang til ulike attributter som skriftnavn, designerinformasjon, glyf‑former, kernepar og mye mer. Denne informasjonen gir presis kontroll over typografi og legger til rette for kreativ eksperimentering. Følgende eksempel viser hvordan man laster inn og viser skrifttype‑relatert data ved hjelp av JavaScript‑kommandoer.

Hvordan vise skriftrelatert data i JavaScript‑apper?

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 @@ 
Fri programvare

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);
});

Åpne og analyser skrifter i JavaScript‑apper

Det åpne kildekodebiblioteket Opentype.js gjør det mulig for programvareutviklere å laste inn og konvertere ulike typer skrifttyper i egne JavaScript‑applikasjoner. Biblioteket tilbyr en robust skrifttype‑parsing‑mekanisme, som lar utviklere laste OpenType‑ (WOFF, OTF, TTF) skrifttype‑filer inn i sine nettapplikasjoner. Når skrifttypen er lastet, kan utviklere få tilgang til og manipulere ulike skrifttype‑egenskaper, som glyf‑former, mål og metadata. Følgende eksempel viser hvordan man laster inn ulike typer skrifttyper som WOFF, OTF og TTF i JavaScript‑apper.

Hvordan laste inn 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);
})
 Norsk