font template
1.0.0
Modèles de police Adobe Illustrator qui vous permettent de modifier complètement les formes de glyphes .otf caractères) .ttf un fichier .ai (ou .woff leurs fichiers .ai distincts et respectifs si vous le souhaitez), puis les exporter en tant que .woff2 .svg etc.).
Belle version de ce tutoriel sur mon site Web
font_template.ai (Téléchargement): Modèle de police Adobe Illustrator pour les symboles de base et étendus et les lettres latines (couverture significative CP1252), chaque glyphe a un tableau artistique séparé, afin que vous puissiez facilement exporter chacun d'eux en tant que fichier SVG de glyphe individuel.font_template_single.ai (Téléchargement): modèle de police Adobe Illustrator pour un seul glyphe. Si vous le souhaitez, vous pouvez utiliser ce fichier au lieu de (ou avec) font_template.ai .batch_import_svg.py (Ouvrir, puis Ctrl + S / CMD + S pour enregistrer): .woff script Python qui peut importer plusieurs fichiers de glyphes individuels SVG dans FontForge's .sfd Font Fichier (et peut éventuellement le convertir en fichiers de police de production, ie .otf , .ttf , .woff2 , etc.) (Au lieu de télécharger les fichiers, vous pouvez également git clone https://github.com/tomchen/font-template.git ou téléchargez l'ensemble du référentiel)
( Assurez-vous d'utiliser la dernière version de FontForge, qui est 20th Anniversary Edition (2020-11-07) (page de version GitHub ou page de téléchargement de FontForge.org). Old Windows version 20200314 plante lors de l'importation de fichiers SVG. )
Open font_template.ai , dessinez vos glyphes dans la couche "Glyph sur l'art".
(Peu importe si votre glyphe est partiellement et légèrement en dehors de son artboard.)
Après avoir terminé le dessin des glyphes, masquez la couche "Exemple de glyphe". Cliquez sur "Fichier" -> "Export" -> "Exportation pour les écrans".
Sélectionnez les glyphes que vous souhaitez exporter (ne sélectionnez pas ceux vides), sélectionnez le format "SVG", cliquez sur "Exporter Artboard".
Les fichiers SVG Glyph individuels exportés se trouvent dans un dossier "SVG", mettez-le dans un dossier qui contient également le fichier de script batch_import_svg.py .
Pour les utilisateurs de Windows, exécutez C:Program Files (x86)FontForgeBuildsfontforge-console.bat , * Accédez au dossier à l'aide de cd <FOLDER_PATH> et exécutez le script Python à l'aide de ffpython batch_import_svg.py . Un fichier de police output.sfd sera généré.
Pour les utilisateurs de Mac ou Linux, cd <FOLDER_PATH> et exécutez fontforge -lang=py -script batch_import_svg.py .
(*: pour 64 bits Windows, c'est Program Files (x86) , pour 32 bits Windows, c'est Program Files )
Ouvrez le fichier de police output.sfd avec FontForge. Ajustez la largeur des Glyphs (utilisez la touche Maj pour sélectionner tous les glyphes que vous souhaitez ajuster la largeur, puis, dans le menu, sélectionnez "Metrics" -> "Auto Largeth", ou, double-cliquez sur un glyphe et faites glisser manuellement sa ligne de bordure).
Dans le menu, sélectionnez "Fichier" -> "Générer des polices ..."
Tapez un nom de police, sélectionnez un format de police (généralement TrueType ou OpenType), cliquez sur le bouton "Générer". Ensuite, vous avez votre police d'ordinateur autodidacte!
Vous pouvez vous arrêter ici et n'avez pas besoin de lire les sections suivantes.
Ce modèle de police peut être utilisé pour dessiner des glyphes uniques et produire des glyphes uniques.
L'image suivante représente les guides d'un seul glyphe.
Dans FontForge, sélectionnez un glyphe ou ouvrez un glyphe, puis cliquez sur "Fichier" -> "Importer ...", sélectionnez "SVG" comme "format", sélectionnez votre fichier SVG Glyph unique et importez-le.
Modifiez le fichier batch_import_svg.py si vous souhaitez ouvrir un fichier de police .sfd existant, ou générer .otf , .ttf , .woff , .woff2 directement, au lieu de le faire avec FontForge GUI.
Dans le menu FontForge, cliquez sur "Fichier" -> "Exécuter le script"
Copier et coller: SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
Sélectionnez le bouton radial "FF".
Cliquez sur le bouton "OK".
Si la forme d'un glyphe contient plusieurs chemins de chevauchement, il serait préférable de les rejoindre (un joli tutoriel YouTube) au lieu de les regrouper ou de les faire un chemin composé. Cette étape aide à éviter les problèmes de rendu de police pour les chemins de chevauchement. Cependant, pour les chemins séparés (sans chevauchement), n'hésitez pas à utiliser "groupe" ( Ctrl + G ) ou "Path composé" ("Object" -> "Path composé" -> "Make").
Au lieu de créer un fichier de police avec FontForge de SCRACH, c'est parfois une bonne idée d'utiliser un fichier de police libre et open-source existant comme police de base et de secours. Les polices open source typiques avec une bonne couverture de glyphe sont la source d'Adobe Sans Pro et Source Serif Pro. Choisissez un poids tel que "régulier", selon vos besoins. Ouvrez le fichier de police avec FontForge, modifiez-le pour créer votre police. Cependant, si vous utilisez une police existante, vous devrez peut-être modifier non seulement AZ, AZ mais aussi leurs ligatures telles que "FF" et "FI".
Lorsque vous sélectionnez Glyphs dans la fenêtre "Exporter pour les écrans" d'Iluller, vous ne devez pas sélectionner des glyphes vides, sinon, vous verrez "Je suis désolé que ce fichier soit trop complexe pour que je puisse comprendre (ou est erroné)" AVERTISSEMENT Lorsque vous exécutez le script batch_import_svg.py . Néanmoins, il ne s'arrêtera pas et continuera de générer le fichier output.sfd .
Le 19 août 2020, le fichier font_template.ai du projet a été mis à jour (de nombreux noms Artboard ont été modifiés, par exemple 44 , ont été modifiés en 44 comma ) pour résoudre un problème de nom de fichier Unicode. Si vous avez téléchargé font_template.ai avant 2020-08-19 et fabriqué votre fichier .ai en fonction de l'ancienne version, vous pouvez éventuellement à mettre à jour les noms artboard dans votre font_template.ai en utilisant l'une des méthodes suivantes:
.ai au dernier font_template.ai/other_files/update_artboard_names.js dans illustrator: Ouvrez votre fichier .ai dans Adobe Illustrator, dans le menu, cliquez sur "Fichier" -> "Scripts" -> "Autre script ...", Rechercher et sélectionner le fichier update_artboard_names.js téléchargé, cliquez sur "Ouvrir" Après la mise à jour, supprimez et régénérez vos fichiers Glyph SVG dans le dossier SVG .
(**: Si vous utilisez l'ancienne version, mais que vos glyphes sont limités aux caractères ASCII de base, donc ne rencontrera aucun problème lié au nom de fichier SVG Unicode, vous pouvez choisir de ne pas mettre à jour votre fichier .ai )
Une fois que vous avez votre propre police, vous pouvez l'utiliser sur vos pages Web (y compris les sites Web, les applications Web, les applications de bureau à plaque transversale compilées électroniques, ou même React Native / NativeScript Mobile App).
Votre police peut être une police d'alphabet ou une police d'icône monochrome. Si vous souhaitez afficher des icônes de couleur, utilisez SVG ou PNG.
Mettez vos fichiers de police .woff2 et .woff ( my_font.woff2 et my_font.woff dans l'exemple) dans votre dossier CSS et insérez le code suivant dans votre fichier CSS (il prend en charge IE9 +):
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} (Si vous ne souhaitez pas prendre en charge de l'IE, vous pouvez supprimer le fichier .woff et utiliser uniquement .woff2 (le plus petit et le dernier format))
Ensuite, utilisez votre nom font-family personnalisé («myfont» dans l'exemple):
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}HTML:
< span class =" my-special-font " > B </ span > S'il s'agit d'une police d'icône monochrome, la lettre B dans le code HTML sera affichée comme la cartographie de l'icône monochrome à la lettre B. Bien que les développeurs Web utilisent généralement des caractères dans une zone d'usage privé Unicode tels que U + EEA0 et U + F2BB au lieu de ne pas vous procurer des lettres latines couramment utilisées. Pour répondre à ces préoccupations, vous pouvez identifier sémantiquement une icône de police en ajoutant role et des attributs aria-label à votre élément HTML:
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > Licence MIT pour tout dans ce référentiel
