iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0

這邊用到的字型來自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 官網文件


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


上一篇
DAY10 - 引入靜態資源
下一篇
DAY12 - 建立最簡響應式頁面
系列文
中年大叔(40+)前端自學筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言