添加自定义字体功能

matsuzaka-yuki · matsuzaka-yuki · commit 92d84e6984bc · 2025-09-16T17:24:12.000+08:00
diff --git a/_frontmatter.json b/_frontmatter.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "mizuki",
 	"type": "module",
-	"version": "4.9.2",
+	"version": "4.9.3",
 	"scripts": {
 		"dev": "astro dev",
 		"start": "astro dev",
diff --git a/public/assets/font/ZenMaruGothic-Medium.ttf b/public/assets/font/ZenMaruGothic-Medium.ttf
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,7 +1,7 @@
 ---
 
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import { footerConfig, profileConfig } from "../config";
 import { url } from "../utils/url-utils";
 
@@ -38,7 +38,7 @@ if (footerConfig.enable) {
         <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br>
         Powered by
         <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
-        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">Mizuki</a>&nbsp; Version <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">4.9.2<br>
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">Mizuki</a>&nbsp; Version <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">4.9.3<br>
         
 
     </div>
diff --git a/src/config.ts b/src/config.ts
@@ -1,4 +1,3 @@
-import { factory } from "typescript";
 import type {
 	AnnouncementConfig,
 	CommentConfig,
@@ -31,6 +30,7 @@ export const siteConfig: SiteConfig = {
 		hue: 210, // 主题色的默认色相，范围从 0 到 360。例如：红色：0，青色：200，蓝绿色：250，粉色：345
 		fixed: false, // 对访问者隐藏主题色选择器
 	},
+
 	translate: {
 		enable: true, // 启用翻译功能
 		service: "client.edge", // 使用 Edge 浏览器翻译服务
@@ -118,7 +118,7 @@ export const siteConfig: SiteConfig = {
 		enable: true, // 启用目录功能
 		depth: 3, // 目录深度，1-6，1 表示只显示 h1 标题，2 表示显示 h1 和 h2 标题，依此类推
 	},
-	generateOgImages: true, // 启用生成OpenGraph图片功能
+	generateOgImages: false, // 启用生成OpenGraph图片功能,注意开启后要渲染很长时间，不建议本地调试的时候开启
 	favicon: [
 		// 留空以使用默认 favicon
 		// {
@@ -127,6 +127,13 @@ export const siteConfig: SiteConfig = {
 		//   sizes: '32x32',              // 可选，图标大小
 		// }
 	],
+
+	// 字体配置
+	font: {
+		zenMaruGothic: {
+			enable: true, // 启用全局圆体
+		},
+	},
 };
 export const fullscreenWallpaperConfig: FullscreenWallpaperConfig = {
 	enable: true, // 启用全屏壁纸功能,非Banner模式下生效
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -208,7 +208,7 @@ const bannerOffset =
 
 
 	</head>
-	<body class=" min-h-screen " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner}]}
+	<body class=" min-h-screen " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner, "zen-maru-gothic-enabled": siteConfig.font.zenMaruGothic.enable}]}
 		  data-overlayscrollbars-initialize
 	>
 		<!-- 页面顶部渐变高光效果 - 只在full和semifull模式下显示 -->
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
@@ -270,7 +270,7 @@ const transparentClass = shouldEnableTransparency
             <div class="w-4/5 lg:w-3/4 text-center mb-0">
                 <div class="flex flex-col">
                     {siteConfig.banner.homeText?.title && (
-                        <h1 class="banner-title text-6xl lg:text-8xl font-bold text-white drop-shadow-lg mb-2 lg:mb-4">
+                        <h1 class="banner-title text-6xl lg:text-8xl text-white drop-shadow-lg mb-2 lg:mb-4">
                             {siteConfig.banner.homeText.title}
                         </h1>
                     )}
@@ -417,6 +417,7 @@ const transparentClass = shouldEnableTransparency
 .banner-title {
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
     animation: fadeInUp 1s ease-out;
+    font-weight: bold;
 }
 
 .banner-subtitle {
diff --git a/src/pages/_frontmatter.json b/src/pages/_frontmatter.json
diff --git a/src/pages/frontmatter.json b/src/pages/frontmatter.json
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -8,6 +8,22 @@
 /* 导入加密内容样式 */
 @import './encrypted-content.css';
 
+/* 导入 ZenMaruGothic-Medium 字体 */
+@font-face {
+  font-family: 'ZenMaruGothic-Medium';
+  src: url('/assets/font/ZenMaruGothic-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-display: swap;
+}
+
+/* 导入 GenEiGothic 字体 */
+@font-face {
+	font-family: "GenEiGothic";
+	src: url("/assets/font/GenEiGothicP.ttf") format("truetype");
+	font-weight: normal;
+	font-display: swap;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -17,6 +33,11 @@ html {
     scroll-behavior: smooth;
 }
 
+/* 当启用 ZenMaruGothic-Medium 字体时应用为全局字体 */
+.zen-maru-gothic-enabled {
+  font-family: 'ZenMaruGothic-Medium', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
 /* 页面顶部渐变高光效果 */
 .top-gradient-highlight {
     position: fixed;
diff --git a/src/styles/transition.css b/src/styles/transition.css
@@ -140,7 +140,6 @@ html.is-animating .transition-swup-fade {
 .onload-animation,
 .transition-slide-in,
 .card-animation {
-    will-change: transform, opacity;
     backface-visibility: hidden;
     -webkit-font-smoothing: antialiased;
 }
diff --git a/src/types/config.ts b/src/types/config.ts
@@ -20,6 +20,14 @@ export type SiteConfig = {
 		hue: number;
 		fixed: boolean;
 	};
+
+	// 添加字体配置
+	font: {
+		zenMaruGothic: {
+			enable: boolean; // 是否使用 ZenMaruGothic-Black 作为全局字体
+		};
+	};
+
 	translate?: {
 		enable: boolean; // 是否启用翻译功能
 		service?: string; // 翻译服务类型，如 'client.edge'

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mizuki",`
`3`	`3`	`"type": "module",`
`4`		`- "version": "4.9.2",`
	`4`	`+ "version": "4.9.3",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"dev": "astro dev",`
`7`	`7`	`"start": "astro dev",`
Original file line number	Diff line number	Diff line change
`@@ -208,7 +208,7 @@ const bannerOffset =`
`208`	`208`
`209`	`209`
`210`	`210`	`</head>`
`211`		`- <body class=" min-h-screen " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner}]}`
	`211`	`+ <body class=" min-h-screen " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner, "zen-maru-gothic-enabled": siteConfig.font.zenMaruGothic.enable}]}`
`212`	`212`	`data-overlayscrollbars-initialize`
`213`	`213`	`>`
`214`	`214`	`<!-- 页面顶部渐变高光效果 - 只在full和semifull模式下显示 -->`