寫到現在才總算要把主題稍微拉回到 Next.js 了，不過這幾篇的設定主要會是集中在基礎的設定。
首先是設定字型設定，這次我選用 Noto Sans 字型跟 JetBrains Mono 兩個字型，有兩種下載方法：
一種是用 google 引入
import { Noto_Sans_TC, JetBrains_Mono } from 'next/font/google';
或是下載到本地再引入
import localFont from "next/font/local";
const notoSans = localFont({
src: "./fonts/NotoSansTC-VariableFont_wght.ttf",
variable: "--font-noto-sans",
weight: "100 900",
});
const jetbrainsMono = localFont({
src: "./fonts/JetBrainsMono-VariableFont_wght.ttf",
variable: "--font-jetbrains-mono",
weight: "100 900",
});
兩種都是可以的，這次我就用本地端的方法引入吧。
.
├── app
│ ├── fonts // <- 下載到本地的字型
│ │ ├── JetBrainsMono-VariableFont_wght.ttf
│ │ └── NotoSansTC-VariableFont_wght.ttf
│ │
│ ├── globals.css // <- 全域樣式設定
│ ├── layout.tsx // <- 載入字型
│ ├── page.tsx
// ...
└── tailwind.config.ts
在 layout.tsx 中：
// ...
import localFont from "next/font/local";
import "./globals.css";
const notoSans = localFont({
src: "./fonts/NotoSansTC-VariableFont_wght.ttf",
variable: "--font-noto-sans",
weight: "100 900",
});
const jetbrainsMono = localFont({
src: "./fonts/JetBrainsMono-VariableFont_wght.ttf",
variable: "--font-jetbrains-mono",
weight: "100 900",
});
// ...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
// 引入字體變數
className={`${notoSans.variable} ${jetbrainsMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}
引入字體後再到 global.css 中設定全域套用字體。
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */
body {
/* ... */
/* 套用字體 */
font-family: var(--font-jetbrains-mono), var(--font-noto-sans);
}
/* ... */
這樣全站就都套用字體了。
到這邊還沒有完全結束，還有一個問題，那就是在 Markdown 的 component 是沒有字體樣式的。
我解決方法是給 react-markdown 的 component 一個 className 叫 markdown-body，隨後再再 global.css 把樣式給進去。
import ReactMarkdown from "react-markdown";
// ...
export default function MarkdownBlock({
content,
}: Readonly<{ content: string }>) {
return (
<ReactMarkdown
className="markdown-body" // 給額外的 class
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeHighlight]}
>
{content}
</ReactMarkdown>
);
}
可以看到 markdown-body 已經給在 compoent 上面了。
接著在 global.css 加入樣式定義就好了：
@layer base {
.markdown-body {
font-family: var(--font-jetbrains-mono), var(--font-noto-sans) !important;
}
}
iThome鐵人賽
看影片追技術