تغییر و تنظیم فونت font در CSS

فونت چیست ؟

به زبان ساده به شکل ظاهری یک حرف در یک زبان نوشتاری که از اصولی خاصی پیروی می کند فونت می گویند. در زبان فارسی به جای عبارت Font کلمه "قلم" را به کار می برند ولی در بین اهالی وب و کامپیوتر همان کلمه فونت استفاده می شود.

فونت ها ویژگی هایی مانند ضخامت، نوع ، اندازه و ... دارند که در CSS می توان آن ها را تغییر داد.

در شکل زیر دو نوع فونت مختلف از یک متن فارسی را می بینید.

در نسخه های قبلی CSS شما امکان انتخاب نوع فونت در وب را نداشتید و صفحه شما برای نمایش محتوا از فونت های پیش فرضدر سیستم عامل مانند Tahoma استفاده می کرد.

ولی در نسخه های جدید CSS این مشکل بر طرف شد و حالا می توانید از هر نوع فونت حتی فونت های فارسی در وب به راحتی استفاده کنید.

فرمت های مختلف فونت در وب:

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

• پسوند eot : این نوع فرمت توسط مایکروسافت جهت استفاده در اینترنت اکسپلورر ارائه کرد. همان طور که گفته شد این نوع فرمت فونت فقط در مرورگر IE قابل استفاده است.
• پسوندttf : این نوع فرمت تو سط اپل در اواخر ده 80 میلادی جهت استفاده در PostScript توسعه داده شد و تا به الان به عنوان یکی از فرمت های استاندارد فونت شناخته میشود و کلیه مرورگرها به جز اینترنت اکسپلورر از آن پشتیبانی میکنند.
• پسوند svg : این نوع فونت بر اساس فرمت svg (تصاویر برداری) ساخته شده است و مرورگر سافاری از نسخه 5 به بعد از آن پشتیبانی می کند. توجه داشته باشید که پشتیبانی دیگر مرورگرها از این نوع فونت خوب نیست و این نوع فونت برای فونت های فارسی قابل استفاده نیست.
• پسوند woff : موزیلا در سال 2009 این نوع فرمت از فونت را برای استفاده در وب توسعه داد و w3f اکنون آن را به رسمیت می شناسد. کلیه مرورگرهای مدرن و اینترنت اکسپلورر 9 به بعد به خوبی از این نوع فرمت پشتیبانی می کنند.

استفاده از فرمت های ذکر شده در وب به نوع کاربران شما و استفاده از مرورگرها توسط آن ها می باشد. تقریبا تمامی مرورگرها به جز اینترنت اکسپلورر نسخه قدمی از woff پشتیبانی می کنند و eot نیز در نسخه های قدیمی اینترنت اکسپلورربخوبی پشتبانی می شود.

نکته :

شما می توانید فرمت های مختلف فونت را به یکدیگر تبدیل کنید. اگر چه نرم افزار محبوبی فعلا در این زمینه شناخته نشده است اما سایت های بسیار خوبی جهت تبدیل انواع مختلف فرمت به یکدیگر به صورت آنلاین موجود می باشد. یک از این سایت ها سایت https://everythingfonts.com می باشد که از همه فرمت های مختلف به خوبی پشتیانی می کند.

تعیین نوع فونت در CSS توسط @font-face :

فرض کنید فونتی مانند فونت یکان را در فرمت های مختلف و در پوشه font در root سایت ذخیره کرده ایم. برای معرفی این فونت به CSS جهت استفاده از آن در محتوا دستور زیر را در ابتدای فایل CSS خود می نویسیم.

@font-face {

   font-family: iransans;

   src: url(/font/iransansweb.woff);

   src: url(/font/iransansweb.ttf);

   src: url(/font/iransansweb.svg);

   src: url(/font/iransansweb.eot);

}

در مثال بالا برای تعیین نام خانواده فونت مورد نظر (هر نامی می توانید استفاده کنید) از font-family و بمقدار آن هم همان نام دلخواه خود را استفاده کرده ایم.

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

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

font-familyخصوصیت  :

از این ویژگی برای معرفی و  تغییر شکل ظاهری فونت برای محتوای مورد نظر استفاده می شود. در مثلا بالا ما فونت یکان را با نام لاتین  yekan معرفی کردیم. حال برای معرفی آن به عنصر p جهت استفاده از این فونت برای پاراگراف خود به شیوه زیر عمل می کنیم.

P {

font-family:iransans;

}

font-styleخصوصیت  :

جهت مشخص کردن نوع نمایش یک فونت میتوانید از ویژگی font-style استفاده کنید. این ویژگی سه مقدار برای نمایش معمولی ، ایتالیک یا کج و مورب می پذیرد. مقدار پیش فرض این ویژگی نمایش معمولی یا normal  می باشد.

• normal:   متن به صورت معمولی نمایش داده میشود
• Italic: متن به صورات ایتالیک نمایش داده میشود
• Oblique : متن به صورت مورب نمایش داده میشود

P {

font-style: italic;

}

تغییر اندازه فونت font-size :

بسیاری از مواقع نسبت به نوع محتوا شما بایستی اندازه فونت خود را تغییر دهید. برای تغییر اندازه فونت در وب می توانید از خصوصیت font-size استفاده کنید. این خصوصیت مقدارهای زیادی دریافت می کند.ولی مهمترین و رایج ترین این مقدارها تعیین اندازه فونت به واحد پیکسل می باشد.

P {

font-size: 20px;

}

مقدارهای دیگری که دریافت می کند به شرح زیر است.

• medium : مقدار پیشفرض و معمولی
• xx-small , x-small , small , large , x-large , xx-large , smaller , larger : تغییر اندازه فونت با درج نام مقدار

p {

font-size: x-small;

}

• length : تعیین اندازه فونت با واحدهای مجاز مانند px .cx , em  و ...
• Initial: تعیین اندازه فونت به حالت پیشفرض. مثلا اگر اندازه فونت برای والد تغییر کند و عنصر فرزند مقدار Initial  را داشته باشد ، عنصر فرزند اندازه فونت پیشفرض خود را حفظ می کند و همراه با والد تغییر اندازه نمی دهد.
• Inherit : تنظیم اندازه فونت برابر با اندازه فونت والد

 تعیین اندازه ضخامت فونت با خصوصیت font-weight :

اگر می خواهید میزان ضخامت (Bold) فونت را مشخص کنید از خصوصیت font-weight استفاده کنید. font-weight دو نوع مقدار می گیرد .

مقدار به صورت عبارات کلیدی از قبل تعیین شده و مقدار به صورت عددی

مقدارهای font-weight به صورت کلمات کلیدی عبارتند از :

• normal معمولی
• bold ضخیم
• bolder ضخیم تر
• lighter سبک تر

که این عبارات مقدار ضخامت فونت را نسبت به این کلمات تغییر می دهد.

و مقدارهای عددی نیز عبارتند از :

• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900

مقدار normal همان مقدار 400 است و بیشتر از آن فونت را ضخیم تر و کمتر از آن فونت را سبک تر می کند.