1. Tuotteet
  2.   Font
  3.   Node.js
  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.

Ohjelmistojen web-kehityksen ja digitaalisen typografian alalla fonttitiedostojen käsittely ja saumattomien tekstin renderöintikokemusten luominen voi olla haastavaa. Kuitenkin OpenType-fonttien kanssa työskenteleminen voi olla haastavaa, erityisesti kun on kyse niiden edistyneiden typografisten ominaisuuksien käyttämisestä. Tässä OpenType.js astuu kuvaan – mullistava avoimen lähdekoodin kirjasto, joka tekee OpenType-fonttien kanssa työskentelystä helppoa selaimessa. Yksi OpenType.js:n keskeisistä eduista on sen kyky yksinkertaistaa OpenType-fonttien kanssa työskentelyn prosessia. Toisin kuin muut kirjastot, jotka vaativat laajaa fonttiteknologian tuntemusta, OpenType.js tarjoaa suoraviivaisen API:n, jonka avulla pääsee helposti alkuun.

OpenType.js on JavaScript-kirjasto, joka tarjoaa yksinkertaisen ja intuitiivisen API:n OpenType-fonttien edistyneiden typografisten ominaisuuksien käyttämiseen. OpenType.js:n avulla ohjelmistokehittäjät voivat helposti käyttää ominaisuuksia, kuten ligatuureja, vaihtoehtoisia glyfejä, muuttuvia fontteja ja niin edelleen, mikä mahdollistaa monimutkaisten ja hienostuneiden typografisten suunnitelmien luomisen. Olemassa olevien fonttien jäsentämisen ja muokkaamisen lisäksi opentype.js tukee myös uusien fonttitiedostojen luomista alusta alkaen. Tämä ominaisuus on arvokas kehittäjille, jotka haluavat luoda mukautettuja fontteja ohjelmallisesti. JavaScript-kirjastona opentype.js:ää voidaan käyttää sekä asiakas- että palvelinpuolen ympäristöissä, mikä tekee siitä joustavan valinnan erilaisiin projekteihin. Kaiken kaikkiaan se on tehokas ja monipuolinen kirjasto, joka tarjoaa yksinkertaisen ja intuitiivisen tavan työskennellä OpenType-fonttien kanssa selaimessa.

Previous Next

Opentype.js:n aloitus

Suositeltu tapa asentaa OpenType.js on käyttää NPM:ää. Ole hyvä ja käytä seuraavaa komentoa sujuvan asennuksen varmistamiseksi.

Asenna Opentype.js npm:n avulla

 npm install opentype.js

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

Fonttien jäsentäminen Node.js-sovelluksissa

Yksi OpenType.js:n keskeisistä ominaisuuksista on sen kyky jäsentää OpenType- ja TrueType-fonttitiedostoja vain muutamalla JavaScript-rivillä. Tämä mahdollistaa ohjelmistokehittäjien lukea ja ymmärtää fontin rakenteen, mukaan lukien sen glyyfit, kerning-tiedot ja muut olennaiset tiedot. Seuraavassa esimerkissä Roboto Regular -fontti ladataan TTF-tiedostosta. Kirjasto jäsentää fontin, jolloin sen tiedot ovat käytettävissä lisämanipulointiin.

Kuinka ladata ja jäsentää fontti TTF-tiedostosta Node.js:n sisällä??

const opentype = require('opentype.js');

// Load a font from a file
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        console.log('Font loaded successfully:', font);
        console.log('Number of glyphs:', font.numGlyphs);
    }
});

Fontin glyfien käyttö ja muokkaus Node.js:ssa

Avoimen lähdekoodin Node.js-kirjasto OpenType.js mahdollistaa ohjelmistokehittäjien pääsyn ja yksittäisten glyyfien muokkaamisen fontissa Node.js-sovelluksissa. Glyyfit ovat fontin merkkien visuaalisia esityksiä. Tämän ominaisuuden avulla voit poimia glyyfipolkuja, muokata niitä tai jopa luoda uusia glyyfejä. Tässä on koodinpätkä, joka lataa fontin, hakee merkin "A" glyyfin ja sitten skaalaa glyyfin 1,5-kertaiseksi alkuperäiseen kokoon verrattuna. toPathData()-metodi muuntaa glyyfin polun SVG-polkudataksi, jota voidaan käyttää renderöintiin tai lisämanipulointiin.

Kuinka ladata fontti ja muokata glyfiä Node.js-sovelluksissa?

const opentype = require('opentype.js');

// Load a font and modify a glyph
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        const glyph = font.charToGlyph('A');
        console.log('Original Glyph Path:', glyph.path.toPathData());

        // Modify the glyph path (e.g., scale it)
        glyph.path.scale(1.5);
        console.log('Scaled Glyph Path:', glyph.path.toPathData());
    }
});

Työskentely fonttitaulukoiden kanssa Node.js-kirjaston avulla

OpenType.js antaa kehittäjille pääsyn taustalla oleviin fonttitauluihin, jotka tallentavat yksityiskohtaista tietoa fontin suunnittelusta ja mittasuhteista. Tämä voi olla erityisen hyödyllistä edistyneissä fonttimanipulaatioissa tai analyyseissä. Seuraavassa esimerkissä oleva koodinpätkä näyttää, miten päästä käsiksi tiettyihin fonttitauluihin, kuten head-tauluun (joka sisältää fontin otsikkotiedot) ja hhea-tauluun (joka sisältää vaakasuorat otsikkomittasuhteet). Nämä taulut tarjoavat olennaisia tietoja, joita voidaan käyttää tarkkaan hallintaan fontin renderöinnissä ja asettelussa.

Kuinka käyttää tiettyjä fonttitauluja ja fonttia niiden sisällä Node.js-kirjaston avulla?

const opentype = require('opentype.js');

opentype.load('path/to/font.ttf', function(err, font) {
  if (err) {
    console.error('Font could not be loaded: ' + err);
  } else {
    // Access the 'head' table (font header)
    const headTable = font.tables.head;
    console.log('Units per Em: ' + headTable.unitsPerEm);

    // Access the 'hhea' table (horizontal header)
    const hheaTable = font.tables.hhea;
    console.log('Ascender: ' + hheaTable.ascender);
    console.log('Descender: ' + hheaTable.descender);
  }
});
 Suomen