نمایش خبر

تعیین فونت عناصر صفحه وب

تعیین فونت عناصر صفحه وب

در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد خصوصیت font-family در سی اس اس صحبت خواهیم کرد.

با استفاده از ویژگی font-family می توانید فونت موردنظر خود را به محتوای عناصر اعمال بکنید این ویژگی می تواند چند مقدار را قبول کند در واقغ ویژگی یک لیست اولویت دار از نام فونت های مختلف را برای استفاده عناصر تعریف می کند. نام فونت ها بوسیله ویرگول از هم جدا می شوند. و نکته خیلی مهم این است که فونت ها نقش جایگزین برای هم را بازی می کنند.

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

مثال زیر را درنظربگیرید :

p { font-family: byekan,Tahoma,"Times New Roman" }

زمانی که مرورگر به این دستور می رسد ابتدا فونت اول یعنی فونت byekan را اعمال می کند اما اگر این فونت در دسترس نباشد به سراغ فونت دوم می رود و فونت tahoma را برای محتویات تگ p در نظر می گیرد،اما اگر هیچکدام از این 2 فونت در دسترس نباشند مرورگر فونت سوم را اعمال خواهد کرد،چنانچه فونت سوم نیز ووجو نداشته باشد نباشد مرورگر فونت پیشفرض سیستم را مورد استفاده قرار می دهد.

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

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

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

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

به عنوان مثال موارد زیر اشتباه می باشند :

font-family: b yekan, 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: "Times New Roman", serif; 
font-family: "21st Century", fantasy; 
font-family: "b yekan", sans-serif;

نام فونت های Generic

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

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

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

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

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

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

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

در دموی زیر می توانید یکی از انواع Generic را انتخاب کنید و تاثیر آن را بر روی متن موجود مشاهده کنید.در قسمت دوم دموی زیر نیز یک نمونه استفاده از فونت های واقعی را مشاهده می کنید.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.

کامنت جدید ...
Sort by:

'