کارکردن با فونت ها
پنجشنبه, ۱۴ ارديبهشت ۱۳۹۶، ۰۹:۳۰ ق.ظ
تمام ویژگی های مربوط به فونت ها، مقادیر خود را از عنصر والدشان به ارث می برند. از این ویژگی ها برای تعیین خانواده فونت، میزان ضخامت فونت، اندازه و سبک فونت استفاده می شود.
ویژگی font-family
ویژگی font-family نوع فونت مورد نظر را مشخص می کند. مقدار مربوط به این ویژگی را می توان با نام یک فونت خاص مثل times یا verdana تنظیم کرد؛ یا می توان یک نام کلی مربوط به یک خانواده فونت را استفاده کرد، مثل sans-serifserif, یا monospace.
در css دو نوع از خانواده های فونت وجود دارند:
این نکته را هم در نظر داشته باشید که اگر نام فونت مورد نظر شما بیش از یک کلمه باشد، حتما نام فونت را در داخل علامت نقل قول قرار دهید.
مقدار مربوط به این ویژگی می تواند فهرستی از نام فونت ها باشد که به صورت اولویت بندی شده نوشته شده اند. اگر مرورگر به فونت اول دسترسی نداشته باشد، مرورگر به سراغ فونت یا فونت های بعدی خواهد رفت.
حتما برای این ویژگی در قسمت انتهای لیست، نام خانواده فونتی را بنویسید که مطمئن باشید در همه مرورگرها وجود خواهد داشت. توجه داشته باشید اگر در داخل نام یک فونت فضای خالی وجود داشته باشد باید نام فونت را داخل گیومه های دوتایی قرار دهید (مثل مثال بالا).
ویژگی font-size
این ویژگی اندازه فونت را مشخص می کند. مقداراین ویژگی می تواند هر نوع واحد اندازه گیری یا درصدی از اندازه فونت عنصر والد باشد. البته تعدادی مقادیر از پیش تعریف شده نیز وجود دارند که به شرح زیر هستند:
به این مساله هم توجه داشته باشیدکه در اچ تی ام ال، عناصری مثل h1، h2 و... وجود دارند که می توانیم از آنها برای مشخص کردن سرتیترها استفاده کنیم و لازم نیست اندازه فونت ها را تغییر دهیم. بنابراین بهتر است برای عناوین و سرتیتیر ها از این نوع عناصر استفاده کنیم و برای متن های عادی از عنصر پاراگراف (p) استفاده کنیم. این روش باعث می شود ساختار صفحات اچ تی ام ال ما منظم تر و مرتب تر باشند.
ویژگی font-style
با استفاده از ویژگی font-style می توانیم فونت را مورب کنیم. این ویژگی دو مقدار italic و oblique را می پذیرد. البته در بیشتر فونت ها هر دوی این ویژگی ها منجر به نتیجه مشابه می شود.
ویژگی font-variant
ویژگی font-variant مشخص می کند که آیا حروف بزرگ در یک متن با اندازه کوچک تر (نسبت به حالت عادی) نوشته شوند یا خیر(small caps). در یک متن که به صورت small-caps باشد تمام حروف کوچک به حروف بزرگ تبدیل می شوند؛ اما با این تفاوت که این حروف بزرگ نسبت به حروف بزرگ معمولی با اندازه کوچک تری نوشته می شوند.
ویژگی font-weight
این ویژگی مقدار ضخامت فونت را تعیین می کند. مقادیر bolder و lighter، ضخامت فونت را نسبت به محتوای عنصر والد تعیین می کنند؛ و مقادیر عددی، مقادیر مطلق و ثابت را تعیین می کنند. مقدار bold برابر با 700 است و مقدار normal برابر با 400.
هرچند شما می توانید برای وزن یک فونت از اعداد مختلفی استفاده کنید، اما باید توجه داشته باشید که بسیاری از فونت ها فقط یک نوع اندازه برجسته شده (bold) دارند.
ویژگی font
یک ویژگی راحت و کوتاه شده با نام font وجود دارد که تمام ویژگی های مربوط به یک فونت را در یک اعلان مشخص می کند:
فونت های شخصی
ویژگی font-family
ویژگی font-family نوع فونت مورد نظر را مشخص می کند. مقدار مربوط به این ویژگی را می توان با نام یک فونت خاص مثل times یا verdana تنظیم کرد؛ یا می توان یک نام کلی مربوط به یک خانواده فونت را استفاده کرد، مثل sans-serifserif, یا monospace.
در css دو نوع از خانواده های فونت وجود دارند:
- خانواده عمومی (generic family): که یک گروه از فونت هایی هستند که ظاهری مشابه یکدیگر دارند (مثل Sefir یا Monospace)
- خانواده فونت (font family): که یک خانواده فونت خاص است مثل Arial
این نکته را هم در نظر داشته باشید که اگر نام فونت مورد نظر شما بیش از یک کلمه باشد، حتما نام فونت را در داخل علامت نقل قول قرار دهید.
font-family :inherit | <family-names> | <generic-families>
مقدار مربوط به این ویژگی می تواند فهرستی از نام فونت ها باشد که به صورت اولویت بندی شده نوشته شده اند. اگر مرورگر به فونت اول دسترسی نداشته باشد، مرورگر به سراغ فونت یا فونت های بعدی خواهد رفت.
font-family : “Times New Roman”, times, serif;
ویژگی font-size
این ویژگی اندازه فونت را مشخص می کند. مقداراین ویژگی می تواند هر نوع واحد اندازه گیری یا درصدی از اندازه فونت عنصر والد باشد. البته تعدادی مقادیر از پیش تعریف شده نیز وجود دارند که به شرح زیر هستند:
font-size :inherit | <length> | <percentage> | smaller | larger | xx-small | x-small | small | medium | large | x-large | xx-largeمقادیر larger و smaller به اندازه فونت عنصر والد بستگی دارند؛ اما سایر مقادیر از پیش تعریف شده مقادیر مطلق و ثابت هستند. اندازه اولیه medium است، که برای متن عادی برابر با 1em(16 pixel) است.
به این مساله هم توجه داشته باشیدکه در اچ تی ام ال، عناصری مثل h1، h2 و... وجود دارند که می توانیم از آنها برای مشخص کردن سرتیترها استفاده کنیم و لازم نیست اندازه فونت ها را تغییر دهیم. بنابراین بهتر است برای عناوین و سرتیتیر ها از این نوع عناصر استفاده کنیم و برای متن های عادی از عنصر پاراگراف (p) استفاده کنیم. این روش باعث می شود ساختار صفحات اچ تی ام ال ما منظم تر و مرتب تر باشند.
ویژگی font-style
با استفاده از ویژگی font-style می توانیم فونت را مورب کنیم. این ویژگی دو مقدار italic و oblique را می پذیرد. البته در بیشتر فونت ها هر دوی این ویژگی ها منجر به نتیجه مشابه می شود.
font-style : inherit | normal | italic | oblique
ویژگی font-variant
ویژگی font-variant مشخص می کند که آیا حروف بزرگ در یک متن با اندازه کوچک تر (نسبت به حالت عادی) نوشته شوند یا خیر(small caps). در یک متن که به صورت small-caps باشد تمام حروف کوچک به حروف بزرگ تبدیل می شوند؛ اما با این تفاوت که این حروف بزرگ نسبت به حروف بزرگ معمولی با اندازه کوچک تری نوشته می شوند.
font-variant :inherit | normal | small-caps
ویژگی font-weight
این ویژگی مقدار ضخامت فونت را تعیین می کند. مقادیر bolder و lighter، ضخامت فونت را نسبت به محتوای عنصر والد تعیین می کنند؛ و مقادیر عددی، مقادیر مطلق و ثابت را تعیین می کنند. مقدار bold برابر با 700 است و مقدار normal برابر با 400.
font-weight : inherit | normal | bold | bolder | lighter | 100 | 200 | … | 900
هرچند شما می توانید برای وزن یک فونت از اعداد مختلفی استفاده کنید، اما باید توجه داشته باشید که بسیاری از فونت ها فقط یک نوع اندازه برجسته شده (bold) دارند.
ویژگی font
یک ویژگی راحت و کوتاه شده با نام font وجود دارد که تمام ویژگی های مربوط به یک فونت را در یک اعلان مشخص می کند:
font :inherit | <font-style> + <font-variant> + <font-weight> + <font-size>/ <line-height>+ <font-family>تازمانی که ترتیب ذکر شده در بالا حفظ شود، شما می توانید هرکدام از ویژگی هایی که تمایل داشتید را کناربگذارید؛ البته به استثنای font-size و font-family که اجباری هستند. اگر یک ویژگی راکنار بگذارید، مقدار پیش فرض مربوط به آن در نظر گرفته می شود که آن را از عنصر والدش به ارث می برد. با استفاده از مثال زیر، 4ویژگی را به عنصر پاراگراف نسبت می دهیم:
P { font : italic 50% 125% Verdana; }
با استفاده از مثال بالا مقادیر مربوط به font-style, font-size, line-height, font-family را در یک اعلان مشخص کرده ایم. از آنجا که مقادیر مربوط به font-variant و font-weight مشخص نشده اند اثر جانبی نوشتن چنین اعلانی در این است که مقدار این دو ویژگی به حالت نرمال تنظیم می شود. فونت های شخصی
وقتی شما فونتی را برای وب سایت خود انتخاب می کنید، این فونت ها فقط زمانی برای کاربر قابل مشاهده هستند که کاربر آنها را بر روی کامپیوتر خود داشته باشد. اگر به یک فونت غیراستاندارد نیاز دارید می توانید با استفاده از قانون @font-faceفونت مورد نظر خود را از یک مکان (بر روی وب) بارگذاری کنید:
@font-face{
font-family :MyFont;
src :url(myfont.ttf);
}
با استفاده از قانون بالا یک فونت با نام MyfFont درست می کنیم و یک آدرس مشخص می کنیم که مرورگر وب می تواند فونت مورد نظر را از آنجا دانلود کند. با استفاده از این قانون، می توانیم از فونت مورد نظر خود مثل سایر فونتها استفاده کنیم:
p { font-family : “MyFont”, arial, sans-serif; }
استفاده از دستور @font-face در نسخه های خاصی از مرورگرهای وب پشتیبانی می شوند، بنابراین دقت داشته باشید که استفاده از این دستور ممکن است در برخی از مرورگرها برای شما مشکل ایجاد کند. اگر مرورگر کاربر وب سایت شما از این دستور پشتیبانی نکند، مرورگر به سراغ فونت های بعدی موجود در لیست خواهد رفت – پس فونت های بعدی را با دقت انتخاب کنید تا در ظاهر وب سایت شما اشکالی ایجاد نشود. نسخه های مختلف مرورگر که از این دستور پشتیبانی می کنند: Chrome5+, Firefox3.5+, IE9+, Safari3.1+, Opera10+.
