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

Ilmainen JavaScript-kirjasto fonttien jäsentämiseen ja kirjoittamiseen

Avoimen lähdekoodin JavaScript-kirjasto, joka mahdollistaa TrueType- tai OpenType-fonttien jäsentämisen, lukemisen ja kirjoittamisen. Se tukee fonttien käsittelyä, glyyffimittauksia ja tekstin asettelua JS-sovelluksissa.

Verkkosuunnittelun ja -kehityksen laajassa valtakunnassa typografia näyttelee keskeistä roolia kokonaisvaltaisen käyttäjäkokemuksen muokkaamisessa. Kuitenkin typografian käsittely verkossa tuo mukanaan omat haasteensa. Onneksi opentype.js, avoimen lähdekoodin JavaScript-kirjasto, on noussut voimakkaaksi työkaluksi, joka antaa ohjelmistokehittäjille mahdollisuuden manipuloida ja hyödyntää typografian potentiaalia web-sovelluksissa. Kirjasto tarjoaa yksinkertaisen ja intuitiivisen API:n, mikä tekee siitä helposti lähestyttävän kaikentasoisille kehittäjille. Se antaa kehittäjille joustavuutta räätälöidä ja mukauttaa typografiaa vastaamaan heidän erityisiä suunnittelutarpeitaan.

Opentype.js toimii laajalla valikoimalla nykyaikaisia verkkoselaimia, mikä tekee siitä luotettavan ja johdonmukaisen ratkaisun typografisten ominaisuuksien toteuttamiseen. Kirjastossa on useita tärkeitä ominaisuuksia, kuten vankka fonttien jäsentämismekanismi, vuorovaikutus yksittäisten glyfejen kanssa fontissa, monimutkainen tekstin asettelutuki, erilaisten fonttien renderöinti, selainten välinen yhteensopivuus, yksityiskohtaisen fonttitiedon poiminta, edistynyt tekstin asettelutuki, yksittäisten glyfien animointi ja paljon muuta. Se integroituu saumattomasti olemassa oleviin verkkoteknologioihin ja sitä voidaan käyttää HTML5‑canvasilla, SVG:llä tai jopa yhdistää CSS- ja JavaScript‑kehyksiin.

Opentype.js on avoimen lähdekoodin JavaScript‑kirjasto, jonka avulla web‑kehittäjät voivat työskennellä OpenType‑fonttien kanssa, jotka ovat laajasti käytetty fonttimuoto. OpenType‑fontit tarjoavat kehittyneitä typografisia ominaisuuksia, kuten ligatuureja, kirjasintyylin säätöä (kerning) ja glyyfin korvauksia, jotka merkittävästi parantavat tekstin visuaalista vetovoimaa ja luettavuutta. Hyödyntämällä opentype.js‑kirjastoa ohjelmistokehittäjät voivat avata nämä ominaisuudet ja päästä käsiksi OpenType‑fonttien taustalla olevaan dataan, mikä mahdollistaa dynaamisten ja interaktiivisten typografisten kokemusten luomisen verkossa. Olipa kyseessä typografisten yksityiskohtien hienosäätö tai monimutkaisten typografisten animaatioiden luominen, Opentype.js on korvaamaton työkalu kaikille, jotka ovat intohimoisia typografian taiteesta digitaalisessa maailmassa.

Previous Next

Opentype.js:n aloitus

Suositeltu tapa asentaa Opentype.js on npm:n käyttö. Käytä seuraavaa komentoa lisätäksesi Maven‑riippuvuuden projektiisi.

Asenna Opentype.js npm:n kautta

 npm install opentype.js

Voit myös asentaa sen manuaalisesti; lataa uusimmat julkaisutiedostot suoraan GitHub-varastosta.

Fonttitietojen käyttö JavaScript-API:n kautta

Yksi OpenType.js:n keskeisistä ominaisuuksista on sen kyky poimia yksityiskohtaisia fonttitietoja vain muutamalla JavaScript‑rivillä. Avoimen lähdekoodin Opentype.js‑kirjasto tarjoaa täydellisen toiminnallisuuden fontteihin liittyvien tietojen lataamiseen ja käyttämiseen JavaScript‑sovelluksissa. Kehittäjät voivat käyttää erilaisia attribuutteja, kuten fontin nimeä, suunnittelijan tietoja, glyph‑muotoja, kerning‑pareja ja paljon muuta. Nämä tiedot mahdollistavat tarkan typografian hallinnan ja edistävät luovaa kokeilua. Seuraava esimerkki näyttää, miten ladataan ja näytetään fontteihin liittyviä tietoja JavaScript‑komentojen avulla.

Kuinka näyttää fontteihin liittyvät tiedot JavaScript-sovelluksissa?

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 @@ 
Avoin ohjelmisto

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

Avaa ja jäsennä fontteja JavaScript-sovelluksissa

Avoimen lähdekoodin Opentype.js‑kirjasto mahdollistaa ohjelmistokehittäjille erilaisten fonttien lataamisen ja muuntamisen omiin JavaScript‑sovelluksiin. Kirjasto tarjoaa vankan fonttien jäsentämismekanismin, jonka avulla kehittäjät voivat ladata OpenType‑ (WOFF, OTF, TTF) fonttitiedostoja verkkosovelluksiinsa. Kun fontti on ladattu, kehittäjät voivat käyttää ja muokata erilaisia fonttien ominaisuuksia, kuten glyph‑muotoja, mittasuhteita ja metatietoja. Seuraava esimerkki näyttää, miten ladataan erilaisia fonttityyppejä, kuten WOFF-, OTF- ja TTF-fontteja JavaScript‑sovelluksiin.

Kuinka ladata WOFF- tai TTF-fontteja JavaScript-API:n kautta?

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