DAY11 - 網頁使用自訂的字型 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 11

自我挑戰組

中年大叔(40+)前端自學筆記系列第 11 篇

DAY11 - 網頁使用自訂的字型

15th鐵人賽中年大叔自學筆記萬年菜雞

不惑的胖虎

2023-09-26 08:34:07

420 瀏覽

分享至

這邊用到的字型來自Google Font 挑一款自己喜歡的字型吧

編輯 app\fonts.js 檔案內如下:

import { Orbitron } from "next/font/google";

export const orbitron = Orbitron({
    subsets: ["latin"],
});

把自訂字型套用到組件(compoment)

編輯 components\Heading.jsx 檔案內如下:

import { orbitron } from '@/app/fonts'

function Heading({ children }) {
    return (
        <h1 className={`font-bold text-2xl pb-3 ${orbitron.className}`}>{children}</h1>
    )
}
export default Heading

執行畫面:

做完上面的步驟，感覺要使用自訂字型有點麻煩，className的寫法變得有點複雜

className={`font-bold text-2xl pb-3 ${orbitron.className}`}>

想要直接在 Tailwind Css內使用 如下

className={font-orbitron  font-bold text-2xl pb-3}>

在Tailwind Css 設定自訂字型

編輯 app\fonts.js 檔案內容如下:

import { Orbitron } from "next/font/google";

export const orbitron = Orbitron({
    subsets: ["latin"],
    variable: "--font-orbitron",
});

編輯 app\layout.jsx 檔案內容如下:

import Link from "next/link";
import NavBar from "../components/NavBar";

import "./globals.css"
import { orbitron } from "./fonts";

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={orbitron.variable}>
            <body className="bg-orange-50  flex flex-col px-4 py-2 min-h-screen">
                <header>
                    <NavBar />
                </header>
                <main className="grow py-3">
                    {children}
                </main>
                <footer className="border-t py-3 text-center text-xs"> Game data and images courtesy of <a href="https://rawg.io/" target="__blank" className="text-orange-800 hover:underline">RAWG</a></footer>
            </body>
        </html>
    )
}

編輯 tailwind.config.js 檔案內容如下:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./app/**/*.{js,jsx,tsx}", "./components/**/*.{js,jsx,tsx}"],
    theme: {
        extend: {
            fontFamily: {
                orbitron: ["var(--font-orbitron)", "sans-serif"],
            },
        },
    },
    plugins: [],
};

編輯 components\Heading.jsx 檔案內容如下:

import React from 'react'
// 把下一行註解掉
// import { orbitron } from '@/app/fonts'

function Heading({ children }) {
{/* 在className 直接使用自訂字型 */}
    return (<h1 className="font-orbitron font-bold text-3xl pb-3">{children}</h1>

    )
}

export default Heading

完成以上步驟，就可以直接在className裡面使用自訂字型!(也會有自動提示)

更多自訂字型的細節可以參考Next.js官網這篇With Tailwind CSS

在Taiwind Css 新增預設字型

上面已經完成，在特定的組件或網頁上設定自訂字型
最後要實作的功能，更改網頁的預設字體

編輯 app\fonts.js 檔案內容如下:

import { Orbitron, Exo_2 } from "next/font/google";

export const orbitron = Orbitron({
    subsets: ["latin"],
    variable: "--font-orbitron",
});

export const exo2 = Exo_2({
    subsets: ["latin"],
    variable: "--font-exo2",
});

編輯 app\layout.jsx 檔案內容如下:

import Link from "next/link";
import NavBar from "../components/NavBar";

import "./globals.css"
import { exo2, orbitron } from "./fonts";

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={`${exo2.variable}  ${orbitron.variable}`}>
            <body className="bg-orange-50  flex flex-col px-4 py-2 min-h-screen">
                <header>
                    <NavBar />
                </header>
                <main className="grow py-3">
                    {children}
                </main>
                <footer className="border-t py-3 text-center text-xs"> Game data and images courtesy of <a href="https://rawg.io/" target="__blank" className="text-orange-800 hover:underline">RAWG</a></footer>
            </body>
        </html>
    )
}

編輯 tailwind.config.js 檔案內容如下

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./app/**/*.{js,jsx,tsx}", "./components/**/*.{js,jsx,tsx}"],
    theme: {
        extend: {
            fontFamily: {
                sans: ["var(--font-exo2)", "sans-serif"],
                orbitron: ["var(--font-orbitron)", "sans-serif"],
            },
        },
    },
    plugins: [],
};

目前完成的字體設定就兩組，一個用於標題的組件
一個就是預設字體，如果要加入更多的字體
就直接參考Taiwind Css 官網文件吧

大叔的鐵人賽第十一天結束 :)