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

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

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

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

Το OpenType.js είναι μια βιβλιοθήκη JavaScript που παρέχει ένα απλό και διαισθητικό API για την πρόσβαση στις προχωρημένες τυπογραφικές δυνατότητες των γραμματοσειρών OpenType. Με το OpenType.js, οι προγραμματιστές λογισμικού μπορούν εύκολα να χρησιμοποιούν δυνατότητες όπως συνδέσεις, εναλλακτικά γλύφα, μεταβλητές γραμματοσειρές κ.λπ., επιτρέποντάς τους να δημιουργούν σύνθετα και εκλεπτυσμένα τυπογραφικά σχέδια. Εκτός από την ανάλυση και την επεξεργασία υπαρχουσών γραμματοσειρών, το opentype.js υποστηρίζει επίσης τη δημιουργία νέων αρχείων γραμματοσειρών από το μηδέν. Αυτή η δυνατότητα είναι πολύτιμη για προγραμματιστές που θέλουν να παράγουν προσαρμοσμένες γραμματοσειρές προγραμματιστικά. Ως βιβλιοθήκη JavaScript, το opentype.js μπορεί να χρησιμοποιηθεί τόσο σε περιβάλλοντα πελάτη (client-side) όσο και σε περιβάλλοντα διακομιστή (server-side), καθιστώντας το ευέλικτη επιλογή για διάφορα έργα. Συνολικά, είναι μια ισχυρή και ευέλικτη βιβλιοθήκη που παρέχει έναν απλό και διαισθητικό τρόπο εργασίας με γραμματοσειρές OpenType στον περιηγητή.

Previous Next

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

Ο συνιστώμενος τρόπος εγκατάστασης του OpenType.js είναι η χρήση του NPM. Παρακαλώ χρησιμοποιήστε την παρακάτω εντολή για μια ομαλή εγκατάσταση.

Εγκατάσταση Opentype.js χρησιμοποιώντας npm

 npm install opentype.js

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

Ανάλυση Γραμματοσειράς σε Εφαρμογές Node.js

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

Πώς να Φορτώσετε και να Αναλύσετε Γραμματοσειρά από Αρχείο TTF μέσα σε Node.js;;

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

Πρόσβαση & Τροποποίηση Γλυφών Γραμματοσειράς σε Node.js

Η ανοιχτού κώδικα βιβλιοθήκη Node.js OpenType.js επιτρέπει στους προγραμματιστές λογισμικού να έχουν πρόσβαση και να επεξεργάζονται μεμονωμένα γλύφα μέσα σε μια γραμματοσειρά σε εφαρμογές Node.js. Τα γλύφα είναι οι οπτικές αναπαραστάσεις των χαρακτήρων σε μια γραμματοσειρά. Με αυτή τη δυνατότητα, μπορείτε να εξάγετε διαδρομές γλύφα, να τις τροποποιήσετε ή ακόμη και να δημιουργήσετε νέα γλύφα. Εδώ είναι ένα απόσπασμα κώδικα που φορτώνει μια γραμματοσειρά, ανακτά το γλύφο για τον χαρακτήρα "A," και στη συνέχεια κλιμακώνει το γλύφο κατά 1,5 φορές το αρχικό του μέγεθος. Η μέθοδος toPathData() μετατρέπει τη διαδρομή του γλύφα σε δεδομένα διαδρομής SVG, τα οποία μπορούν να χρησιμοποιηθούν για απόδοση ή περαιτέρω επεξεργασία.

Πώς να Φορτώσετε μια Γραμματοσειρά και να Τροποποιήσετε Γλυφές μέσα σε Εφαρμογές Node.js;

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

Εργασία με Πίνακες Γραμματοσειρών μέσω Βιβλιοθήκης Node.js

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

Πώς να αποκτήσετε πρόσβαση σε συγκεκριμένους πίνακες γραμματοσειρών και τη γραμματοσειρά μέσα σε αυτούς χρησιμοποιώντας τη βιβλιοθήκη Node.js;

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);
  }
});
 Ελληνικά