font-family

ویژگی font-family فونت مورد استفاده برای محتوای عناصر را مشخص می کند.

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

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

مرورگر فونتی را انتخاب می کند که یا روی کامپیوتر نصب باشد و یا از طریق اطلاعاتی که توسط دستور @font-face فراهم شده است، قابل دانلود باشد.

 


p {
  font-family: WYekan, Tahoma, Arial;
}

 

مرورگر در ابتدا فونت اول از لیست (WYekan) را اعمال می کند، اگر این فونت نامعتبر باشد یا وجود نداشته باشد و یا به هر دلیلی قابل دانلود نباشد، به سراغ فونت دوم و سپس فونت سوم می رود. اگر هیچ یک از فونت های مشخص شده در دسترس نباشد مرورگر فونت پیشفرض سیستم را مورد استفاده قرار می دهد.

 
برای ویژگی font-family می توان از دو نوع نام استفاده کرد.

نام فونت های واقعی

نوع اول همان نام فونت های واقعی مثل Tahoma، Helvetica و غیره می باشند. توجه داشته باشیم که نام فونت های واقعی اگر دارای عدد و کاراکترهای خاص هستند و یا تشکیل شده از دو و یا چند کلمه می باشند باید در علامت نقل قول (" " یا ' ') قرار بگیرند.

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

موارد زیر نادرست می باشند:

 


font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

 

موارد زیر قابل قبول و صحیح هستند:

 


font-family: "New Century Schoolbook", serif;
font-family: "21st Century", fantasy;
font-family: "test@foo", sans-serif;

 

 

نام فونت های Generic

نوع دوم نام فونت های Generic هستند که معمولا از آنها به عنوان فونت پشتیبان مورد استفاده قرار می گیرد. یعنی اگر به هر دلیلی مرورگر دسترسی به فونت تعریف شده نداشته باشد از آنها استفاده کند.

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

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

توصیه می شود که همیشه یکی از این فونت ها را در انتهای لیست ویژگی font-family قرار دهیم.

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

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

 


font-family: "serif"; /* فونت واقعی به نام سریف */
font-family: serif; /* کلمه کلیدی سریف که مربوط به نوع دوم و پشتیبان می باشد */

 

 

serif

این نوع فونت بیشتر حالت رسمی دارد. معمولا گلیف ها دندانه دار هستند و همینطور معمولا فاصله بین آنها منظم است.

 

serif
مثال برای serif

 

sans-serif

این نوع بر خلاف نوع serif لبه های ساده دارند و همینطور ضخامت بدنه های گلیف تقریبا یکسان می باشد.

 

sans-serif
مثال برای sans-serif

 

cursive

این نوع بیشتر حالت غیر رسمی دارد و نتیجه بیشتر شبیه دست خط می باشد.

 

cursive
مثال برای cursive

 

fantasy

همانطور که از نام این نوع پیداست بیشتر جنبه دکور و زیباسازی دارد و بیشتر برای عناوین بزرگ مورد استفاده قرار می گیرند.

 

fantasy
مثال برای fantasy

 

monospace

مشخصه نوع monospace این است که عرض تمام گلیف ها یکسان می باشد. از این نوع بیشتر برای نوشتن کد استفاده می شود.

 

monospace
مثال برای monospace

 

چند نمونه از تعریف مقادیر برای ویژگی font-family:
 


font-family: "Arial";
font-family: "Open Sans", sans-serif;
font-family: "Helvetica", Verdana, sans-serif;
font-family: "21st Century", fantasy;

 

 

در مثال دوم دموی زیر نحوه مقدار دهی به این ویژگی نامعتبر است به همین دلیل فونت مورد نظر مورد استفاده قرار نگرفته است:

 

See the Pen font-family by Mojtaba Seyedi (@seyedi) on CodePen.


 

سوالت رو توی پنل بحث و گفتگو مطرح کن.

3 دیدگاه برای “font-family

  1. باسلام خدمت شما
    چرا در مثال آخر مقدار font-size برای body بصورت نسبی بیان شده؟
    البته میدونم ربطی به مثال این مبحث نداره اما مگه نه اینکه عناصر دیگه اگه بخوایم بصورت نسبی مقدار دهی بشن از این عنصر برای اندازه گیری باید مقدار بگیرن؟

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