آموزش کامل خاصیت فونت در CSS بخش اول

سلام و خسته نباشید خدمت کاربران محترم هایپرتمپ. امیدواریم روز خوبی رو  سپری کنید چون امروز قراره با یه آموزش خیلی پرمحتوا و پرکاربرد همراهتون باشیم. پس با ما باشید تا خاصیت فونت و فونت فیس را در سی اس اس فرا بگیرید.

استفاده از استایل های خاص برای صفحات وب گرافیک و زیبابی خاصی را به سایت شما میبخشد. استفاده از صفحات خالی چندان جالب نیست و یکی از گزینۀ های مخصوص برای جذب بازدید کننده نیز استفاده از استایل های زیبا و شیک است. به طوری که با استفاده از چند کد ساده بتوانید جذابیت را به سایت خود ببخشید.

استایل یا style یه فایل با فرمت css میباشد. که به طور کامل یعنی Cascading Style Sheets. شما با فراخوانی این فایل یا فایل ها میتوانید به آسانی تغییراتی زیادی در صفحه HTML خود ایجاد کنید. رنگ تصویرزمینه را تغییر بدهید، سایز فونت ها را تغییر بدهید، اندازه، طول و عرض عناصر را تعیین کنید و ... . اما مهمترین و جذاب ترین امکان css این است که با فراخوانی فونت های دلخواه به صفحه خود شکل مورد نظر را بدهید. استفاده از فونت های جذاب بسیار در پیشرفت شما کمک میکند اما چگونه؟ با هایپرتمپ باشید تا چگونگی و دربارۀ فونت در استایل بحث کنیم.

چندی از تولد زبان های گرافیکی جدید میگذرد اما دیگر استفاده از فونت های پیشفرض و قدیمی ای مثل تاهوما یا آریال دیگر منطقی، جذاب و کاربرپسد نیست. حالا نوبت این است که از فونت های بهینه ای مانند یکان، وزیر، ایران سانس و ... استفاده کنید.

برای فراخوانی یک فونت در css میباست فونت دلخواه را ابتدا به فرمت های فونت وب تبدیل کنید. برای اینکه روش های گوناگونی وجود دارد اما آسان ترین راه استفاده از سایت های اینترنتی است. به آدرس wwww.transfonter.org مراجعه کنید و یک فونت دلخواه را انتخاب کنید. حالا گزنیه کانورت را انتخاب کنید و فایل آماده را دانلود کنید. حالا فونت وب، فونت شما آماده است. برای فراخوانی در صفحه وب و css ابتدا فایل های دانلود شده را که با فرمت های ttf - eot- woff- woff2 - svg هستند را آپلود کنید. اگر از هاست و وردپرس استفاده میکنید نیازی به استفاده از لینک مستقیم ندارید اما برای استفاده در صفحات عادی و مخصوصا وبلاگ ها باید از لینک مستقیم استفاده کیند. پس از آپلود کد زیر را در فایل css خود قرار بدهید:

@font-face { font-family: 'yekan'; src: url(fonts/Yekan.eot); src: url(fonts/Yekan.eot?#iefix) format("embedded-opentype"), url(fonts/Yekan.woff) format("woff"), url(fonts/Yekan.ttf) format("truetype"), url(fonts/Yekan.svg#BYekan) format("svg"); font-weight: normal; font-style: normal }

حالا فونت های شما برای استفاده آماده استو توجه داشته باشید تا فونت های خود را با توجه به نوع و فرمت آنها در کد بالا جایگذاری کنید.

تگ font-face@ فونت شما را فراخوانی میکند. تگ font-family نام فونت را تعیین میکند که شما میتوانید هر نام دلخواهی را استفاده کنید اما معمول ترین اسم فونت پیشفرض است. هر اسمی را که انتخاب کنید در فراخوانی فونت در عناصر نیز باید از آن اسم انتخاب کنید. اما تغییر اسم تاثیری در نوع فونت ندارد. تگ font-weight وزن فونت شما را تعیین میکند تا در صورت انتخاب وزن یک نوشته کدام فونت مورد نمایش قرار گیرد. این خاصیت به طور پیشفرض نورمال یا Normal است.

حالا برای استفاده و تغییر فونت کل صفحه باید کد زیر را نیز قرار دهید.

body { font-family:'yekan'; }

با استفاده از این کد تمام فونت شما به یکان تغییر میکند. به پایان بخش اول آموزش رسیدیم. در بخش دوم با اطلاعات و آموزش های پیشرفته تری همراه شما کاربران هایپرتمپ هستیم.

در صروت ایراد، سوال، نطر یا درخواست در نظرات مطرح کنید.