学习如何自定义MkSaaS 模板中的字体
本文档涵盖了MkSaaS 模板中的字体系统，如何使用内置字体，以及如何添加和自定义您自己的字体。
MkSaaS 模板配备了精心选择的字体集，提供出色的可读性和视觉吸引力。字体系统包括：
默认情况下可用以下字体系列：
这些字体从 Google Fonts 加载，并在 src/assets/fonts/index.ts 文件中配置：
MkSaaS文档import {
Bricolage_Grotesque,
Noto_Sans,
Noto_Sans_Mono,
Noto_Serif,
} from 'next/font/google';
// 带有选定字重的 Noto Sans
export const fontNotoSans = Noto_Sans({
subsets: ['latin'],
display: 'swap',
variable: '--font-noto-sans',
weight: ['500', '600', '700'],
});
// Noto Serif
export const fontNotoSerif =
字体在根布局组件中应用到应用程序：
import {
fontBricolageGrotesque,
fontNotoSans,
fontNotoSansMono,
fontNotoSerif,
} from '@/assets/fonts';
import { cn } from '@/lib/utils';
// 在布局组件内部
<body
suppressHydrationWarning
className
注意 fontNotoSans.className 配置的是整个网站的默认字体，而其他字体作为 CSS 变量使用。
字体变量在全局 CSS 文件中定义，可以在您的 Tailwind CSS 类中使用：
@theme inline {
/* font */
--font-sans: var(--font-noto-sans);
--font-mono: var(--font-noto-sans-mono);
--font-serif: var(--font-noto-serif);
--font-bricolage: var(--font-bricolage-grotesque);
/* 其他变量 */
}您可以通过两种方式向网站添加自定义字体：使用 Google Fonts 或本地字体文件。
要添加新的 Google Font：
next/font/google 导入字体例如，要添加 Roboto 字体：
import { Roboto } from 'next/font/google';
export const fontRoboto = Roboto({
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto',
weight: ['400',
您可以浏览 Google Fonts 网站为您的网站找到完美的字体。
要使用本地字体文件：
src/assets/fonts 目录中next/font/local 导入 localFont例如：
import localFont from 'next/font/local';
// 本地字体示例
export const fontCustom = localFont({
src: './CustomFont.woff2',
variable: '--font-custom',
});您可以从 Google Webfonts Helper 下载字体文件。
添加新字体后，您需要：
import { fontCustom } from '@/assets/fonts';
// 在布局组件内部
<body
className={cn(
'size-full antialiased',
fontNotoSans.className, // 默认字体
fontNotoSerif.variable,
fontNotoSansMono.variable,
fontBricolageGrotesque.variable,
globals.css 中添加 CSS 变量：@theme inline {
/* font */
--font-sans: var(--font-noto-sans);
--font-mono: var(--font-noto-sans-mono);
--font-serif: var(--font-noto-serif);
--font-bricolage: var(--font-bricolage-grotesque);
--font-custom: var(--font-custom); /* 新字体变量 */
/* 其他变量 */
}要更改整个网站的默认字体：
className 属性而不是 fontNotoSans.className：<body
className={cn(
'size-full antialiased',
fontCustom.className, // 这现在是默认字体
fontNotoSans.variable, // Noto Sans 现在作为变量可用
fontNotoSerif.variable,
fontNotoSansMono.variable,
fontBricolageGrotesque.variable
)}
>
{
下图显示的默认字体现在变成了自定义字体。
以下是如何在组件中使用不同字体的一些示例：
// 使用默认字体（无需指定）
Next.js 自动对 Google Fonts 进行子集化，仅包含您指定语言所需的字符，这提高了性能。
subsets 参数指定要包含的字符集：
export const fontNotoSans = Noto_Sans({
subsets: ['latin'], // 仅包含拉丁字符
// ...其他选项
});对于多语言网站，您可以包含其他子集：
export const fontNotoSans = Noto_Sans({
subsets: ['latin', 'cyrillic', 'greek'], // 支持多种字母表
// ...其他选项
});display 属性控制字体的加载和显示方式：
export const fontNotoSans = Noto_Sans({
display: 'swap', // 在自定义字体加载前使用后备字体
// ...其他选项
});选项包括：
'swap'：在自定义字体加载前显示后备字体（防止不可见文本）'block'：短暂显示不可见文本，然后后备字体，然后自定义字体'fallback'：类似于 swap 但超时时间更短'optional'：让浏览器根据连接情况决定是否使用自定义字体您可以指定要包含的字体字重以优化性能：
export const fontNotoSans = Noto_Sans({
weight: ['400', '500', '700'], // 仅包含常规、中等和粗体
// ...其他选项
});这对性能很重要，因为每个额外的字重都会增加需要下载的字体数据量。
现在您了解了如何在 MkSaaS 中使用字体，探索这些相关主题：
配置网站的核心设置