Skip to content

Commit 1a49edf

Browse files
pomelo-nwupomelo-nwu
committed
feat: implement dynamic font loading with JavaScript for environment-aware paths
1 parent a08c0d2 commit 1a49edf

File tree

3 files changed

+100
-66
lines changed

3 files changed

+100
-66
lines changed

‎website/app/layout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type { Metadata } from "next";
44
import { Head } from "nextra/components";
55
import type { FC, ReactNode } from "react";
66
import "nextra-theme-docs/style.css";
7+
import { FontLoader } from "../src/components/font-loader";
78

89
export const metadata: Metadata = {
910
description: "x",
@@ -44,7 +45,10 @@ const RootLayout: FC<LayoutProps> = ({ children }) => {
4445
saturation: { dark: 74, light: 74 },
4546
}}
4647
/>
47-
<body>{children}</body>
48+
<body>
49+
<FontLoader />
50+
{children}
51+
</body>
4852
</html>
4953
);
5054
};

‎website/src/components/font-loader.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { useEffect } from 'react';
2+
3+
export const FontLoader = () => {
4+
useEffect(() => {
5+
// 根据环境设置字体路径前缀
6+
const isProduction = process.env.NODE_ENV === "production";
7+
const fontPrefix = isProduction ? "/qwen-code-docs" : "";
8+
9+
// 创建字体样式
10+
const fontStyles = `
11+
/* Local Monoton Font */
12+
@font-face {
13+
font-family: "Monoton";
14+
src: url("${fontPrefix}/Monoton/Monoton-Regular.ttf") format("truetype");
15+
font-weight: normal;
16+
font-style: normal;
17+
font-display: swap;
18+
}
19+
20+
/* Local Orbitron Font - Multiple Weights */
21+
@font-face {
22+
font-family: "Orbitron";
23+
src: url("${fontPrefix}/Orbitron/Orbitron-VariableFont_wght.ttf") format("truetype-variations");
24+
font-weight: 400 900;
25+
font-style: normal;
26+
font-display: swap;
27+
}
28+
29+
@font-face {
30+
font-family: "Orbitron";
31+
src: url("${fontPrefix}/Orbitron/static/Orbitron-Regular.ttf") format("truetype");
32+
font-weight: 400;
33+
font-style: normal;
34+
font-display: swap;
35+
}
36+
37+
@font-face {
38+
font-family: "Orbitron";
39+
src: url("${fontPrefix}/Orbitron/static/Orbitron-Medium.ttf") format("truetype");
40+
font-weight: 500;
41+
font-style: normal;
42+
font-display: swap;
43+
}
44+
45+
@font-face {
46+
font-family: "Orbitron";
47+
src: url("${fontPrefix}/Orbitron/static/Orbitron-SemiBold.ttf") format("truetype");
48+
font-weight: 600;
49+
font-style: normal;
50+
font-display: swap;
51+
}
52+
53+
@font-face {
54+
font-family: "Orbitron";
55+
src: url("${fontPrefix}/Orbitron/static/Orbitron-Bold.ttf") format("truetype");
56+
font-weight: 700;
57+
font-style: normal;
58+
font-display: swap;
59+
}
60+
61+
@font-face {
62+
font-family: "Orbitron";
63+
src: url("${fontPrefix}/Orbitron/static/Orbitron-ExtraBold.ttf") format("truetype");
64+
font-weight: 800;
65+
font-style: normal;
66+
font-display: swap;
67+
}
68+
69+
@font-face {
70+
font-family: "Orbitron";
71+
src: url("${fontPrefix}/Orbitron/static/Orbitron-Black.ttf") format("truetype");
72+
font-weight: 900;
73+
font-style: normal;
74+
font-display: swap;
75+
}
76+
`;
77+
78+
// 创建 style 元素并添加到 head
79+
const style = document.createElement('style');
80+
style.textContent = fontStyles;
81+
style.id = 'dynamic-fonts';
82+
document.head.appendChild(style);
83+
84+
// 清理函数
85+
return () => {
86+
const existingStyle = document.getElementById('dynamic-fonts');
87+
if (existingStyle) {
88+
existingStyle.remove();
89+
}
90+
};
91+
}, []);
92+
93+
return null; // 这个组件不渲染任何内容
94+
};

‎website/src/styles/globals.css‎

Lines changed: 1 addition & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -6,71 +6,7 @@
66
/* Terminal/Monospace Fonts */
77
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Fira+Code:wght@300..700&display=swap");
88

9-
/* Local Monoton Font */
10-
@font-face {
11-
font-family: "Monoton";
12-
src: url('/Monoton/Monoton-Regular.ttf') format("truetype");
13-
font-weight: normal;
14-
font-style: normal;
15-
font-display: swap;
16-
}
17-
18-
/* Local Orbitron Font - Multiple Weights */
19-
@font-face {
20-
font-family: "Orbitron";
21-
src: url('/Orbitron/Orbitron-VariableFont_wght.ttf') format("truetype-variations");
22-
font-weight: 400 900;
23-
font-style: normal;
24-
font-display: swap;
25-
}
26-
27-
@font-face {
28-
font-family: "Orbitron";
29-
src: url('/Orbitron/static/Orbitron-Regular.ttf') format("truetype");
30-
font-weight: 400;
31-
font-style: normal;
32-
font-display: swap;
33-
}
34-
35-
@font-face {
36-
font-family: "Orbitron";
37-
src: url('/Orbitron/static/Orbitron-Medium.ttf') format("truetype");
38-
font-weight: 500;
39-
font-style: normal;
40-
font-display: swap;
41-
}
42-
43-
@font-face {
44-
font-family: "Orbitron";
45-
src: url('/Orbitron/static/Orbitron-SemiBold.ttf') format("truetype");
46-
font-weight: 600;
47-
font-style: normal;
48-
font-display: swap;
49-
}
50-
51-
@font-face {
52-
font-family: "Orbitron";
53-
src: url('/Orbitron/static/Orbitron-Bold.ttf') format("truetype");
54-
font-weight: 700;
55-
font-style: normal;
56-
font-display: swap;
57-
}
58-
59-
@font-face {
60-
font-family: "Orbitron";
61-
src: url('/Orbitron/static/Orbitron-ExtraBold.ttf') format("truetype");
62-
font-weight: 800;
63-
font-style: normal;
64-
font-display: swap;
65-
}
66-
67-
@font-face {
68-
font-family: "Orbitron";
69-
src: url('/Orbitron/static/Orbitron-Black.ttf') format("truetype");
70-
font-weight: 900;
71-
font-style: normal;
72-
font-display: swap;
73-
}
9+
/* Fonts are now loaded dynamically via JavaScript in FontLoader component */
7410

7511
/* Terminal cursor animation */
7612
@keyframes cursor-blink {

0 commit comments

Comments
 (0)