آموزش فرمان های پرکاربرد css3

در این درس دستورات css و نحوه ی استفاده آن را فرا میگیریم.

دستورات css دارای دو بخش اصلی می باشند : یک انتخابگر(selector) ، و یک یا چند معرف (Declaration)!

انتخابگر معمولا عنصر html ای میباشد که شما قصد دارید شیوه ای را بر آن اعمال کنید و هر معرف شامل مشخصه (property) و مقدار (value) است.

مشخصه همان بخشی است که شما میتوانید تغییر دهید و هر مشخصه مقداری را دریافت میکند.

طراحی سایت اهواز

اضافه کردن فونت به فایل CSS

در این یخش آموزش اضافه کردن فونت به فایل CSS برای ارائه آماده شده است. گاهی اوقات میخواهیم فونت هایی به صفحه وب اضافه کنیم که به طور معمول از آنها استفاده نمی شود و از آنجایی که هر وبسایت در کامپیوتر کاربر باز می شود در صورتی که فایل فونت در کامپیوتر کاربر وجود نداشته باشد فونت درون صفحه وب تغییر میکند و باعث بهم ریخنگی در نمایش وبسایت می شود.در این قسمت از آموزش نحوه اضافه کردن فایل فونت به صفحه وب را آموزش می دهیم.

در کل 4 فرمت فونت داریم:

1. EOT
2. TTF/OTF
3. WOFF
4. SVG

شما میتونید از هر یک از فونت ها استفاده کنید.مورد اول برای IE نسخه 6+ هست که امروزه تقریبا از این فرمت استفاده نمیشه.مورد دوم برای فونت های ویندوز مشاهده میشه.مورد سوم پرکاربردترین فرمت در اینترنت هست.مورد آخر هم تقریبا دیگه استفاده نمیشه و در زمینه گرافیک از این فرمت استفاده میشه.پس پیشنهاد بنده به شما استفاده از فونت با فرمت WOFF هست.برای تبدیل فونت های ویندوز به فرمت WOFF که با فرمت TTF هستند میتونید از سایت های زیر استفاده کنید:

www.everythingfonts.com

www.ttf2woff.com

برای افزودن فایل فونت درون فایل css از دستور زیر استفاده می کنیم:

CSS

1 2 3 4 5

@font-face{ . . . }

در ابتدا باید نامی دلخواه برای فونت مورد نظر انتخاب کنیم.با استفاده از font-family این کار را انجام می دهیم:

CSS

1 2 3

@font-face{ font-family:'b yekan'; }

اگر نام فونت شما در قسمت باشه طوریکه space بین اسم باشه باید از علامت کوتیشن استفاده کنیم.در غیر اینصورت لازم به اسفاده از کوتیشن نیست.

در مرحله یعدی باید مسیری که فایل فونت قرار داده رو مشخص کنیم:

CSS

1	src:url(fonts/BYekan.ttf) format('truetype'), url(fonts/BYekan.woff) format('woff');

همانطور که در بالا مشاهده می کنید برای دو نوع فرمت woff و ttf به صورت بالا فونت ها را پی وست کرده ایم.زمانیکه چند قایل فونت با فرمت های مختلف از یک نوع فونت مانند فونت BYekan داریم باید پشت سر هم و با جداکننده ( , ) از هم جداشون کنیم.

گزینه بعدی font-weight هست که سایز پیش فرض فونت رو مشخص میکنه که از 100 تا 900 مقدار میگیره:

حال اگر فرمت دیگری مثل nazanin داشتید با مرحله بالا (از قسمت src) برای این فونت تشکیل بدید.

در نهایت کد زیر تشکیل میشه:

CSS

1 2 3 4 5

@font-face{ font-family:'b yekan'; src:url(../fonts/BYekan.ttf) format('truetype'), url(../fonts/BYekan.woff) format('woff'); font-weight:900; }