عریض تر کردن متن در طراحی سایت

عریض تر کردن متن در طراحی سایت

در بعضی از خانواده فونت ها٬ انواعی دارند که دارای حروف کم عرض تر یا باریک تر هستند. آن ها غالبا نام هایی مانند Condensed ٬ Wide ٬ Ultra Expanded و … دارند. کاربرد این ها این است که یک طراح می تواند از یک font family استفاده کند در حالی که هم از نوع عریض و هم از نوع کم عرض تر آن استفاده می کند. این کار با font-stretching امکان پذیر می شود.

این خاصیت اختیاری است و میزان کشیدگی کاراکترها را مشخص می کند.

عریض تر کردن متن در طراحی سایت

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

توصیف گر 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 استفاده شده است.

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

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

کلمات کلیدی و متون monospace

کلمات کلیدی و متون monospace

تغییر جالبی در کلمات کلیدی و متون monospace برای سایز فونت و وراثت وجود دارد که زمانی که شما در مرورگر متون monospace رو مشاهده می کنید٬ نمایان گر می شود. به قطعه کد و عکس زیر توجه کنید:

ٖp {font-size: medium;}   /* the default value */
    span {font-family: monospace; font-size: 1em;}

 

<p>This is a 'p' with a <span>'span'</span> inside.</p>

کلمات کلیدی و متون monospace

مقدار پیش فرض medium معمولا ۱۶px در نظر گرفته می شود. فرض کنید که کاربر تنظیمات مرورگر را تغییر نداده است‌ ( سایز پیش فرض تنظیم شده است ). در واقع شما پاراگراف ها ی خارج از عنصر span را با سایز فونت ۱۶px مشاهده می کنید. ( تکرار می کنم٬‌ فرض بر این است که کاربر تنظیمات فونت را دستکاری نکرده است. ) ‎بیشتر بخوانید

سایز درصدی فونت

سایز درصدی فونت

این نوع سایز دهی به فونت خیلی شبیه به کلمات کلیدی سایز نسبی است. یک مقدار درصدی همیشه تحت آن چه سایز یک عنصر والد دارد محاسبه می شود. درصد٬‌ بر خلاف کلمات کلیدی سایز که در پست قبلی در مورد آن ها بحث شد٬ خیلی ریز اندازه فونت ها را محاسبه می کند.

به مثال زیر توجه کنید:

body {font-size: 15px;}
    p {font-size: 12px;}
    em {font-size: 120%;}
    strong {font-size: 135%;}
    small, .fnote {font-size: 70%;}

 

<body>
<p>This paragraph contains both <em>emphasis</em> and <strong>strong
emphasis</strong>, both of which are larger than their parent element.
The <small>small text</small>, on the other hand, is smaller by a quarter.</p>
<p class="fnote">This is a 'footnote' and is smaller than regular text.</p>
<p> 12px <em> 14.4px </em> 12px <strong> 16.2px </strong> 12px
<small> 9px </small> 12px </p>
<p class="fnote"> 10.5px </p>
</body>

سایز درصدی فونت

در این مثال٬‌ مقدار سایز با مقدار دقیق پیکسل نمایش داده شده است. این مقادیر توسط مرورگر بدون در نظر گرفتن سایز نمایش واقعی کاراکترها در صفحه نمایش محاسبه می شود. ‎بیشتر بخوانید

سایز فونت

سایز فونت

روش تعیین سایز فونت برای ما٬ هم خیلی آشناست و هم خیلی متفاوت. این که چجوری یک فونت برای اولین بار سایز دهی بشه و این که چجوری در ادامه بهش سایز بدیم و …

سایز فونت

در یک روش خیلی شبیه به کلمات کلیدی font-weight ، صفت font-size از کلمات کلیدی برای سایز نسبی (یا relative) که آن ها را smaller یا  larger می نامیم استفاده می کنند. نحوه ی استفاده و محاسبه ی آن ها بسیار شبیه به چیزی است که برای font-weight گفتیم. محاسبه ی مقدار smaller و larger به ترتیب با کاهش و افزایش مقدار font-weight بدست می آید. ‎بیشتر بخوانید

font-weight قسمت سوم

با توجه به پست قبل٬ همون طوری که انتظار دارید و از کلمه کلیدی lighter پی میبرین٬ این مقدار٬ راهی مشابه با bolder را طی میکند جز این که عامل کاربر به جای افزایش ضخامت فونت٬ آن را کاهش میدهد.

با یک سری اصلاحات در مثال قبلی ( در پست قبلی )‌٬ خواهید دید که موضوع چقدر واضح و روشن است:

/*   assume only two faces for this example: 'Regular' and 'Bold'   */
  p {font-weight: 900;}   /* as bold as possible, which will look 'bold' */
  p span {font-weight: 700;}   /* this will also be bold */
  strong {font-weight: lighter;}   /* lighter than its parent */
  b {font-weight: lighter;}   /* lighter still */

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

font-weight قسمت دوم

font-weight قسمت دوم

اگر بخواهید برای یک عنصر ضخامت بیشتری تعریف کنید، باید ازمقدار bolder استفاده کنید. عامل کاربر در ابتدا مقدار تعیین شده برای عنصر والد آن عنصر را در نظر می گیرد و طبق خاصیت ارث بری آن مقدار را برای این عنصر در نظر می گیرد و یک مقدار تیره تر با عددی بیشتر را به این عنصر اختصاص می دهد. به این ترتیب عنصر از عنصر والد خودش دارای فونتی ضخیم تر و تیره تر می شود.

در هر صورت هرگاه از مقدار bolder برای یک عنصر استفاده کردیم، عامل کاربر بعد از بررسی مقدار عنصر والد ، مقدار عددی بعد از مقدار عنصر والد را برای عنصر مورد نظر اختصاص می دهد. به مثال زیر توجه کنید:

p {font-weight: normal;}
    p em {font-weight: bolder;}  /* results in bold text, evaluates to '700' */
    h1 {font-weight: bold;}
    h1 b {font-weight: bolder;}  /* if no bolder face exists, evaluates to '800' */
    div {font-weight: 100;} /* assume 'Light' face exists; see explanation */
    div strong {font-weight: bolder;} /* results in normal text, weight '400' */

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