در مقالات قبلی با انواع پراپرتی هایی که مربوط به فونت ها در صفحات وب می شد آشنا شدید،اما استفاده از این پراپرتی ها ممکن است کمی مشکل و خسته کننده باشد،با استفاده از پراپرتی font که در این مقاله به توضیح آن می پردازیم،می توانید تمام پراپرتی های مربوط به فونت ها را به صورت یکجا و خلاصه شده استفاده نمایید.
در کد زیر نمونه ای کامل از نحوه استایل دهی به فونت ها و نحوه خلاصه نویسی آن را مشاهده می کنید.
p {
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 16px;
line-height: 2;
font-family: tahomoa;
/* خلاصه نویسی کدهای بالا */
font: italic normal bold 16px/2 tahoma;
}
قوانین خلاصه نویسی فونت ها
نوع فونت (مقدار مربوط به پراپرتی font-family ) را باید به عنوان آخرین مقدار نوشته شود.
زمان که قصد دارید از ویژگی font استفاده کنید تعیین دو مقدار font-family , font-size اجباری می باشد و چنانچه مقدار این دو ویژگی را تعیین نکنید کد شما نامعتبر تلقی و مرورگر آن را نادیده می گیرد.
اگر نیاز است مقادیر font-variant , font-weight , font-variant تعیین شوند، باید قبل از مقدار font-size قرار بگیرند، البته ترتیب بین خودشان مهم نیست.
به منظور تعیین ویژگی line-height باید مقدار این ویژگی را بعد از font-size و با استفاده از کاراکتر اسلش / ذکر کنید.
نکته خیلی مهم در مورد این ویژگی این است که تمام ویژگی هایی که قادر هستیم توسط font مقدار دهی کنیم اگر مقداری برایشان تعیین نکنیم به مقدار اولیه خود ریست می شوند.
به عنوان مثال اگر ویژگی font-style یک عنصر قبلا تعیین شده باشد و ما از ویژگی font بدون ذکر مقدار font-style استفاده کنیم،مقدار ویژگی font-style عنصر به مقدار اولیه یعنی normal ریست می شود.
p {
font-style:italic;
}
p span {
/* تا اینجا مقدار به ارث رسیده برای ویژگی font-style مقدار italic می باشد */
font:2em 'Tahoma'; /* در این خط مقدار ویژگی font-style را ذکر نکرده ایم،بنابراین مقدار ریست خواهد شد یعنی مقدار ان همان normal خواهد شد. */
}
در کد زیر مثال هایی از نحوه استفاده صحیح از ویژگی فونت را مشاهده می کنید:
p { font: 14px/2 sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% 'b yekan', serif }
p { font: bold italic 1em serif }
p { font: normal small-caps 120%/120% tahoma }
p { font: oblique 12pt 'b yekan','b nazanin', tahoma,serif; }
استفاده از فونت های سیستم
سیستم عامل ها برای قسمت های مختلف سیستم از فونت و استایل های مختلفی استفاده می کنند. مثلا برای منوها از فونت مخصوص برای منوها و برای نوارهای حالت از استایل دیگر و غیره…
با استفاده از ویژگی font می توان از این فونت های سیستم استفاده کرد. به عنوان مثال اگر مقدار menu را برای font تعریف کنیم تمام ویژگی هایی (مربوط به فونت) که سیستم عامل برای نوشتن متن منو استفاده می کند را می توانیم در اختیار داشته باشیم:
font: menu;
مقادیری که برای این ویژگی می توان استفاده کرد عبارتند از :
font: caption | icon | menu | message-box | small-caption | status-bar
نکته : این کلمات کلیدی فقط برای ویژگی font تعیین می شوند و نمی توان از ویژگی font-family برای استفاده کردن از این فونت ها استفاده کنیم.
زمانی که از این کلمات کلیدی برای ویژگی font استفاده می کنید،نمی توانید مقادیر دیگر مانند font-style , font-size , ... را به صورت خلاصه نویسی تعیین کنید و اگر این کار را بکنید مرورگر کلمه کلیدی را به عنوان نام یک فونت اشتباه می گیرد بنابراین در زمانی که از فونت های سیستمی استفاده می کنید بقیه مقادیر مربوط به فونت ها را باید به صورت جداگانه تعیین کنید و از آنجا که ویژگی font همه را ریست می کند باید بعد از آن تعریف کنیم.
p{
font: caption;
font-style: italic;
font-size: 20px;
}
امیدوارم مطالعه این مقاله برای شما مفید بوده باشد،با ادامه مقالات آموزش CSS با ما همراه باشید.
کامنت جدید ...