مقدمه
استفاده از قلم های عالی می تواند برنامه شما را حرفه ای و جذاب به نظر برساند.
من می خواهم به اشتراک بگذارم که چگونه می توانید از فونت های Google در یک پروژه React JS با Tailwind CSS استفاده کنید تا به سایت خود ظاهری تازه بدهد. قلم ها نقش مهمی در طراحی دارند و به تنظیم لحن و خوانایی محتوای شما کمک می کنند.
امروز ، من شما را از طریق یک فرآیند گام به گام که همه چیز را پوشش می دهد-از نصب فونت های Google گرفته تا پیکربندی CSS Tailwind و استفاده از آنها در اجزای React شما.
چرا این مهم است
تایپوگرافی خوب می تواند تجربه کاربر را تقویت کند و حتی بر نحوه تعامل کاربران با سایت شما تأثیر بگذارد. فونت های Google رایگان ، یکپارچه سازی آسان هستند و طیف گسترده ای از سبک ها را ارائه می دهند که می تواند با هر دیدگاه طراحی مطابقت داشته باشد.
در همین حال ، Tailwind CSS به دلیل سادگی و سرعت آن هنگام ساختن طرح های سفارشی شناخته شده است.
هنگامی که من فونت های Google ، React JS و Tailwind CSS را با هم ترکیب می کنم ، پروژه هایی را ایجاد می کنم که هم از نظر بصری جذاب و هم قابل حفظ هستند.
طبق گفته W3Techs ، Google Fonts توسط درصد زیادی از وب سایت ها استفاده می شود.
این آمار نشان می دهد که این قلم ها چقدر قابل اعتماد و گسترده شده اند و اهمیت دانستن نحوه ادغام آنها در پروژه های مدرن را تقویت می کند.
راه اندازی یک پروژه React با Tailwind CSS
اگر یک پروژه جدید را شروع می کنید ، ممکن است از برنامه React یا Vite استفاده کنید. برای این مثال ، من فرض می کنم که شما از برنامه React Create استفاده می کنید.
پس از آماده شدن پروژه React ، می توانید Tailwind CSS را تنظیم کنید. در اینجا مختصراً از روند کار آورده شده است:
-
CSS Tailwind را نصب کنید
ترمینال خود را در پوشه پروژه باز کنید و اجرا کنید:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
-
پیکربندی CSS Tailwind
در تولید شماtailwind.config.js، شما باید مسیرهای همه پرونده های الگوی خود را مشخص کنید:
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
-
Tailwind را در CSS خود وارد کنید
خود را باز کنیدsrc/assets/main.cssپرونده و اضافه کردن دستورالعمل های Tailwind:
@tailwind base;
@tailwind components;
@tailwind utilities;
اکنون تنظیم شده اید تا از کلاسهای Tailwind CSS در پروژه React خود استفاده کنید.
اضافه کردن فونت های Google به پروژه خود
ادغام فونت های Google از دو طریق می تواند انجام شود: با اضافه کردن پیوندی به پرونده HTML یا وارد کردن آن در CSS. در اینجا نحوه انجام هر دو:
1. پیوند در پرونده HTML
می توانید پیوند Google Fonts را مستقیماً در خود اضافه کنید public/index.html پرونده به عنوان مثال ، اگر فونت “Open Sans” را انتخاب می کنید ، این کد را در داخل اضافه کنید tag:
rel="preconnect" href="https://fonts.googleapis.com">
rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
این روش ساده است و قلم را برای کل برنامه شما بار می کند.
2. واردات در پرونده CSS Tailwind خود را در جایی که خود دارید
از طرف دیگر ، می توانید فونت های Google را در پرونده CSS خود وارد کنید. موارد زیر را در بالای پرونده اصلی CSS خود اضافه کنید (مانند src/assets/main.css):
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
هر دو روش معتبر هستند. من معمولاً روش پیوند HTML را برای کنترل بهتر فرآیند بارگذاری انتخاب می کنم.
پیکربندی CSS Tailwind برای استفاده از فونت های Google
پس از در دسترس بودن فونت های Google ، باید به CSS Tailwind در مورد آنها اطلاع دهید.
خود را باز کنید tailwind.config.js پرونده و به روزرسانی theme.extend بخش برای شامل قلم انتخابی شما. به عنوان مثال:
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
fontFamily: {
sans: ['"Open Sans"', 'sans-serif'],
},
},
},
plugins: [],
}
این به Tailwind می گوید که از “Open Sans” به عنوان بخشی از پیش فرض استفاده کند sans خانواده قلم.
اکنون ، هر زمان که از آن استفاده می کنید font-sans کلاس در HTML یا JSX خود ، متن شما با استفاده از “Open Sans” نمایش داده می شود.
با استفاده از فونت های Google در مؤلفه های React
بیایید همه چیز را در یک جزء React جمع کنیم. در اینجا یک مثال ساده وجود دارد:
import React from 'react';
function App() {
return (
<div className="min-h-screen bg-gray-100 p-8">
<h1 className="text-4xl font-bold font-sans text-gray-900 mb-4">
Welcome to My App
h1>
<p className="text-lg font-sans text-gray-700">
I built this using React JS and styled it with Tailwind CSS, featuring the clean and modern look of Google Fonts.
p>
div>
);
}
export default App;
در این مثال ، font-sans کلاس قلم “باز” باز “را هم برای عنوان و هم در پاراگراف اعمال می کند. بقیه کلاسهای Tailwind به سبک کردن چیدمان و فاصله کمک می کنند.
نکات اضافی و بهترین روشها
-
فونت های از پیش بارگذاری:
برای بهبود زمان بار ، از پیش بارگذاری خود را در نظر بگیرید. می توانید یک لینک از پیش بار در HTML خود اضافه کنید:
rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
-
وزن قلم:
فقط وزنهای مورد نیاز خود را بارگیری کنید. این به کاهش میزان داده های کاربران شما برای بارگیری کمک می کند. Google Fonts به شما امکان می دهد مشخص کنید که کدام وزن در URL بارگیری می شود.
-
Fallbacks:
همیشه در صورت عدم بارگذاری فونت Google ، فونت های برگشتی را تعریف کنید. در Tailwind ، من این کار را با تنظیم پارامتر دوم در
fontFamilyآرایه -
عملکرد:
برای حسابرسی عملکرد برنامه خود از ابزارهایی مانند Lighthouse استفاده کنید. مهم است که سایت خود را سریع نگه دارید و بارگیری مناسب قلم بخشی از آن است.
-
آزمایش با قلم:
قلم های مختلف را امتحان کنید تا ببینید چه چیزی متناسب با طراحی شما است. Google Fonts یک مجموعه عظیم دارد و گاهی اوقات یک تغییر ساده می تواند تفاوت بزرگی در تجربه کاربر ایجاد کند.
متداول
آیا هنگام استفاده از فونت های Google باید در مورد سازگاری مرورگر نگران باشم؟
فونت های Google برای کار در تمام مرورگرهای مدرن طراحی شده اند. فقط اطمینان حاصل کنید که صحیح را شامل می شوید یا @import بیانیه در پروژه شما
چگونه می توانم سرعت بارگیری فونت های Google را بهبود ببخشم؟
توصیه می کنم استفاده از preconnect وت preload پیوندها در HTML شما. این به مرورگر اجازه می دهد تا فونت ها را سریعتر واکشی کند.
آیا می توانم از چندین قلم گوگل در یک پروژه واحد استفاده کنم؟
بله ، می توانید چندین فونت را با استفاده از چندگانه اضافه کنید برچسب ها در HTML یا وارد کردن آنها در CSS شما. فقط پیکربندی Tailwind خود را به روز کنید تا فونت های جدید را منعکس کنید.
اگر فونت من به درستی بارگیری نشود ، چه می شود؟
اطمینان حاصل کنید که پیوند یا واردات صحیح است ، هرگونه خطای شبکه را بررسی کنید و تأیید کنید که پیکربندی Tailwind شما برای استفاده از قلم تنظیم شده است.
منابع بیشتر
-
قلم های گوگل:
برای کشف انواع فونت های موجود ، به Google Fonts مراجعه کنید. این یک منبع خارق العاده برای یافتن نگاه مناسب برای پروژه شما است.
-
مستندات Tailwind CSS:
برای اطلاعات بیشتر در مورد نحوه سفارشی کردن طراحی خود و استفاده بیشتر از کلاسهای ابزار Tailwind ، مستندات Tailwind CSS را بررسی کنید.
-
مستندات واکنش:
برای بینش های بیشتر در مورد مؤلفه های ساختمان و مدیریت وضعیت ، مستندات React مکانی عالی برای شروع است.
-
ابزارهای حسابرسی عملکرد:
ابزارهایی مانند Google Lighthouse می توانند به شما در شناسایی و رفع مشکلات عملکرد از جمله بارگیری قلم کمک کنند.
پایان
ادغام فونت های Google با React JS و Tailwind CSS نه تنها جذابیت بصری سایت شما را تقویت می کند بلکه تجربه کلی کاربر را نیز بهبود می بخشد.
من فهمیدم که این تنظیم ساده می تواند یک برنامه اساسی را به چیزی تبدیل کند که بسیار تصفیه و حرفه ای تر باشد.
با راهنمای گام به گام و نکات ارائه شده در اینجا ، اکنون همه چیز را برای شروع آزمایش با قلم در پروژه های خود دارید.
قبل از اینکه من بپیچم ، دوست دارم افکار شما را بشنوم: هنگام کار با فونت های Google در React JS با Tailwind CSS با چه چالش ها یا ایده های خلاقانه ای روبرو شده اید؟
