feat: 应用科技字体方案(Space Grotesk + Inter + 思源黑体 + Fira Code)
- 引入Google Fonts: Space Grotesk(标题), Inter(正文), Noto Sans SC(中文), Fira Code(代码) - 首页标题使用Space Grotesk,正文使用Inter+思源黑体 - 文档页统一应用新字体方案 - 全部开源字体,商用免费
This commit is contained in:
parent
1c8d1a05d1
commit
8bd75f1996
@ -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', {}, `
|
||||||
|
|||||||
@ -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}
|
||||||
|
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user