feat: 应用科技字体方案(Space Grotesk + Inter + 思源黑体 + Fira Code)

- 引入Google Fonts: Space Grotesk(标题), Inter(正文), Noto Sans SC(中文), Fira Code(代码)
- 首页标题使用Space Grotesk,正文使用Inter+思源黑体
- 文档页统一应用新字体方案
- 全部开源字体,商用免费
This commit is contained in:
MengStack Dev 2026-10-03 02:57:55 +08:00
parent 1c8d1a05d1
commit 8bd75f1996
3 changed files with 25 additions and 3 deletions

View File

@ -111,6 +111,9 @@ export default defineConfig({
head: [ head: [
['link', { rel: 'icon', href: '/favicon.png' }], ['link', { rel: 'icon', href: '/favicon.png' }],
['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
['link', { href: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&family=Fira+Code:wght@400;500;600;700&display=swap', rel: 'stylesheet' }],
['meta', { property: 'og:image', content: '/og-image.png' }], ['meta', { property: 'og:image', content: '/og-image.png' }],
['meta', { name: 'theme-color', content: '#C8963E' }], ['meta', { name: 'theme-color', content: '#C8963E' }],
['script', {}, ` ['script', {}, `

View File

@ -424,8 +424,9 @@ watch(menuOpen, (open) => {
--home-shadow-lg:0 2px 4px rgba(60,45,15,.06),0 24px 56px -16px rgba(120,86,30,.22); --home-shadow-lg:0 2px 4px rgba(60,45,15,.06),0 24px 56px -16px rgba(120,86,30,.22);
--home-radius:16px; --home-radius:16px;
--home-maxw:1180px; --home-maxw:1180px;
--font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --font:"Inter","Noto Sans SC",ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace; --font-heading:"Space Grotesk","Noto Sans SC",ui-sans-serif,system-ui,sans-serif;
--mono:"Fira Code",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
} }
@media (min-width:1441px){ @media (min-width:1441px){
.home-root{--home-maxw:2560px} .home-root{--home-maxw:2560px}
@ -450,7 +451,7 @@ watch(menuOpen, (open) => {
.home-root *,.home-root *::before,.home-root *::after{box-sizing:border-box} .home-root *,.home-root *::before,.home-root *::after{box-sizing:border-box}
.home-root a{color:inherit;text-decoration:none} .home-root a{color:inherit;text-decoration:none}
.home-root img{max-width:100%;display:block} .home-root img{max-width:100%;display:block}
.home-root h1,.home-root h2,.home-root h3{line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em} .home-root h1,.home-root h2,.home-root h3{line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em;font-family:var(--font-heading)}
.home-root p{margin:0} .home-root p{margin:0}
.home-wrap{max-width:var(--home-maxw);margin:0 auto;padding:0 24px} .home-wrap{max-width:var(--home-maxw);margin:0 auto;padding:0 24px}

View File

@ -12,6 +12,11 @@
--ms-cream: #FDF8EF; --ms-cream: #FDF8EF;
--ms-cream-dark: #F5EDD8; --ms-cream-dark: #F5EDD8;
/* Typography */
--vp-font-base: "Inter", "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
--vp-font-heading: "Space Grotesk", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
--vp-font-mono: "Fira Code", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
/* Override VitePress brand colors */ /* Override VitePress brand colors */
--vp-c-brand-1: var(--ms-gold); --vp-c-brand-1: var(--ms-gold);
--vp-c-brand-2: var(--ms-gold-dark); --vp-c-brand-2: var(--ms-gold-dark);
@ -20,6 +25,19 @@
--vp-c-brand-soft-2: rgba(200, 150, 62, 0.25); --vp-c-brand-soft-2: rgba(200, 150, 62, 0.25);
} }
/* Apply custom fonts to VitePress */
body {
font-family: var(--vp-font-base) !important;
}
.vp-doc h1, .vp-doc h2, .vp-doc h3, .vp-doc h4, .vp-doc h5, .vp-doc h6 {
font-family: var(--vp-font-heading) !important;
}
.vp-doc code, .vp-doc pre, .vp-doc kbd {
font-family: var(--vp-font-mono) !important;
}
/* ============ NAV BAR ============ */ /* ============ NAV BAR ============ */
.VPNav { .VPNav {
backdrop-filter: blur(12px); backdrop-filter: blur(12px);