تعیین فونت و قلم نوشته‌ها و استایل بندی آن در CSS

[ آخرین بازنگری ۱۳ آذر ۱۳۹۵ ] [ نسخه چاپی ]

در درس گذشته تزیین فونت و قالب بندی متون رو با استفاده از css یاد گرفتیم.در این درس نحوه ی تعیین کردن فونت ها و قلم ها رو با هم یاد خواهیم گرفت.
در css فونت ها (قلم) به دو گروه عمده تقسیم میشن: فونت های خانواده Serif و فونت های خانواده sans serif . فونت هایی که در این خانواده ها قرار میگیرند با هم شباهت ساختاری دارند. از اونجایی که بحث ما در اینجا فونت شناسی نیست! بحث رو خلاصه میکنم.برای اینکه تفاوت این دو گروه رو بهتر درک کنید به تصویر زیر نگاه کنید:

تفاوت فونت های serif و sans serif

تفاوت فونت های serif و sans serif

Font Family در CSS

برای اینکه یک فونت (قلم) رو به یک انتخابگر نسبت بدیم از مشخصه ی font-family استفاده می کنیم.این مشخصه میتونه تنها نام یک فونت و یا نام گروهی از فونت ها رو دریافت کنه به صورتی که اگه فونتی که ما تعیین کردیم در سیستم فردی که داره صفحه رو نگاه میکنه وجود نداشته باشه ، فونت بعدی فراخوانده میشه و به همین ترتیب تا یک فونت انتخاب بشه.بهتره برای اینکه مطمئن باشید چیزی که شما میبینید با چیزی که سایرین مشاهده میکنند یکی هست ، ابتدا نام فونت مورد نظرتون رو وارد کنید و در انتها نام کلی خانواده فونت رو ذکر کنید و به این نکته توجه داشته باشید که اگر نام خانواده ی فونت بیش از یک کلمه باشه باید بین علامت نقل قول دوتایی ( ” ” ) قرار داده بشه.به مثال زیر دقت کنید تا تمام ابهامات برطرف بشه:

[restrict paid=”true”] h1{font-family:koodak,homa,tahoma,arial,”Times New Roman”,serif;}

در مثال بالا ، تمام تگ های h1 با فونت koodak نمایش داده میشوند.البته به شرطی که این فونت در سیستم مورد نظر نصب شده باشه و اگه نصب نشده باشه فونت homa استفاده میشه و اگه هیچ کدوم از فونت ها روی سیستم نصب نشده باشه در نهایت سیستم یک فونت از خانواده ی serif رو انتخاب کرده و نمایش میده!
یکی از بهترین فونت های فارسی برای نمایش در صفحات وب فونت Tahoma هست که تقریبا روی ۹۹% سیستم های ویندوز نصب هست و خوانایی قابل قبولی داره.

 Font Style در CSS

از مشخصه font-style در زمانی استفاده میشه که بخواهیم یک فونت رو به صورت مورب (ایتالیک) نمایش بدیم.مقادیری که این مشخصه دریافت میکنه شامل موارد زیر هست:
Normal : متن به صورت طبیعی نمایش داده میشه.
Italic : فونت به صورت مورب نمایش داده میشه ( مثل اکثر نقل قول ها)
Oblique : این مدل هم شبیه ایتالیک هست و خیلی کاربرد کمی داره.
به مثال زیر توجه کنید:

p.ita{font-style:italic;}

در مثال بالا تمام پاراگراف هایی که کلاس italic به اونها تعلق گرفته باشه به صورت مورب نمایش داده میشه.

<p class="ita">متن ایتالیک و مورب</p>

تعیین اندازه فونت

با استفاده از مشخصه font-size میتونید اندازه ی فونت رو در یک متن کنترل کنید.این قابلیت در طراحی صفحات وب بسیار با اهمیته گرچه نباید از این قابلیت برای نمایش سرتیتر به عنوان پاراگراف و یا برعکس استفاده کرد چرا که باعث ضعیف شدن سئو صفحه طراحی شده خواهد شد برای این منظور همیشه از تگ های <h> برای سرتیتر ها و از تگ <p> برای پاراگراف ها استفاده کنید.اندازه فونت میتونه یک میزان قطعی و یا یک میزان نسبی باشه.

اندازه های قطعی:
• نمایش متن در یک سایز مشخص
• عدم اجازه به کاربر برای تعیین اندازه فونت توسط خودش ( ممکنه باعث امتیاز منفی برای ساییتون بشه)
• اندازه قطعی و ثابت وقتی مفید هست که از نتیجه خروجی در هر شرایطی اطمینان دارید.

اندازه های نسبی:
• تعیین اندازه ی فونت بر حسب سایر عناصر موجود در صفحه
• اجازه به کاربران برای تغییر اندازه فونت (در صورتی که شما قصد دارید از دکمه های کنترل اندازه ی فونت در صفحه رو دارید (+ و – که فونت رو در صفحه بزرگتر و کوچکتر میکنند) باید از اندازه های نسبی برای فونت هاتون استفاده کنید.
نکته : در صورتی که با استفاده از این مشخصه اندازه ی فونت رو تعیین نکنید ، این اندازه به صورت پیش فرض برابر با ۱۶px معادل با ۱em در نظر گرفته میشه.

تعیین اندازه فونت با پیکسل

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

H1{font-size:30px;}
H2{font-size:25px;}
P{font-size:13px;}

در مثال بالا به مرورگرهای فایرفاکس،گوگل کروم و سافاری اجازه ی تغییر اندازه ی فونت ها داده میشه ولی در مرورگر اینترنت اکسپلورر این امکان وجود نداره ( کلا مرورگر دردسر سازیه!  نسخه جدید مرورگر اینترنت اکسپلورر واقعا بهبود پیدا کرده و یکی از بهترین ها شده )

تعیین اندازه فونت با مقیاس em

برای اینکه مشکل تغییر اندازه فونت در مرورگر اینترنت اکسپلورر حل بشه بسیاری از طراحان از واحد em استفاده میکنند و همونطور که قبلا گفتیم یک ۱em برابر با ۱۶px هست و برای اینکه واحد پیکسل رو به واحد em تبدیل کنید کافیه مقدار پیکسل رو بر عدد ۱۶ تقسیم کنید تا مقدار em بدست بیاد.

H1{font-size:1.875em;}/* 1.875em = 30px */

در مثال بالا اندازه ی تگ h1 دقیقا مانند مثال قبل نمایش داده میشه با این تفاوت که وقتی از ابزار تغییر اندازه ی فونت در صفحه استفاده بشه این اندازه ها قابلیت تغییر رو خواهند داشت.ولی با این حال هنوز مشکل در اینترنت اکسپلورر وجود داره و وقتی فونت بزرگتر یا کوچکتر بشه از اندازه ای که باید بزرگتر بشه بیشتر بزرگ میشه و برعکس!
ولی از اونجایی که برای هر کاری راه حلی وجود داره ، راه حل این مشکل هم استفاده ترکیبی از درصد و واحد em هست به این صورت که در انتخابگر body میزان فونت رو برابر ۱۰۰% قرار بدید و در سایر انتخابگر ها از واحد em استفاده کنید:

Body{font-size:100%;}
H1{font-size:1.875em;}

با این کد اندازه ی فونت ها در تمام مرورگر ها و در تمام حالات به یک صورت نمایش داده میشه.
جا داره در اینجا از تمام افرادی که از اینترنت اکسپلورر استفاده میکنند خواهش کنم هم به خاطر امنیت سیستم خودتون و هم به خاطر مشاهده ی صفحات وب در بهترین حالت و درست ترین حالت و همچنین بهره مندی از سرعت باز شدن صفحات وب از مرورگر گوگل کروم و یا فایرفاکس استفاده کنید و اینترنت اکسپلورر نسخه های قدیمی رو کنار بگذارید و به نسخه های جدید بروزرسانی کنید . فقط یکبار امتحان کنید،پشیمون نخواهید شد!

[/restrict]

احتمالا این مطالب برای شما جالب هستند

آموزش css – درس دوم-دستورات
آموزشcss – درس پنجم – تصویر زمینه
آموزش css – درس ششم – ویرایش متن
دوره‌ی مقدماتی آموزش کسب مهارت CSS
آشنایی با CSS و لزوم استفاده از آن در طراحی سایت
آموزش css – درس چهارم – نحوه استفاده از css
طراحی و استایل بندی جدول با کمک CSS

گفتگو پیرامون تعیین فونت و قلم نوشته‌ها و استایل بندی آن در CSS

(منتشر شده: 0 | در انتظار تایید: 0)

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)