介绍

如果你希望占星符号在 dashboard、报告、图例和 SVG overlay 中稳定显示，不要依赖浏览器的随机 Unicode fallback。更稳的方式是使用专门的 glyph font。

AstroFont 是我们为公有领域字体 StarFont Sans 和 StarFont Serif 写的前端实现指南。它给出一套可直接落地的做法：浏览器可用的字体文件、清晰的 glyph mapping，以及适合任何 web 项目的集成方式。

完整页面在这里：

• AstroFont frontend guide

你也可以从该页面下载：

• StarFont manual PDF
• StarFont Sans .woff2 和 .ttf
• StarFont Serif .woff2 和 .ttf

AstroFont 解决什么问题

原始 StarFont 手册解释了这些字体为什么被创建：

• 常见字体缺少占星符号
• 不同 glyph 风格不一致
• 在表格和布局中宽度不好控制
• PDF 或 vector export 中输出效果差

AstroFont 把字体包整理成适合前端使用的集成模式，解决的是应用侧落地问题。

推荐设置

实现很简单：

1. 把字体文件作为静态资源托管在应用里。
2. 用 @font-face 注册字体。
3. 把所有行星、星座和相位 glyph 放进一个 mapping 文件。
4. 用一个小组件渲染符号，不要把原始字符散落在 UI 里。

字体注册示例

@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;
}

Glyph mapping 示例

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 还是 Serif

原始手册建议默认使用 StarFont Sans，尤其是在普通 UI 字体中混排符号时。

• Sans 适合应用页面、控件、dashboard 和紧凑数据展示
• Serif 适合 editorial layout、可打印报告和长阅读页面

Glyph 值的注意点

如果你现有 mapping 和手册不同，AstroFont 文档以 StarFont 手册记录的分配为准。特别是：

• Moon 使用 d
• Saturn 使用 S
• Sesquiquadrate 使用 i

这样示例会和发布的字体包、PDF 参考手册保持一致。

下一步

完整实现页面包含：

• 直接下载
• StarFont Sans 预览
• StarFont Serif 预览
• 浏览器可用 CSS
• React 组件示例
• 基于原始手册的实现说明

打开完整页面：

• AstroFont frontend guide