Base64 en police

Comment décoder une police Base64

1. Collez dans Base64 ou data URI l’un de ces éléments : du Base64 brut, une data URI comme data:font/woff2;base64,d09GMg…, ou du CSS qui en contient une. Si une règle contient plusieurs entrées src, c’est la première data URI qui est utilisée.
2. L’aperçu affiche la police avec le pangramme « The quick brown fox jumps over the lazy dog 0123456789 » et une ligne avec l’alphabet complet. Tapez dans Texte d’exemple pour essayer vos propres mots.
3. La liste d’informations montre ce que le fichier de police dit de lui-même : Famille de police, Style, Nom complet, Version, Glyphes et Unités par em.
4. Appuyez sur Télécharger le fichier pour l’enregistrer avec l’extension de son format.

La ligne d’état sous les informations indique « Rendu avec la police décodée. » quand le navigateur l’a acceptée. La police est enregistrée sous un nom privé pour cette page uniquement, puis retirée dès que vous décodez autre chose ; la Content Security Policy de la page n’autorise aucun trafic réseau hormis le comptage des pages vues de Cloudflare, le fichier ne va donc nulle part.

Les formats et ce que l’outil en lit

Pour un WOFF2, la ligne de la famille indique « non lu (les tables WOFF2 sont compressées en Brotli) » : la page ne décompresse pas elle-même le Brotli, et le moteur de polices du navigateur, qui le fait, garde le résultat pour lui. Le rendu n’est pas affecté : vous voyez donc toujours si la police a le bon aspect. Pour lire les noms après l’enregistrement, fc-scan de fontconfig gère le WOFF2 :

fc-scan --format "%{family}: %{style}\n" font.woff2

Pour la police Material Icons, la commande affiche Material Icons: Regular.

Quand la police ne s’affiche pas

« Votre navigateur a refusé cette police. Elle est peut-être endommagée, ou ce n’est pas une police. » signifie que le filtre de polices du navigateur a rejeté le fichier. Chrome et Firefox vérifient la structure de chaque police web avant de l’utiliser, et une police tronquée, ou découpée dans un fichier plus grand au mauvais offset, échoue à cette vérification. Comparez la taille décodée avec celle de l’original ; une chaîne Base64 qui a perdu sa fin se décode en une police dont la dernière table est cassée.

Si la liste d’informations affiche les noms mais que l’exemple reste vide, la police n’a pas de glyphes pour ce que vous avez tapé. Cela arrive avec :

• Les polices d’icônes : leurs symboles se trouvent sur des points de code à usage privé, à partir de U+E000. Les polices qui utilisent des ligatures, dont Material Icons, affichent une icône quand vous tapez son nom, par exemple home.
• Les polices réduites : les pages web n’intègrent souvent que les caractères dont elles ont besoin, parfois quelques dizaines. Glyphes indique combien le fichier en contient.
• Les polices pour d’autres écritures : une police conçue pour l’arabe ou le devanagari peut ne contenir aucune lettre latine.

Quand les données ne sont pas du tout une police, la note le dit : « Cela ressemble à PDF, pas à un fichier de police. », etc., avec un bouton de téléchargement adapté.

D’où viennent les polices Base64

La plupart viennent du CSS. Les outils de build intègrent les petites polices dans les feuilles de style sous forme d’URI data:, et les exports HTML en un seul fichier, les rapports hors ligne et les fichiers SVG contenant du texte transportent leurs polices de la même façon. L’intégration a un coût, car une police intégrée ne peut pas être mise en cache séparément de la feuille de style ; les performances des data URI donnent les détails. Pour transformer un fichier de police en une telle règle, utilisez Police en Base64.

Extraire toutes les polices d’une feuille de style en Python

L’outil décode la première data URI qu’il trouve. Pour une feuille de style qui intègre plusieurs polices, un court script les enregistre toutes avec la bonne extension :

import base64, re

SIGNATURES = {b"wOF2": "woff2", b"wOFF": "woff", b"OTTO": "otf", b"\x00\x01\x00\x00": "ttf", b"ttcf": "ttc"}

css = open("icons.css").read()
pattern = r"data:[^;,]*(?:;[^;,]*)*;base64,([A-Za-z0-9+/=\s]+)"
for i, b64 in enumerate(re.findall(pattern, css)):
    data = base64.b64decode(b64)
    ext = SIGNATURES.get(data[:4], "bin")
    with open(f"font-{i}.{ext}", "wb") as f:
        f.write(data)
    print(f"font-{i}.{ext}", len(data), "bytes")

L’extension est déduite des quatre premiers octets, car les feuilles de style étiquettent souvent les polices de façon approximative (application/font-woff, application/octet-stream). Plus de détails sur Base64 en Python.

FAQ