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

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

Öppen källkod JavaScript-bibliotek som möjliggör att parsning, läsa och skriva TrueType- eller OpenType-typsnitt. Det stödjer teckensnittshantering, glyf-mått och textlayout i JS-appar.

I det stora riket av webbdesign och utveckling spelar typografi en avgörande roll i att forma den övergripande användarupplevelsen. Dock har arbete med typografi på webben sina egna utmaningar. Lyckligtvis har opentype.js, ett open‑source JavaScript‑bibliotek, framträtt som ett kraftfullt verktyg som ger mjukvaruutvecklare möjlighet att manipulera och utnyttja typografins potential i webbapplikationer. Biblioteket erbjuder ett enkelt och intuitivt API, vilket gör det tillgängligt för utvecklare på alla kunskapsnivåer. Det ger utvecklare flexibiliteten att anpassa och skräddarsy typografi för att möta deras specifika designkrav.

Opentype.js fungerar i ett brett spektrum av moderna webbläsare, vilket gör det till en pålitlig och konsekvent lösning för att implementera typografiska funktioner. Det finns flera viktiga funktioner i biblioteket, såsom en robust teckensnittsparsningsmekanism, interagera med enskilda glyfer i ett teckensnitt, stöd för komplex textlayout, rendering av olika teckensnitt, tvärwebbläsarkompatibilitet, extrahera detaljerad teckensnittsinformation, avancerat stöd för textlayout, animera enskilda glyfer och mycket mer. Det integreras sömlöst med befintliga webteknologier och kan användas med HTML5‑canvas, SVG eller till och med kombineras med CSS‑ och JavaScript‑ramverk.

Opentype.js är ett open source JavaScript‑bibliotek som låter webbutvecklare arbeta med OpenType‑typsnitt, ett mycket använt typsnittformat. OpenType‑typsnitt erbjuder avancerade typografiska funktioner, såsom ligaturer, kerning och glyf‑substitutioner, vilket kraftigt förbättrar textens visuella attraktionskraft och läsbarhet. Genom att utnyttja opentype.js kan mjukvaruutvecklare låsa upp dessa funktioner och få åtkomst till den underliggande datan i OpenType‑typsnitt, vilket möjliggör att skapa dynamiska och interaktiva typografiska upplevelser på webben. Oavsett om det handlar om att finjustera typografiska detaljer eller skapa intrikata typografiska animationer, är OpenType.js ett ovärderligt verktyg för alla som brinner för typografins konst i den digitala världen.

Previous Next

Komma igång med Opentype.js

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

Installera Opentype.js via npm

 npm install opentype.js

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

Åtkomst till teckensnittsdata via JavaScript API

En av de viktigaste funktionerna i OpenType.js är dess förmåga att extrahera detaljerad teckensnittsdata med bara ett par rader JavaScript‑kod. Det öppna källkods‑biblioteket Opentype.js har tillhandahållit fullständig funktionalitet för att ladda och komma åt teckensnittsrelaterad data i deras JavaScript‑applikationer. Utvecklare kan komma åt olika attribut såsom teckensnittets namn, designerinformation, glyfformer, kerningpar och mycket mer. Denna information möjliggör exakt kontroll över typografi och underlättar kreativ experimentering. Följande exempel visar hur man laddar och visar teckensnittsrelaterad data med JavaScript‑kommandon.

Hur visar man teckensnittrelaterad data i JavaScript-appar?

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 programvara

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

Öppna och analysera teckensnitt i JavaScript-appar

Det öppna källkods‑biblioteket Opentype.js gör det möjligt för mjukvaruutvecklare att ladda och konvertera olika typer av teckensnitt i sina egna JavaScript‑applikationer. Biblioteket erbjuder en robust teckensnittsparsnings‑mekanism, vilket gör att utvecklare kan ladda OpenType‑ (WOFF, OTF, TTF) teckensnitts‑filer i sina webbapplikationer. När teckensnittet är laddat kan utvecklare komma åt och manipulera olika teckensnittsegenskaper, såsom glyfformer, mått och metadata. Följande exempel visar hur man laddar olika typer av teckensnitt som WOFF, OTF och TTF i JavaScript‑appar.

Hur laddar man ett WOFF- eller TTF-teckensnitt 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);
})
 Svenska