چگونه فونت دلخواه به سایت خود اضافه کنیم؟ How To Add Custom Font To My Site

جلسه 16 دوره طراحی سایت - بخش دوم - مهدی یار منصوری - Mahdiar Mansouri سرفصل های ویدیو جلسه شانزدهم : چگونه به وبسایت خود فونت دلخواه اضافه کنیم؟ How To Add Custom Font To My Site فونت آیکن چیست؟ چگونه از فونت آیکن ها استفاده کنیم؟ What Is Font Icon And How To Use It مفهوم CDN چیست، و چه تاثیری در سرعت لود سایت دارد؟ What Is CDN? And How Does It Effect Speed Page Load ==================================== برای اضافه کردن فونت دلخواه از دستور font-face استفاده میکنیم، این دستور مانند دستور keyframes میمونه و داخل سلکتور خاصی نوشته نمیشه بلکه به شکل مجزا و صرفا برای تعریف (نه استفاده) یک فونت خاص بکار میره، برای تعریف فونت جدید بعد از نوشتن دستور font-face داخل بلاک کد CSS مون لازمه به چند ویژگی CSS مقدار بدیم من جمله font-family، ویژگی font-family اینجا به منظور تعریف یک اسم جدید برای فونتی که داریم به پروژه اضافه میکنیم استفاده میشه و ما میتونیم برای فونتمون یک نام دلخواه استفاده کنیم تا بعد از این بتونیم به هر عنصری که خواستیم این فونت رو نسبت بدیم به این شکل که بعدا عنصر مورد نظر که میخوایم این فونت رو داشته باشه رو انتخاب میکنیم و با دستور font-family بهش اسمی که برای فونتمون انتخاب کردیم رو نسبت میدیم ویژگی دیگه ای که باید داخل font-face بهش مقدار بدیم ویژگی src هست، این ویژگی برای تعریف آدرس فونتی که میخوایم اون رو اضافه کنیم به کار میره و برای اینکار از متد url استفاده میکنیم، همچنین میتونیم بعد از url با یک فاصله متد format رو قرار بدیم و فورمت فونت مورد نظر رو هم تعریف کنیم. همچنین برای اینکه وزن های مختلفی از یک فونت رو به پروژه اضافه کنیم میتونیم توی font-face به یک ویژگی دیگه هم مقدار بدیم و اون font-weight هست برای اضافه کردن چند وزن دلخواه از یک فونت لازمه برای هر وزن یک font-face جداگانه بنویسیم ، توی این font-face های جداگانه باید font-weight و همچنین src ها متفاوت باشن، یعنی ما از اسم یا همون font-family یکسان برای همه font-face ها استفاده میکنیم اما بهشون font-weight مختلف میدیم و همچنین Src ها هم فرق میکنه چون فایل های وزن های مختلف باهم فرق میکنه بعد از اضافه کردن فونت دلخواه یاد میگیریم که فونت آیکن ها چی هستند و چطور میتونیم از اونها توی وبسایتمون استفاده کنیم، فونت آیکن ها مجموعه آیکن های مختلف و کاربردی هستن که طراحان اون ها رو به شکل "فونت" در آوردن تا هم مثل عکس حجیم نباشه و هم لود شدنش سرعت زیادی رو نگیره و همچنین مثل متن بتونیم رنگ و ویژگی های اونها رو بر حسب نیاز (مثلا روی هاور) تغییر بدیم، برای استفاده کردن از فونت آیکن ها باید یک مجموعه فونت آیکن رو انتخاب کنیم (مثل font-awesome یا bootstrap-icon یا material design icon) سپس فایل های اون مجموعه رو دانلود کنیم و فایل CSS ش رو به پروژه لینک کنیم (دقت کنید اگر از نسخه CSS آیکن ها استفاده میکنیم نباید آدرس و نسبت فایل و فولدری که بین CSS و فونت ها هست رو به هم بریزیم چون اونها هم داخل CSS خودشون از font-face استفاده میکنن و از طریق Src آدرس دهی انجام دادن تغییر فایل و فولدر ها میتونه باعث خراب شدن این آدرس و لود نشدن آیکن ها بشه) بعد از اضافه کردن فایل CSS مجموعه آیکن مون لازمه (یا به عبارتی بهتره) از یک تگ Inline مانند Span استفاده کنیم و از طریق اسم کلاس های اون مجموعه که توی لیست آیکن هاش در صفحه خود مجموعه آیکن منتشر شده میتونیم از ایکن ها استفاده کنیم، دقت کنید اکثر مجموعه آیکن ها یک کلاس مشترک رو هم برای تمام ایکن هاشون دارن مثلا نسخه های قدیمی تر font-awesome به این شکل هست که شما باید حتما ابتدا به Span خودتون یک کلاس fa بدین و بعد اسم ایکن مثلا fa-remove رو بهش به عنوان کلاس بدین پس کلاس های اسپن ما میشن fa fa-remove که این قاعده توی نسخه های جدید font-awesome مقداری متفاوت تر هست و توی ویدیو توضیح داده شده اما بحث CDN ، در حقیقت CDN ها شبکه های گسترده ای رو در سراسر دنیا دارن که مخصوص ارائه محتواس، این مجموعه ها کارایی های مختلفی دارن من جمله اینکه فایل هایی که خیلی توی سطح وب مورد استفاده قرار میگیره (مثل بوت استرپ یا جی کوئری) رو داخل خودشون قرار میدن و شما بجای اینکه این فایل هارو دانلود و لینک کنین به پروژه میتونین از لینک آنلاین اونها (همون CDN) استفاده کنین، اینکار باعث میشه تا اگر کاربر قبلا سایتی رو مشاهده کرده باشه که از اون CDN استفاده کرده باشه فایل مورد نظر برای کاربر دانلود نشه و سرعت لود سایت رو ارتفا میده امیدوارم از مشاهده این ویدیو استفاده برده باشید ارادتمند شما مهدیار منصوری

• #تحصیلات_و_یادگیری
• #html_css
• #آموزش_طراحی_سایت
• #آموزش
• #mdi
• #bootstrap_icon