1. Des produits
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

Bibliothèque JavaScript gratuite pour l'analyse et l'écriture de polices

Bibliothèque JavaScript open source qui permet d'analyser, lire et écrire des polices TrueType ou OpenType. Elle prend en charge la gestion des polices, les métriques des glyphes et la mise en page du texte dans les applications JS.

Dans le vaste royaume du design et du développement web, la typographie joue un rôle essentiel dans la création de l'expérience utilisateur globale. Cependant, travailler avec la typographie sur le web comporte son propre ensemble de défis. Heureusement, opentype.js, une bibliothèque JavaScript open-source, est apparue comme un outil puissant qui permet aux développeurs de logiciels de manipuler et d'exploiter le potentiel de la typographie dans les applications web. La bibliothèque offre une API simple et intuitive, la rendant accessible aux développeurs de tous niveaux de compétence. Elle donne aux développeurs la flexibilité de personnaliser et d'adapter la typographie pour répondre à leurs exigences de conception spécifiques.

Opentype.js fonctionne sur une large gamme de navigateurs web modernes, ce qui en fait une solution fiable et cohérente pour implémenter des fonctionnalités typographiques. La bibliothèque comprend plusieurs fonctionnalités importantes, telles qu'un mécanisme d'analyse robuste des polices, l'interaction avec les glyphes individuels d'une police, la prise en charge de la mise en page de texte complexe, le rendu de diverses polices, la compatibilité inter-navigateurs, l'extraction de données détaillées sur les polices, la prise en charge avancée de la mise en page du texte, l'animation des glyphes individuels et bien plus encore. Elle s'intègre parfaitement aux technologies web existantes et peut être utilisée avec le canvas HTML5, SVG, ou même combinée avec les frameworks CSS et JavaScript.

Opentype.js est une bibliothèque JavaScript open source qui permet aux développeurs web de travailler avec les polices OpenType, un format de police largement utilisé. Les polices OpenType offrent des fonctionnalités typographiques avancées, telles que les ligatures, le crénage et les substitutions de glyphes, qui améliorent considérablement l'attrait visuel et la lisibilité du texte. En tirant parti d'opentype.js, les développeurs peuvent exploiter ces fonctionnalités et accéder aux données sous-jacentes des polices OpenType, leur permettant de créer des expériences typographiques dynamiques et interactives sur le web. Qu'il s'agisse d'affiner les détails typographiques ou de créer des animations typographiques complexes, Opentype.js est un outil indispensable pour tous ceux qui sont passionnés par l'art de la typographie dans le domaine numérique.

Previous Next

Premiers pas avec Opentype.js

La méthode recommandée pour installer Opentype.js est d'utiliser npm. Veuillez utiliser la commande suivante pour ajouter la dépendance Maven à votre projet.

Installer Opentype.js via npm

 npm install opentype.js

Vous pouvez également l'installer manuellement ; téléchargez les derniers fichiers de version directement depuis le dépôt GitHub.

Accéder aux données de police via l'API JavaScript

Une des fonctionnalités clés d'OpenType.js est sa capacité à extraire des données de police détaillées avec seulement quelques lignes de code JavaScript. La bibliothèque open source Opentype.js offre une fonctionnalité complète pour charger et accéder aux données liées aux polices dans leurs applications JavaScript. Les développeurs peuvent accéder à divers attributs tels que le nom de la police, les informations du designer, les formes des glyphes, les paires de crénage et bien plus encore. Ces informations permettent un contrôle précis de la typographie et facilitent l'expérimentation créative. L'exemple suivant montre comment charger et afficher les données liées aux polices à l'aide de commandes JavaScript.

Comment afficher les données liées aux polices dans les applications 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 @@ 
Logiciel gratuit

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

Ouvrir et analyser les polices dans les applications JavaScript

La bibliothèque open source Opentype.js permet aux développeurs de logiciels de charger et de convertir différents types de polices dans leurs propres applications JavaScript. La bibliothèque fournit un mécanisme d'analyse de police robuste, permettant aux développeurs de charger des fichiers de police OpenType (WOFF, OTF, TTF) dans leurs applications web. Une fois la police chargée, les développeurs peuvent accéder et manipuler diverses propriétés de la police, telles que les formes des glyphes, les métriques et les métadonnées. L'exemple suivant montre comment charger différents types de polices comme les polices WOFF, OTF, TTF dans des applications JavaScript.

Comment charger des polices WOFF ou TTF via l'API JavaScript ?

// 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);
})
 Français