我剛剛創建了一個 nextjs 應用程序,但遇到了問題,我無法導入自定義字體,我嘗試添加 ttg 文件並使用 @fontface,但字體不起作用。請幫忙
這是我的 globals.css 檔案
@tailwind base; @tailwind components; @tailwind utilities; @font-face { font-family: 'bornStrong'; src: url(/public/fonts/BornStrong-Regular.ttf); } @font-face { font-family: 'heywow'; src: url(/public/fonts/HeyWow-Regular.ttf); } html, body { font-family: 'heywow'; } h1, h2, h3 { font-family: 'heywow'; } .main { width: 100vw; min-height: 100vh; position: fixed; display: flex; justify-content: center; padding: 120px 24px 160px 24px; pointer-events: none; } .main:before { background: #1c1d25; position: absolute; content: ""; z-index: 2; width: 100%; height: 100%; top: 0; } .main:after { content: ""; z-index: 1; position: absolute; width: 100%; height: 100%; top: 0; filter: invert(1); } .gradient { height: fit-content; z-index: 3; width: 100%; max-width: 640px; position: absolute; content: ""; width: 100%; height: 100%; filter: blur(100px) saturate(150%); top: 80px; opacity: 0.15; } @media screen and (max-width: 640px) { .main { padding: 0; } } /* Tailwind Styles */ .app { @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6; } .black_btn { @apply rounded-full border border-black bg-black py-1.5 px-5 text-white transition-all hover:bg-white hover:text-black text-center text-sm flex items-center justify-center; } .outline_btn { @apply rounded-full border border-black bg-transparent py-1.5 px-5 text-black transition-all hover:bg-black hover:text-white text-center text-sm flex items-center justify-center; } .head_text { @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl; } .orange_gradient { @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent; } .green_gradient { @apply bg-gradient-to-r from-green-400 to-green-500 bg-clip-text text-transparent; } .blue_gradient { @apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent; } .desc { @apply mt-5 text-lg text-gray-600 sm:text-xl max-w-2xl; } .search_input { @apply block w-full rounded-md border border-gray-200 bg-white py-2.5 pl-5 pr-12 text-sm shadow-lg font-medium focus:border-black focus:outline-none focus:ring-0; } .copy_btn { @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer; } .glassmorphism { @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-5; } .prompt_layout { @apply space-y-6 py-8 sm:columns-2 sm:gap-6 xl:columns-3; } /* Feed Component */ .feed { @apply mt-16 mx-auto w-full max-w-xl flex justify-center items-center flex-col gap-2; } /* Form Component */ .form_textarea { @apply w-full flex rounded-lg h-[200px] mt-2 p-3 text-sm text-gray-500 outline-0; } .form_input { @apply w-full flex rounded-lg mt-2 p-3 text-sm text-gray-500 outline-0; } /* Nav Component */ .logo_text { @apply max-sm:hidden font-semibold text-lg text-black tracking-wide; } .dropdown { @apply absolute right-0 top-full mt-3 w-full p-5 rounded-lg bg-white min-w-[210px] flex flex-col gap-2 justify-end items-end; } .dropdown_link { @apply text-sm text-gray-700 hover:text-gray-500 font-medium; } /* PromptCard Component */ .prompt_card { @apply flex-1 break-inside-avoid rounded-lg border border-gray-300 bg-white/20 bg-clip-padding p-6 pb-4 backdrop-blur-lg backdrop-filter md:w-[360px] w-full h-fit; } .flex-center { @apply flex justify-center items-center; } .flex-start { @apply flex justify-start items-start; } .flex-end { @apply flex justify-end items-center; } .flex-between { @apply flex justify-between items-center;
這是我的 tailwind.config.js 檔案
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { colors: { 'primary-orange': '#FF5722', } }, }, plugins: [], }
這是我的layout.jsx 文件,
import '@styles/globals.css'; const layout = () => { return ( <div> <h1>AUHISI</h1> </div> ); } export default layout;
這是我的 page.jsx 檔案
import '@styles/globals.css'; const Home = () => { return ( <div> <h1>Page</h1> </div> ); } export default Home;
我嘗試將 tailwind 新增為 className="font-bornStrong"
,但仍然不起作用。
我還嘗試在 tailwind.config.js 中新增該字型。
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { fontFamily: { bornStrong: ['bornStrong'], heywow: ['heywow'], }, colors: { 'primary-orange': '#FF5722', } }, },
您遇到的錯誤可能是由於在
globals.css
檔案中為自訂字體指定的路徑不正確造成的。您使用路徑/public/fonts/
來引用字體文件,但此路徑在Next.jsn 中不正確,要解決此問題,您需要更新全域中的字體文件路徑.css 文件,您可以從字型檔案路徑中刪除/public/ 部分。在
tailwind.config.js
檔案中,您已定義字體系列,但尚未在 fontFamily 部分中啟用它們