FreeAstroAPI LogoFreeAstroAPI
Retour aux guides
Integration

Implementer AstroFont dans n'importe quel projet frontend

Ajoutez StarFont Sans et StarFont Serif a une application frontend avec hebergement web-font, mapping des glyphes, telechargements et notes d'integration.

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 .woff2 et .ttf
  • StarFont Serif .woff2 et .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 :

  1. Heberger les fichiers de police comme assets statiques.
  2. Les declarer avec @font-face.
  3. Stocker tous les glyphes de planetes, signes et aspects dans un seul fichier de mapping.
  4. 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 :

A lire ensuite

Tous les guides