1. Προϊόντα
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

Δωρεάν JavaScript Βιβλιοθήκη για Ανάλυση & Συγγραφή Γραμματοσειρών

Ανοιχτού Κώδικα JavaScript Βιβλιοθήκη που επιτρέπει την Ανάλυση, Ανάγνωση και Εγγραφή γραμματοσειρών TrueType ή OpenType. Υποστηρίζει Διαχείριση Γραμματοσειρών, Μετρικές Γλύφων & Διάταξη Κειμένου μέσα σε εφαρμογές JS.

Στο εκτεταμένο βασίλειο του web design και της ανάπτυξης, η τυπογραφία παίζει καθοριστικό ρόλο στη διαμόρφωση της συνολικής εμπειρίας του χρήστη. Ωστόσο, η εργασία με την τυπογραφία στο web έχει τις δικές της προκλήσεις. Ευτυχώς, το opentype.js, μια ανοιχτού κώδικα βιβλιοθήκη JavaScript, έχει εμφανιστεί ως ένα ισχυρό εργαλείο που δίνει τη δυνατότητα στους προγραμματιστές λογισμικού να χειρίζονται και να αξιοποιούν το δυναμικό της τυπογραφίας σε web εφαρμογές. Η βιβλιοθήκη παρέχει ένα απλό και διαισθητικό API, καθιστώντας το προσβάσιμο σε προγραμματιστές όλων των επιπέδων δεξιοτήτων. Επιτρέπει στους προγραμματιστές την ευελιξία να προσαρμόζουν και να τροποποιούν την τυπογραφία ώστε να ανταποκρίνεται στις συγκεκριμένες απαιτήσεις σχεδίασής τους.

Το Opentype.js λειτουργεί σε ένα ευρύ φάσμα σύγχρονων προγραμμάτων περιήγησης ιστού, καθιστώντας το αξιόπιστη και συνεπή λύση για την υλοποίηση τυπογραφικών χαρακτηριστικών. Υπάρχουν αρκετά σημαντικά χαρακτηριστικά της βιβλιοθήκης, όπως μηχανισμός ανθεκτικής ανάλυσης γραμματοσειρών, αλληλεπίδραση με μεμονωμένα γλύφους μέσα σε μια γραμματοσειρά, υποστήριξη σύνθετης διάταξης κειμένου, απόδοση διαφόρων γραμματοσειρών, συμβατότητα μεταξύ προγραμμάτων περιήγησης, εξαγωγή λεπτομερών δεδομένων γραμματοσειράς, προχωρημένη υποστήριξη διάταξης κειμένου, κίνηση μεμονωμένων γλύφων και πολλά άλλα. Ενσωματώνεται άψογα με τις υπάρχουσες τεχνολογίες ιστού και μπορεί να χρησιμοποιηθεί με καμβά HTML5, SVG, ή ακόμη και σε συνδυασμό με CSS και πλαίσια JavaScript.

Το Opentype.js είναι μια ανοιχτού κώδικα βιβλιοθήκη JavaScript που επιτρέπει στους προγραμματιστές web να εργάζονται με γραμματοσειρές OpenType, μια ευρέως χρησιμοποιούμενη μορφή γραμματοσειράς. Οι γραμματοσειρές OpenType προσφέρουν προηγμένες τυπογραφικές δυνατότητες, όπως λιγκατούρες, kerning και αντικαταστάσεις γλύφων, που βελτιώνουν σημαντικά την οπτική ελκυστικότητα και την αναγνωσιμότητα του κειμένου. Χρησιμοποιώντας το opentype.js, οι προγραμματιστές λογισμικού μπορούν να ξεκλειδώσουν αυτές τις δυνατότητες και να έχουν πρόσβαση στα υποκείμενα δεδομένα των γραμματοσειρών OpenType, επιτρέποντάς τους να δημιουργούν δυναμικές και διαδραστικές τυπογραφικές εμπειρίες στο web. Είτε πρόκειται για λεπτομερή ρύθμιση τυπογραφικών λεπτομερειών είτε για δημιουργία πολύπλοκων τυπογραφικών κινούμενων εικόνων, το OpenType.js είναι ένα ανεκτίμητο εργαλείο για όποιον είναι παθιασμένος με την τέχνη της τυπογραφίας στον ψηφιακό χώρο.

Previous Next

Ξεκινώντας με το Opentype.js

Ο συνιστώμενος τρόπος εγκατάστασης του Opentype.js είναι μέσω npm. Παρακαλώ χρησιμοποιήστε την παρακάτω εντολή για να προσθέσετε την εξάρτηση maven στο έργο σας.

Εγκατάσταση του Opentype.js μέσω npm

 npm install opentype.js

Μπορείτε επίσης να το εγκαταστήσετε χειροκίνητα· κατεβάστε τα πιο πρόσφατα αρχεία έκδοσης απευθείας από το αποθετήριο GitHub.

Πρόσβαση σε Δεδομένα Γραμματοσειράς μέσω του JavaScript API

Ένα από τα βασικά χαρακτηριστικά του OpenType.js είναι η ικανότητά του να εξάγει λεπτομερή δεδομένα γραμματοσειράς με μόνο μερικές γραμμές κώδικα JavaScript. Η ανοιχτού κώδικα βιβλιοθήκη Opentype.js παρέχει πλήρη λειτουργικότητα για τη φόρτωση και πρόσβαση σε δεδομένα σχετιζόμενα με τις γραμματοσειρές μέσα στις εφαρμογές JavaScript. Οι προγραμματιστές μπορούν να έχουν πρόσβαση σε διάφορα χαρακτηριστικά όπως το όνομα γραμματοσειράς, πληροφορίες σχεδιαστή, σχήματα γλύφων, ζεύγη κεραίνων και πολλά άλλα. Αυτές οι πληροφορίες επιτρέπουν ακριβή έλεγχο της τυπογραφίας και διευκολύνουν το δημιουργικό πειραματισμό. Το παρακάτω παράδειγμα δείχνει πώς να φορτώσετε και να εμφανίσετε δεδομένα σχετιζόμενα με τις γραμματοσειρές χρησιμοποιώντας εντολές JavaScript.

Πώς να Εμφανίσετε Δεδομένα Σχετικά με τις Γραμματοσειρές μέσα σε Εφαρμογές JavaScript;

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 @@ 
Δωρεάν Λογισμικό

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

Άνοιγμα & Ανάλυση Γραμματοσειρών μέσα σε Εφαρμογές JavaScript

Η ανοιχτού κώδικα βιβλιοθήκη Opentype.js επιτρέπει στους προγραμματιστές λογισμικού να φορτώνουν και να μετατρέπουν διάφορους τύπους γραμματοσειρών στις δικές τους εφαρμογές JavaScript. Η βιβλιοθήκη παρέχει έναν ισχυρό μηχανισμό ανάλυσης γραμματοσειρών, επιτρέποντας στους προγραμματιστές να φορτώνουν αρχεία γραμματοσειρών OpenType (WOFF, OTF, TTF) στις web εφαρμογές τους. Μόλις η γραμματοσειρά φορτωθεί, οι προγραμματιστές μπορούν να έχουν πρόσβαση και να χειριστούν διάφορες ιδιότητες γραμματοσειράς, όπως σχήματα γλύφων, μετρικές και μεταδεδομένα. Το παρακάτω παράδειγμα δείχνει πώς να φορτώσετε διάφορους τύπους γραμματοσειρών όπως WOFF, OTF, TTF μέσα σε εφαρμογές JavaScript.

Πώς να Φορτώσετε Γραμματοσειρές WOFF ή TTF μέσω του 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);
})
 Ελληνικά