از زمان راه‌اندازی Cruip، هزاران توسعه‌دهنده قالب‌های ما را خریداری کرده‌اند و بسیاری از آنها از ما درخواست کمک کرده‌اند تا آنها را بر اساس نیازهایشان شخصی‌سازی کنیم.
ما عاشق کمک به مشتریان خود برای دستیابی به بهترین نتیجه ممکن با محصولات خود هستیم، اما از آنجایی که ما یک تیم کوچک دو نفره هستیم و پایگاه مشتریان ما همچنان در حال رشد است (خوشبختانه)، تصمیم گرفتیم مجموعه ای از مقالات/راهنماها را بر اساس رایج ترین سوالات سفارشی سازی شما شروع کنیم. به این ترتیب، امیدواریم بخشی از زمان خود را بهینه کنیم (که بتوانیم برای ایجاد محصولات بیشتر سرمایه گذاری کنیم) و خدمات بهتری را به شما ارائه دهیم!
بیایید با یک راهنما شروع کنیم چگونه فونت های قالب های Tailwind CSS ساخته شده با Next.js را سفارشی کنیم. گام به گام، شما را از طریق مدیریت فونت راهنمایی می کنیم و به شما نشان می دهیم که چگونه نسخه های سفارشی الگوها را ایجاد کنید که آنها را واقعاً در نوع خود بی نظیر کند.
همانطور که می دانید، نسخه های React قالب های Cruip با آن ساخته شده اند Tailwind CSS و استفاده کنید فهرست برنامه جدید Next.js 13 (روتر برنامه). علاوه بر این، در زمان نوشتن، همه قالب ها از فونت های گوگل و در برخی موارد از فونت های محلی استفاده می کنند. بنابراین، نحوه افزودن فونت جدید گوگل، جایگزینی فونت فعلی، استفاده از فونت های محلی و حتی استفاده از فونت های سیستمی برای بهینه سازی عملکرد وب سایت خود را نشان خواهیم داد.
نحوه استفاده از فونت ها در قالب های Cruip
قبل از بررسی مثال‌های عملی، اجازه دهید ابتدا مروری کوتاه بر نحوه استفاده از فونت‌ها در قالب‌های Cruip داشته باشیم. به طور کلی، ما را تعریف می کنیم فونت اصلی روی تگ بدنه. در مواردی که از فونت ثانویه نیز استفاده می کنیم، مستقیماً آن را روی هر عنصر با استفاده از کلاس های Tailwind CSS تعریف می کنیم.
برای مثال الگوی Tidy را در نظر بگیرید. فونت پایه Inter است که بر روی برچسب بدنه با علامت تعریف شده است font-inter کلاس اما برای سرفصل ها از فونت سریف Playfair Display استفاده می کنیم که روی هر عنصر تعریف شده است (h1، h2، و h3) با استفاده از font-playfair-display کلاس
حال، ممکن است کسی اعتراض کند و بپرسد که چرا ما فونت را برای سرفصل‌ها مستقیماً در CSS تعریف نکرده‌ایم تا از تکرار آن برای هر عنصر جلوگیری کنیم. در واقع انتخاب معقولی بود، اما ما ترجیح دادیم فلسفه Tailwind CSS را بپذیریم، که استفاده از کلاس‌ها را برای تعریف سبک‌های عنصر تشویق می‌کند. علاوه بر این، به این ترتیب، به راحتی می توان با تغییر دادن کلاس، به فونت دیگری برای سرفصل ها سوئیچ کرد.
افزودن فونت گوگل جدید به قالب
فرض کنید می‌خواهیم فونت سومی را برای بخش‌های خاصی از قالب اضافه کنیم، و آن فونت چیزی است که نمی‌توانی انجام دهی. ابتدا باید فونت را با استفاده از بارگذاری کنیم next/font. به طور معمول، ما از اصلی استفاده می کنیم layout.tsx برای این پرونده تشکیل دهید با این حال، اگر می دانیم که فقط در یک جزء خاص به این فونت نیاز داریم، تمرین خوبی است که آن را مستقیماً در آن مؤلفه بارگذاری کنیم. به این ترتیب از بارگذاری فونت های غیر ضروری در کل وب سایت جلوگیری می کنیم.
برای استفاده از فونت در تمام صفحات، اجازه دهید کد زیر را به آن اضافه کنیم layout.tsx فایل:
import { Nothing_You_Could_Do } from 'next/font/google'
با کد بالا فونت را وارد کردیم هیچ کاری نمی توانستید انجام دهید. به خاطر داشته باشید که برای فونت های گوگل با چند کلمه در نام خود، باید فاصله ها را با زیرخط جایگزین کرد و هر کلمه باید با یک حرف بزرگ شروع شود. در این مورد، فونت “Nothing You Could Do” نامیده می شود، بنابراین باید از آن استفاده کنیم Nothing_You_Could_Do برای واردات آن اگر در مورد نام فونت مطمئن نیستید، همیشه می توانید صادرات را بررسی کنید next/font/google در داخل node_modules پوشه
حالا بیایید یک متغیر برای فونت تعریف کنیم:
const nycd = Nothing_You_Could_Do({
subsets: ['latin'],
variable: '--font-nycd',
weight: '400',
display: 'swap'
})
نام متغیر دلخواه است اما باید با آنچه در فایل پیکربندی Tailwind CSS تعریف می‌کنیم، مطابقت داشته باشد.
بعد، بیایید متغیر را به عنصر ظرفی که می‌خواهیم از فونت استفاده کنیم، اضافه می‌کنیم، که در این مورد body عنصر:
<body className={`${inter.variable} ${playfair.variable} ${nycd.variable} font-inter antialiased bg-white text-slate-800 tracking-tight`}>
در نهایت باید فونت را به فایل پیکربندی Tailwind CSS اضافه کنیم. برای انجام این کار، را باز کنید tailwind.config.js فایل و اضافه کنید font-nycd متغیر به موضوع ما:
fontFamily: {
inter: ['var(--font-inter)', 'sans-serif'],
'playfair-display': ['var(--font-playfair-display)', 'serif'],
'nycd': ['var(--font-nycd)', 'cursive'],
}
عالی! اکنون می توانیم فونت را روی هر عنصر HTML به سادگی با اضافه کردن آن استفاده کنیم font-nycd کلاس، به عنوان مثال:
<p className="font-nycd">Hello world!</h1>
جایگزینی یک فونت گوگل با فونت دیگر
بیایید به آن بچسبیم مرتب قالب و فرض کنید می خواهیم آن را جایگزین کنیم نمایشگر Playfair فونت مورد استفاده برای سرفصل ها با فونت Poppins.
اول، در layout.tsx فایل، ما وارد کردن فونت را تغییر می دهیم. پس این خط:
import { Inter, Playfair_Display } from 'next/font/google'
این می شود:
import { Inter, Poppins } from 'next/font/google'
بعد، این بلوک کد را حذف می کنیم:
const playfair = Playfair_Display({
subsets: ['latin'],
variable: '--font-playfair-display',
display: 'swap'
})
و آن را با این جایگزین کنید:
const poppins = Poppins({
subsets: ['latin'],
variable: '--font-poppins',
display: 'swap'
})
در نهایت، در layout.tsx فایل را جایگزین می کنیم playfair متغیر با poppins. پس این خط:
<body className={`${inter.variable} ${playfair.variable} font-inter antialiased bg-white text-slate-800 tracking-tight`}>
این می شود:
<body className={`${inter.variable} ${poppins.variable} font-inter antialiased bg-white text-slate-800 tracking-tight`}>
حالا بیایید آن را ویرایش کنیم tailwind.config.js فایل و فونت ها را در آنجا نیز جایگزین کنید. بنابراین این بلوک کد:
fontFamily: {
inter: ['var(--font-inter)', 'sans-serif'],
'playfair-display': ['var(--font-playfair-display)', 'serif'],
},
تغییرات به این:
fontFamily: {
inter: ['var(--font-inter)', 'sans-serif'],
poppins: ['var(--font-poppins)', 'sans-serif'],
},
مرحله آخر استفاده از کلاس مناسب برای فونت Poppins در هر تگ عنوان است. برای انجام سریع و دقیق این کار، می‌توانیم یک جستجوی سراسری برای رشته «font-playfair-display» انجام دهیم و از تابع «Replace all» برای جایگزینی آن با «font-poppins» استفاده کنیم. به این ترتیب، ما همه نمونه های را جایگزین خواهیم کرد font-playfair-display با font-poppins. معمولاً همه ویرایشگرها (ما از VS Code استفاده می کنیم) یک ویژگی برای جستجوی یک رشته در فایل های خاص دارند. از آنجایی که می خواهیم جایگزین را فقط در فایل های .tsx انجام دهیم، می توانیم آن را مشخص کنیم *.tsx در فیلد «فایل‌ها برای گنجاندن»
استفاده از فونت محلی
برای افزودن کمی منحصر به فرد بودن به طراحی قالب خود، از برخی فونت‌ها استفاده کرده‌ایم که در کتابخانه فونت‌های Google موجود نیستند، مانند Aspekta یا Cabinet Grotesk.
این فونت ها در دسترس هستند woff2 فرمت و به راحتی در هر قالب Next.js دیگری گنجانده شود. بیایید بلافاصله به یک مثال عملی بپردازیم.
فرض کنید می خواهیم از نسخه پررنگ فونت Aspekta برای سرفصل های قالب Tidy استفاده کنیم. ما فونت را از مخزن Github دانلود می کنیم و فایل را اضافه می کنیم Aspect-700.woff2 در public/fonts پوشه پروژه ما
بعد، فونت را وارد می کنیم layout.tsx فایل مانند این:
import localFont from 'next/font/local'
const aspekta = localFont({
src: [
{
path: '../public/fonts/Aspekta-700.woff2',
weight: '700',
},
],
variable: '--font-aspekta',
display: 'swap',
})
بیایید متغیر را اضافه کنیم aspekta به کلاس های body عنصر:
<body className={`${inter.variable} ${aspekta.variable} ${nycd.variable} font-inter antialiased bg-white text-slate-800 tracking-tight`}>
در این مرحله، اجازه دهید تغییر دهید tailwind.config.js فایل مانند این:
fontFamily: {
inter: ['var(--font-inter)', 'sans-serif'],
'aspekta': ['var(--font-aspekta)', 'sans-serif'],
}
در نهایت، برای استفاده از فونت جدید برای سرفصل ها، باید کلاس را جایگزین کنیم font-playfair-display با font-aspekta در هر تگ عنوان یک بار دیگر، ما یک جستجوی سراسری برای رشته “font-playfair-display” انجام می دهیم و از تابع “Replace all” برای جایگزینی آن با “font-aspekta” استفاده می کنیم.
استفاده از فونت سیستم
در این آخرین مرحله از راهنما، نحوه و زمان استفاده از فونت سیستم برای وب سایت Next.js خود را توضیح خواهیم داد.
اگرچه Next.js 13 مدیریت بهینه بارگیری فونت را تضمین می کند، از مشکلات تغییر چیدمان تجمعی (CLS) جلوگیری می کند، استفاده از فونت های سیستم اضافی را ارائه می دهد. مزایایی از نظر عملکرد و سرعت بارگذاری سایت. از آنجایی که این فونت ها قبلاً در سیستم عامل یا دستگاه نصب شده اند، نیازی به دانلود اضافی مانند فونت های Google یا فونت های محلی ندارند.
علاوه بر این، استفاده از فونت سیستمی این امر را تضمین می کند ظاهر متن با بقیه سیستم عامل یا دستگاه سازگار است. این مطمئناً یک مزیت است، اما می تواند یک محدودیت نیز باشد زیرا فونت سیستم ممکن است با طراحی وب سایت شما هماهنگ نباشد. به عبارت دیگر، ممکن است کنترل کاملی بر طراحی تایپوگرافی سایت خود نداشته باشید.
عامل دیگری که باید در نظر گرفت این است ممکن است فونت های سیستم از کاراکترها یا نمادهای خاص پشتیبانی نکنند ممکن است بخواهید استفاده کنید. در چنین مواردی، ممکن است لازم باشد به فونت های خارجی یا محلی متوسل شوید.
در نهایت، اگر طراحی متن سفارشی در اولویت نباشد و هدف اصلی اطمینان از خوانایی خوب و ارائه منسجم باشد، استفاده از فونت سیستمی می تواند یک انتخاب عملی باشد. وب‌سایت‌های محبوب بسیاری از فونت‌های سیستمی استفاده می‌کنند، از GitHub گرفته تا Booking، از Wikipedia تا Medium، بنابراین شما در شرکت خوبی خواهید بود!
برای اطلاعات بیشتر، خواندن این مقاله عالی را توصیه می کنیم.
استفاده از فونت های سیستم بسیار ساده است: هیچ وارد کردن فونت لازم نیست! بنابراین، بیایید فرض کنیم می خواهیم فقط از فونت های سیستمی در Tidy استفاده کنیم. برای انجام این کار، بلوک های کد زیر را از قسمت حذف می کنیم layout.tsx فایل:
import { Inter, Playfair_Display } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
display: 'swap'
})
const playfair = Playfair_Display({
subsets: ['latin'],
variable: '--font-playfair-display',
display: 'swap'
})
بیایید آن را نیز حذف کنیم inter و playfair متغیرهای کلاس های the body عنصر، و همچنین font-inter کلاس:
<body className={`antialiased bg-white text-slate-800 tracking-tight`}>
بعد، در tailwind.config.js فایل، ما می‌توانیم با خیال راحت کل شی‌ای را که خانواده فونت‌های مورد استفاده را تعریف می‌کند حذف کنیم:
fontFamily: {
inter: ['var(--font-inter)', 'sans-serif'],
'playfair-display': ['var(--font-playfair-display)', 'serif'],
},
در نهایت، با استفاده از یک جستجوی سراسری، تمام کلاس‌های غیرضروری را که به‌عنوان «font-playfair-display» تعریف شده‌اند، حذف می‌کنیم.
پس از انجام این مراحل، پیشنهاد می کنیم تایپوگرافی وب سایت خود را بر روی دستگاه ها و سیستم عامل های مختلف آزمایش کنید تا مطمئن شوید که طراحی متن انتظارات شما را برآورده می کند.
نتیجه گیری
انتخاب فونت مناسب می تواند به طور قابل توجهی بر تجربه کلی کاربر تأثیر بگذارد و پیام مورد نظر را به طور موثر منتقل کند. چه فونت های گوگل را انتخاب کنید، چه فونت های محلی یا فونت های سیستمی، هر گزینه مزایا و ملاحظات خاص خود را دارد.
ما امیدواریم که این راهنما برای نشان دادن نحوه سفارشی کردن قالب‌های Tailwind CSS به شما مفید بوده باشد. کد نویسی مبارک!
