Comment puis-je répertorier par programmation les polices disponibles dans le navigateur en JavaScript ?

Liste des polices disponibles pour la sélection de l'utilisateur dans le navigateur

Problème :

Dans le développement Web, on peut rencontrer le besoin de proposer aux utilisateurs une liste déroulante de polices que leur navigateur peut afficher. Comment pouvez-vous obtenir cette liste par programmation en JavaScript, sans vous fier à des données codées en dur ou récupérées par le serveur ?

Solution :

Détection des polices avec JavaScript

Heureusement, JavaScript fournit un moyen de détecter les polices disponibles sur le système d'un utilisateur. L'extrait suivant peut être implémenté :

var detector = new Detector();

// Function to detect if a font is available
function detectFont(font) {
  return detector.detect(font);
}

// Get the list of detected fonts
var availableFonts = [];
for (var font in detector.detectFonts()) {
  if (detectFont(font)) {
    availableFonts.push(font);
  }
}

console.log(availableFonts);

Cela enregistrera un tableau de toutes les polices que le navigateur peut afficher.

Explication du code

La classe Detector utilise une technique appelée « empreinte digitale de police » pour comparer une police spécifique à un ensemble de polices de base et déterminer si elle est disponible. Ceci est réalisé en mesurant la largeur et la hauteur du texte rendu dans la police et en les comparant aux mesures du texte rendu dans les polices de base. Si les mesures diffèrent, cela indique la présence de la police spécifique.

Informations supplémentaires

La méthode de détection de police peut être encore améliorée en utilisant des approches supplémentaires, telles que la vérification de fichiers de polices dans le système ou en utilisant Flash ou Canvas pour restituer le texte. Cependant, ces méthodes ne sont pas aussi fiables que la détection native des polices JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!