توصیف گر font-style

توصیف گر font-style

به عنوان یک توصیف گر٬ font-style این اجازه رو به طراح می دهد که یک face خاص رو به یک مقدار خاص از font-style مربوط کند.

@font-face {
       font-family: "SwitzeraADF";
       font-style: normal;
       src: url("SwitzeraADF-Regular.otf") format("opentype");
    }
    @font-face {
       font-family: "SwitzeraADF";
       font-style: italic;
       src: url("SwitzeraADF-Italic.otf") format("opentype");
}
@font-face {
       font-family: "SwitzeraADF";
       font-style: oblique;
       src: url("SwitzeraADF-Italic.otf") format("opentype");
}

با توجه به قطعه کد٬ خروجی قوانین این خواهد بود که با استفاده از آن در ادامه طراحی مثلا عناصر h2 و h3 از فونت SwitzeraADF-Italic به جای فونتSwitzeraADF-Regular استفاده می کنند.

h1, h2, h3 {font: 225% SwitzeraADF, Helvetica, sans-serif;}
    h2 {font-size: 180%; font-style: italic;}
    h3 {font-size: 150%; font-style: oblique;}

توصیف گر font-style

البته اگر یک face از فونت با حالت oblique وجود داشت٬ نویسنده می توانست به جای استفاده از فونت italic از همان نوع فونت oblique هم استفاده کند.

وقتی ما با استفاده از یک descriptor برای یک چهره از فونتمون سبک خاصی رو تعیین میکنیم٬ در طزاحی٬ هرجا از اون سبک خاص استفاده کنیم٬ همون چهره خاص از فونت به کار برده می شود.

تمام مرورگرهای اصلی، خصوصیت font-style را پشتیبانی می کنند.  مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار “inherit” را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار “inherit” را پشتیبانی می کند.

این هم از این 😉

موفق و موید باشید.

تنظیم خودکار سایز

تنظیم خودکار سایز

دو تا از فاکتورهای مهمی که بر خوانایی متن ( فونت ) موثر هستند سایز و x-height ( ارتفاع )‌ می باشد. نتیجه تقسیم ارتفاع به font-size به عنوان aspect value شناخته می شود. فونت هایی با ظاهر مرتفع تر نسبت به فونت هایی که ارتفاع آن ها کاهش می یابد٬ خوانا تر هستند.

CSS راهی برای مقابله با تغییرات aspect value بین خانواده فونت ها ارائه داده است: font- size-adjust

تنظیم خودکار سایز

‎بیشتر بخوانید

سبک متن در طراحی سایت

سبک متن در طراحی سایت

صفت font-style خیلی ساده است. برای انتخاب بین متن normal, italic و oblique استفاده می شود. تنها پیچیدگی آن این است که بین italic و oblique تفاوت قائل می شود و معمولا در نمایش شما نمی توانید این دو را از هم تشخیص دهید.

سبک متن در طراحی سایت

هما طوری که می بینید٬ مقدار پیش فرض این خاصیت٬‌ normal است. مقدار normal متن رو به نحوی نمایش می دهد که به طور قائم و درست نوشته شده باشد که تعریف بهترش این است : نمایش متنی که italic یا کج نباشد.اکثر قریب به اتفاق متون در کتاب ها به صورت normal هستند.

‎بیشتر بخوانید

استفاده از واحدهای طولی برای سایز فونت

استفاده از واحدهای طولی برای سایز فونت

خاصیت font-size می تواند با مقدار عددی و طولی مقدار دهی شود. تمامی قوانینی که در قطعه کد زیر آمده اند٬ نتیجه یکسانی با هم خواهند داشت.

p.one {font-size: 36pt;}
    p.two {font-size: 3pc;}
    p.three {font-size: 0.5in;}
    p.four {font-size: 1.27cm;}
    p.five {font-size: 12.7mm;}

در عکس زیر فرض بر این شده است که عامل کاربر می داند که در هر اینچ چه تعداد نقطه برای نمایش سایز medium استفاده شده است.

عامل های متفاوت٬ فرض های متفاوت و مبتنی بر سیستم عامل دارندو بعضی ها مبنا را بر تنظیمات پیش فرض مرورگر می گذارند و بعضی ها مبنا را بر فرض برنامه نویس ( کسی که عامل کاربر را نوشه است )‌ می گذارند. با این وجود٬‌ ۵ خط در تصویر باید همیشه سایز یکسان داشته باشند. واحد اندازه گیری های مختلف باید با هم مطابق و سازگار باشند. ولی میبینید که این طور نیست 😐

‎بیشتر بخوانید