Introduction
Pour afficher les symboles astrologiques de facon constante dans des dashboards, rapports, legendes ou overlays SVG, mieux vaut utiliser une police de glyphes dediee plutot que compter sur les fallbacks Unicode du navigateur.
AstroFont est notre guide d'implementation frontend pour les familles publiques StarFont Sans et StarFont Serif. Il donne un chemin simple pour embarquer les polices dans un projet web, avec des assets prets pour le navigateur et un mapping clair des glyphes.
La page complete est ici :
Vous pouvez aussi telecharger les assets depuis cette page :
- Manuel PDF StarFont
- StarFont Sans
.woff2et.ttf - StarFont Serif
.woff2et.ttf
Ce que resout AstroFont
Le manuel StarFont explique pourquoi ces polices ont ete creees :
- symboles astrologiques absents des polices courantes
- style incoherent entre glyphes
- largeurs difficiles a gerer dans les tableaux et layouts
- rendu mediocre dans les PDF ou exports vectoriels
AstroFont regle la partie frontend en transformant le package de polices en integration web propre.
Configuration recommandee
L'implementation reste courte :
- Heberger les fichiers de police comme assets statiques.
- Les declarer avec
@font-face. - Stocker tous les glyphes de planetes, signes et aspects dans un seul fichier de mapping.
- Rendre les symboles via un petit composant au lieu de disperser des caracteres bruts dans l'UI.
Exemple de declaration de police
@font-face {
font-family: "StarFont Sans";
src:
url("/fonts/starfont/strfnsan.woff2") format("woff2"),
url("/fonts/starfont/strfnsan.ttf") format("truetype");
font-display: swap;
}
@font-face {
font-family: "StarFont Serif";
src:
url("/fonts/starfont/strfnser.woff2") format("woff2"),
url("/fonts/starfont/strfnser.ttf") format("truetype");
font-display: swap;
}Exemple de mapping des glyphes
export const AstroFontBodyMapping = {
Sun: "s",
Moon: "d",
Mercury: "f",
Venus: "g",
Mars: "h",
Jupiter: "j",
Saturn: "S",
Uranus: "F",
Neptune: "G",
Pluto: "J",
NorthNode: "k",
SouthNode: "?",
Ascendant: "1",
MidHeaven: "3",
Vertex: "!",
};Sans ou Serif
Le manuel recommande StarFont Sans par defaut, surtout quand les symboles sont melanges a une typographie d'interface. En pratique :
- utilisez Sans pour les ecrans d'app, controles, dashboards et affichages compacts
- utilisez Serif pour les mises en page editoriales, les rapports imprimables et les surfaces de lecture longues
Note sur les valeurs de glyphes
Quand votre mapping existant differe du manuel, la documentation AstroFont suit les assignations StarFont documentees. En particulier :
- Moon utilise
d - Saturn utilise
S - Sesquiquadrate utilise
i
Les exemples restent ainsi alignes avec le package livre et le PDF de reference.
Suite
Utilisez la page complete pour :
- les telechargements directs
- les previews StarFont Sans
- les previews StarFont Serif
- le CSS pret pour navigateur
- des exemples de composants React
- les notes d'implementation basees sur le manuel original
Ouvrir la page complete :