خانه / آموزش CSS / بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts
پشتیبان وب سایت وردپرس
آموزش فونت CSS در وردپرس"

تاریخ بروزرسانی: ۲۲ بهمن ۱۳۹۷ تعداد بازدید : 15 بازدید بدون دیدگاه

بخش سیزدهم- آموزش فونت CSS یا آموزش CSS Fonts

قدم قبلی >< قدم بعدی

 

 آموزش Fonts، آموزش فونت CSS
آموزش فونت CSS

فونت CSS

خصوصیات فونت CSS ، خانواده فونت، ضخامت، اندازه و سبک متن را تعریف می کند.

 

CSS Font Families (خانواده فونت CSS

در CSS، دو نوع نام font family وجود دارد:

generic family خانواده عمومی- گروهی از font families با ظاهر مشابه (مانند “Serif” یا “Monospace”)
font family خانواده فونت – یک خانواده فونت CSS خاص (مانند “Times New Roman” یا “Arial”)

 

نکته: در صفحه نمایش کامپیوتر، فونت های sans-serif به راحتی قابل خواندن هستند تا فونت های serif.

 

font family (فونت خانواده

خانواده فونت یک متن با ویژگی font-family تنظیم می شود. ویژگی فونت خانواده باید چندین نام فونت را به عنوان یک سیستم “fallback” یا پشتیبان نگه دارد. اگر مرورگر اولین فونت را پشتیبانی نکند ، سعی خواهد کرد فونت بعدی را شناسایی کند و  به همین ترتیب .

با فونتی که می خواهید شروع به نوشتن کنید و با یک generic family کار را پایان دهید تا اگر فونت مورد نظر در دسترس نباشد مرورگر فونت CSS مشابهی در خانواده عمومی انتخاب کند.

نکته: اگر نام یک خانواده فونت بیش از یک کلمه باشد، باید در علامت نقل قول، مانند: “Times New Roman” باشد.

بیش از یک font family در لیست با کاما جدا شده و مشخص می شود:

مثال:

با اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

 

Font Style(نوع قلم

خصوصیت font-style عمدتا برای مشخص کردن متن ایتالیک استفاده می شود.

این ویژگی دارای سه مقدار است:

normal – متن به طور معمول نشان داده می شود.
Italic – متن به صورت مایل یا italic نشان داده می شود.
normal – متن  به صورت “leaning” یا کمی مایل نشان داده می شود (leaning بسیار شبیه به italic است اما کمتر پشتیبانی می شود)

با اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

خصوصیت font-style

 

Font Size(اندازه قلم

ویژگی font-size اندازه قلم متن را تنظیم می کند.

توانایی مدیریت اندازه متن در طراحی وب مهم است. با این حال، در استفاده از تنظیمات font-size باید مراقب باشیم به نحوی عمل نکنیم که پاراگراف ها شبیه تیتر یا تیترها شبیه پارگراف ها شوند.

همیشه از برچسب های مناسب HTML مانند <h1> – <h6> برای عنوان ها و <p> برای پاراگراف ها استفاده کنید.

اندازه قلم اندازه می تواند یک اندازه absolute (مطلق) یا relative (نسبی) باشد.

absolute (ابعاد مطلق):

  • متن را به یک اندازه مشخص تنظیم می کند
  • اجازه نمی دهد که کاربر اندازه متن را در تمام مرورگرها تغییر دهد (بدلیل مسائل دسترسی)
  • اندازه مطلق زمانی مفید است که اندازه فیزیکی خروجی شناخته شده باشد

relative  (اندازه نسبی):

  • اندازه را نسبت به عناصر اطراف تنظیم می کند
  • به کاربر امکان می دهد اندازه متن را در مرورگرها تغییر دهد

توجه: اگر شما یک اندازه فونت را مشخص نکنید، اندازه پیش فرض متن معمولی، مانند پاراگراف ها، ۱۶ پیکسل (۱۶ پیکسل = ۱) است.

اندازه فونت CSS را با پیکسل تنظیم کنید

تنظیم اندازه متن با پیکسل به کنترل کامل بر اندازه متن می انجامد:

با اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

تنظیم اندازه متن با پیکسل

 

نکته: اگر از پیکسل استفاده می کنید، می توانید از zoom tool(ابزار بزرگنمایی) برای تغییر اندازه کل صفحه استفاده کنید.

تنظیم اندازه فونت CSS با EM

برای اجازه دادن به کاربران برای تغییر اندازه متن (در منوی مرورگر)، بسیاری از توسعه دهندگان از em به جای پیکسل استفاده می کنند.

واحد اندازه EM توسط W3C توصیه می شود.

۱em برابر اندازه فونت فعلی است. اندازه متن در مرورگرها به صورت پیش فرض ۱۶ پیکسل است. بنابراین، اندازه پیش فرض ۱em برابر ۱۶ پیکسل است.

تغییر اندازه از پیکسل ها به EM را می توان با استفاده از این فرمول محاسبه کرد: ۱۶/تعداد پیکسل ها = em

با اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

تغییر اندازه از پیکسل ها به EM

 

در مثال بالا، اندازه متن در em همانند مثال قبلی در پیکسل است. با این حال، با اندازه EM، امکان تغییر اندازه متن در تمام مرورگرها وجود خواهد داشت.

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

از ترکیبی از درصد و EM استفاده کنید

راه حل که در تمام مرورگرها کار می کند این است که یک فونت پیش فرض به صورت پیش فرض برای عنصر <body> تنظیم شود:

با اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

روش ترکیبی

 

خوبی این روش به این است که اندازه متن را در تمام مرورگرها یکسان نشان می دهد و در عین حال به تمام مرورگرها اجازه می دهد تا متن را بزرگنمایی یا تغییر اندازه دهند!

Font Weight(وزن قلم)

مقدار font-weight وزن فونت CSS را مشخص می کند:

با اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

مقدار font-weight

 

Responsive Font Size(اندازه فونت پاسخگو

اندازه متن را می توان با واحد VW تنظیم کرد، که به معنی “عرض درگاه نمایش” است.

به این ترتیب اندازه متن از اندازه پنجره مرورگر پیروی می کند:

با اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

ندازه متن را می توان با واحد VW تنظیم کرد

 

Viewport اندازه پنجره مرورگر است. ۱vw = 1٪ از عرض درگاه نمایش اگر عرض نمایش ۵۰cm عرض باشد، ۱vw 0.5cm است.

Font Variant(فونت متبادل)

ویژگی font-variant مشخص می کند که آیا یک متن باید در فونت small-caps استفاده شود یا خیر.

در فونت small-caps، تمام حروف کوچک به حروف بزرگ تبدیل می شوند. با این حال، حروف بزرگ شده در اندازه فونت، کوچکتر از حروف بزرگ موجود در اصل متن ظاهر می شوند.

با اجرای کد بالا باید در خروجی تصویر زیر را ببینید:

ویژگی font-variant

 

گام قبلی >< گام بعدی

 

لینک کوتاه این مطلب: https://tiktheme.com/?p=15472


کانال تلگرام تیک تم

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *