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

Ilmainen JavaScript-kirjasto fonttien jäsentämiseen ja renderöintiin

Avoimen lähdekoodin JavaScript-fonttien käsittelykirjasto, joka tukee TrueType- ja OpenType-fonttien jäsentämistä ja renderöintiä suoraan selaimessa.

Verkko- ja ohjelmistokehityksen maailmassa typografia näyttelee keskeistä roolia käyttäjäkokemuksen muokkaamisessa. Fonttien tehokkaaseen manipulointiin ja renderöintiin kehittäjät luottavat vankkoihin kirjastoihin, jotka yksinkertaistavat prosessia. Yksi tällainen kirjasto on Typr.js, tehokas JavaScript-kirjasto, joka on suunniteltu erityisesti fonttien jäsentämiseen ja renderöintiin. Se on kevyt, mikä mahdollistaa nopean integroinnin web-projekteihin. Kirjasto tukee kaikkia suurimpia verkkoselaimia, kuten Chromea, Firefoxia, Safariä ja Edgeä. Tämä varmistaa yhdenmukaisen fonttien renderöinnin eri alustoilla ja laitteilla.

Typr.js on tehokas avoimen lähdekoodin JavaScript-kirjasto, joka tarjoaa ohjelmistokehittäjille kevyen ja monipuolisen ratkaisun erilaisten fonttitiedostojen kanssa työskentelemiseen. Se mahdollistaa TrueType- ja OpenType-fonttien jäsentämisen ja renderöinnin suoraan selaimessa, poistaen tarvetta palvelinpuolen käsittelyyn. Tämä tekee Typr.js:stä korvaamattoman työkalun verkkosuunnittelijoille ja -kehittäjille, jotka haluavat optimoida typografian verkkosivuillaan. Kirjasto tukee täysin saavutettavuusominaisuuksien, kuten tekstin skaalaamisen, kirjainten välistyksen säätämisen ja mukautetun fontin lataamisen, toteuttamista, palvellen erilaisia tarpeita omaavia käyttäjiä ja monia muita.

Typr.js on erittäin helppokäyttöinen ja sitä voidaan käyttää monenlaisissa web-sovelluksissa, yksinkertaisesta tekstin renderöinnistä monimutkaisempiin typografiaan liittyviin projekteihin. Se tukee ominaisuuksia, kuten fonttien lataamista ja hallintaa verkkosivuilla, fonttien erilaisten mittareiden analysointia ja poimintaa, tekstin vaivatonta muokkaamista ja tyylittelyä verkossa, kansainvälistymisen ja lokalisoinnin tukea, edistynyttä typografiaa ja paljon muuta. Sen laaja ominaisuusvalikoima, kevyt luonne ja selainten välinen yhteensopivuus tekevät siitä korvaamattoman työkalun typografian parantamiseen verkossa.

Previous Next

Aloittaminen Typr.js:n kanssa

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

Asenna Typr.js npm:n kautta

 npm install @fredli74/typr --save-dev

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

Fonttien lataus ja hallinta JavaScript-API:n kautta

Open source -ohjelmisto Typr.js on tarjonnut täyden tuen fonttien lataamiseen ja hallintaan JavaScript-sovelluksissa. Se yksinkertaistaa fonttien lataamisen ja hallinnan prosessia verkkosivuilla. Se tukee erilaisia fonttimuotoja, mukaan lukien TrueType (TTF), OpenType (OTF) ja Web Open Font Format (WOFF), mikä mahdollistaa kehittäjien saumattoman mukautettujen fonttien integroinnin projekteihinsa. Tarjoamalla kätevän fonttien hallintaliittymän, Typr.js mahdollistaa kehittäjien tehokkaan fonttien latauksen hallinnan ja fonttialajojen priorisoinnin suorituskyvyn optimoimiseksi.

Lisää SVG-taulukkojen jäsentäjä SVG-värifonttien jäsentämistä varten

Typr.SVG = {};
Typr.SVG.parse = function(data, offset, length)
{
  var bin = Typr._bin;
  var obj = { entries: []};

  var offset0 = offset;

  var tableVersion = bin.readUshort(data, offset);  offset += 2;
  var svgDocIndexOffset = bin.readUint(data, offset);  offset += 4;
  var reserved = bin.readUint(data, offset); offset += 4;

  offset = svgDocIndexOffset + offset0;

  var numEntries = bin.readUshort(data, offset);  offset += 2;

  for(var i=0; i < numEntries ; i++)
  {
    var startGlyphID = bin.readUshort(data, offset);  offset += 2;
    var endGlyphID = bin.readUshort(data, offset);  offset += 2;
    var svgDocOffset = bin.readUint(data, offset);  offset += 4;
    var svgDocLength = bin.readUint(data, offset); offset += 4;

    var svg = bin.readASCII(data, offset0 + svgDocOffset + svgDocIndexOffset, svgDocLength);

    for(var f=startGlyphID; f<=endGlyphID; f++){
      obj.entries[f] = svg;
    }
  }

  return obj;

}

Sovella tekstin muotoilua ja tyyliä JavaScript-API:n kautta

Open source -kirjasto Typr.js tekee ohjelmistokehittäjille helppoa soveltaa erilaisia tekstin muotoilutyyppejä JavaScript-sovelluksissa. Typr.js:n avulla kehittäjät voivat vaivattomasti manipuloida ja tyylittää tekstiä verkkosivuilla. Se tarjoaa laajan valikoiman tekstin asettelutoimintoja, kuten rivinvaihdot, tekstin tasauksen ja tavutuksen, mahdollistaen tarkan hallinnan siitä, miten teksti esitetään. Lisäksi kirjasto tukee monia tekstin tyylivaihtoehtoja, mukaan lukien kirjainten välistys, sanojen välistys ja tekstin koristelu, mikä mahdollistaa kehittäjien luoda visuaalisesti houkuttelevaa ja luettavaa tekstiä.

Sovella tekstin muotoilua ja tyyliä JavaScript-sovelluksissa

// Assume that Typr.js library is already loaded

// Define the target element where the text will be formatted and styled
const targetElement = document.getElementById('myTextElement');

// Load and parse the font file using Typr.js
Typr.loadFont('path/to/font.ttf', (font) => {
  // Font loading is complete
  
  // Apply the loaded font to the target element
  targetElement.style.fontFamily = font.name.fontFamily;

  // Set text content for the target element
  targetElement.textContent = 'Hello, Typr.js!';

  // Apply text styling
  targetElement.style.fontSize = '24px';
  targetElement.style.letterSpacing = '2px';
  targetElement.style.wordSpacing = '4px';
  targetElement.style.textDecoration = 'underline';

  // Additional text layout adjustments
  targetElement.style.textAlign = 'center';
  targetElement.style.lineHeight = '1.5';
  targetElement.style.textJustify = 'inter-word';
});

Kirjainvälin säätö ja ligatuurit JavaScript-API:n kautta

Typr.js antaa ohjelmistokehittäjille mahdollisuuden hyödyntää edistyneitä typografisia ominaisuuksia, kuten kirjainten välistystä (kerning) ja ligatuureja, parantaakseen tekstin visuaalista vetovoimaa. Kirjainten välistys säätää tiettyjen merkkiparien välistystä parantaakseen luettavuutta, kun taas ligatuurit korvaavat merkkijonot visuaalisesti miellyttävillä vaihtoehdoilla. Hyödyntämällä näitä ominaisuuksia kehittäjät voivat saavuttaa tarkempaa ja harmonisempaa typografiaa verkossa.

 Suomen