Шаг 1
Разместите шрифты в своем приложении
Поместите файлы `.woff2` в свой общедоступный каталог ресурсов и сохраните файлы `.ttf` в качестве резерва или для собственных конвейеров экспорта. Этот проект использует `/fonts/starfont/` и регистрирует оба семейства по всему миру.
@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;
}
Шаг 2
Централизуйте сопоставление глифов
Сохраняйте один файл сопоставления для тел, знаков и аспектов, чтобы во всех диаграммах, легендах, подсказках и средствах визуализации PDF использовались одни и те же символы. Приведенный ниже фрагмент — web-friendly и соответствует назначениям глифов, описанным в руководстве.
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: "!",
};
export const AstroFontSignMapping = {
Aries: "x",
Taurus: "c",
Gemini: "v",
Cancer: "b",
Leo: "n",
Virgo: "m",
Libra: "X",
Scorpio: "C",
Sagittarius: "V",
Capricorn: "B",
Aquarius: "N",
Pisces: "M",
};
export const AstroFontAspectMapping = {
Conjunction: "q",
Opposite: "p",
Square: "t",
Trine: "u",
Sextile: "r",
Inconjunct: "o",
SemiSextile: "w",
SemiSquare: "e",
SesquiQuadrate: "i",
};
Шаг 3
Рендеринг глифов с помощью небольшого компонента
Обертывание глифа в компонент позволяет легко переключаться между шрифтами Sans и Serif, контролировать размер и прикреплять к символу доступные метки.
type AstroGlyphProps = {
glyph: string;
family?: "sans" | "serif";
className?: string;
};
export function AstroGlyph({
glyph,
family = "sans",
className = "",
}: AstroGlyphProps) {
const fontFamily = family === "serif" ? '"StarFont Serif"' : '"StarFont Sans"';
return (
<span
aria-hidden="true"
className={className}
style={{ fontFamily, lineHeight: 1 }}
>
{glyph}
</span>
);
}