Police Tsing : une police de style cool

Cet article explore la création et l'application de polices personnalisées, en utilisant la police open source Tsing comme exemple pratique. Le processus est décomposé en étapes gérables, parfaites pour les débutants.

Cette police à espacement fixe, construite à partir de carrés 9x9 (lettres) et de carrés 11x11 (chiffres), présente un style visuel unique. L'importance de la conception de polices dans divers contextes, depuis les éditeurs de code (comme VIM utilisant des polices nerd) jusqu'à l'image de marque pour les entreprises et les événements à grande échelle (comme les Jeux olympiques d'hiver de Pékin 2022), est soulignée. Même les animations de démarrage de Windows utilisent des polices pour leurs icônes.

Concevoir votre police : un guide étape par étape

La première étape consiste à définir le but de la police et l'esthétique souhaitée. Pour une police à espacement fixe, par exemple :

Chaque personnage est méticuleusement conçu au sein d'une grille définie (ici, 9x9).

Ensuite, traduisez votre design en une police utilisable. Cela implique d'utiliser un logiciel de conception de polices pour mapper vos conceptions SVG sur leurs caractères Unicode correspondants.

Birdfont : votre outil de création de polices

Birdfont, un outil open-source (licence GNU GPL v3), est recommandé pour ce processus. Rappelons que de nombreuses Google Fonts utilisent la SIL Open Font License (OFL), permettant une utilisation gratuite (même commerciale) mais interdisant la revente.

Créer une police avec Birdfont :

1. Préparez les SVG : Créez des fichiers SVG bien espacés pour chaque personnage.
2. Importer des SVG : Importez-les dans Birdfont et mappez-les sur des points Unicode.
3. Ajuster et finaliser : Affinez votre conception pour plus de cohérence.
4. Caractères principaux du design : Incluez au moins A-Z, 0-9 et des symboles communs.
5. Définir les métadonnées : Définissez le nom de la police, la description, etc. dans Birdfont.
6. Exporter au format TTF : Exportez votre police terminée sous forme de fichier TTF.

L'exemple de police Tsing :

Le projet Tsing-font (SIL Open Font License) fournit un exemple complet, comprenant les fichiers des projets Figma et Birdfont, et un site Web de démonstration.

Utiliser votre police

Les tests de rendu des polices impliquent souvent des expressions telles que "Je peux manger du verre, ça ne me fait pas de mal" d'Ubuntu. Même si un simple TTF peut fonctionner localement, la compatibilité entre navigateurs doit être prise en compte. Utilisez des outils comme Convertio pour convertir votre TTF en WOFF/WOFF2 pour une prise en charge plus large. Implémentez cela en utilisant la règle @font-face de CSS :

@font-face {
    font-family: "YourFontName";
    src: url("your-font.woff2") format("woff2"),
         url("your-font.woff") format("woff"),
         url("your-font.ttf") format("truetype");
}

Au-delà des aspects techniques, pensez aux aspects plus larges de la communication visuelle et du marketing pour exploiter pleinement le potentiel de votre police.

Applications de polices (exemples) :

Téléchargez la police Tsing depuis https://www.php.cn/link/dfdfab9941ac833a0c364aa2e608185e et n'oubliez pas de montrer votre soutien !

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!