در جلسات قبل از سری جلسات آموزش CSS به استایل دهی متن ها , Margins و Paddin و خاصیت height و width پرداختیم. در این جلسه قصد داریم به یکی از جذاب ترین بخش ها یعنی کار با فونت ها بپردازیم. چطور می توانیم فونت ها در CSS را سفارشی سازی کنیم و استایل های متنوع به آن بدهیم؟ تا پایان این جلسه با ما همراه باشید.
از این خاصیت برای تعیین نوع فونت یا خانواده ی فونت عنصر مورد نظر استفاده می شود. فونت ها را در حالت کلی می توان به دو نوع فونت پیش فرض و فونت های جایگزین تقسیم کرد.
فونت های پیش فرض به فونت هایی گفته میشود که در همه ی سیستم های کامپیوتری وجود دارد. یعنی وقتی سیستمی نصب می شود به طور پیش فرض دارای فونت هایی است که می توان از آن برای موارد مختلف استفاده کرد.
تعداد دیگری فونت نیز وجود دارند که توسط مرورگرها پشتیبانی می شوند. اکثر مرورگرها از این فونت های عمومی پشتیبانی می کنند و آنها را به همان شکل تعریف شده نمایش می دهند.
زمانی که برای وب سایت خودمان فونت اختصاصی تعریف نکرده باشیم, این فونت های پیش فرض به کاربر نمایش داده می شوند. حالا این فونت های عمومی و پیش فرض کدام هستند؛
کدام فونت ها را در سیستم های مختلف دیده اید اما در لیست ما نیامده است؟
فونت های جایگزین به یک سری فونت های اختصاصی گفته می شود که ما برای وب سایت مان تعریف می کنیم. تعداد این فونت ها معمولا بیشتر از یکی است. اما چرا؟
دلیل جایگزین کردن چند فونت این است که اگر فونت اول به هر دلیلی نمایش داده نشد, فونت دوم فراخوانی شود. به همین ترتیب اگر هر فونت قابل اجرا روی مرورگر مورد نظر نبود, فونت بعدی اجرا شود و … .
اما چندین فونت را به چه صورت باید در زبان CSS تعریف کنیم؟ به شکل زیر؛
font-family: font1, font2, font3, font4,…font*n ;
یک نکته ی خیلی مهم: دقت کنید که اگر نام فونت شما بیشتر از یک کلمه بود برای استفاده از آن در کدهای CSS لازم است که آن را در کوتیشن ( “” ) بگذارید. به مثال زیر نگاه کنید؛
<style>
body{
font-family: “Times New Roman“, tahoma, serif;
}
</style>
در جلسه 7 از آموزش HTML به معرفی تگ فونت پرداختیم. برای مطالعه ی این جلسه از لینک قرار داده شده استفاده کنید.
از این ویژگی برای طراحی های ظاهری فونت استفاده می شود. مثلا اینکه می خواهیم فونت ما شکسته باشد یا مورب و … .
معمولا برای این تغییرات از مقادیر زیر استفاده میشود؛
|
normal |
نمایش فونت ها به صورت عادی |
|
Italic |
نمایش فونت ها به صورت کج |
| Oblique |
نمایش فونت ها به صورت مورب |
P{
font-family: “Times New Roman“, tahoma, serif;
font-style: italic;
}
از این ویژگی برای تعیین اندازه ی فونت ها استفاده می شود. این ویژگی قابلیت های بسیاری برای تعیین اندازه های مختلف متن دارد اما باید این نکته را در نظر بگیرید که متناسب با هر متن و جایگاه آن سایز فونت متعارفی را در نظر بگیرید. برای مثال نباید برای تیترها
سایز فونت متن عادی را در نظر گرفت یا متن عادی را با سایز تیتر تنظیم کرد.
اندازه ی فونت ها را می توانیم بر حسب پیکسل, em یا درصد تعیین کنیم که هر کدام مزایای خود را دارند.
استفاده از پیکسل برای تعیین اندازه های متن این مزیت را دارد که به کاربر مدیریت کامل اندازه ی نوشته را خواهد داد. ضمن اینکه با استفاده از پیکسل می توان اندازه ی کل صفحه را به صورت دلخواه تغییر داد که این یک مزیت عالی محسوب می شود.
برای تعیین اندازه ی فونت با استفاده از em باید بدانید که هر em1 معادل 16 پیکسل است. با استفاده از این فرمول می توان از واحد em نیز استفاده کرد. مزیت این واحد این است که قابلیت تنظیم نوشته در تمامی مرورگرها را امکان پذیر می کند.
اما توصیه ی ما برای تعیین اندازه ی فونت پیش فرض این است که از واحد درصد استفاده کنید.
body {
font-size: 100%;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
font-size: 20px;
}
ویژگی font-weight برای تغییر وزن یک فونت مورد استفاده قرار می گیرد. منظور از وزن, میزان کلفتی و نازکی فونت است. برای استفاده از این ویژگی باید به این نکته توجه کرد و آن اینکه نمی توان وزن هر فونتی را تغییر داد. در واقع فقط font-weight فونتی که دارای وزن های مختلف باشد را می توان تغییر داد.
مقادیری که این ویژگی می تواند بپذیرد را در جدول زیر مشاهده خواهید کرد؛
|
normal |
مقدار پیش فرض |
|
bold |
کلفت یا پررنگ |
| bolder |
کلفت تر و پر رنگ تر از bold |
|
Lighter |
فونت نازک |
| ۱۰۰ – ۹۰۰ |
مشخص کردن وزن فونت به صورت عدد |
h3{
font-family: tahoma, “Times New Roman“;
font-style: Oblique;
font-weight: 800; /*font-weight: bold; */
}
با استفاده از این ویژگی می توان متن را با حروف بزرگ نمایش داد. در این حالت حروف بزرگ کمی بزرگتر از بقیه ی حروف نمایش داده خواهند شد. مقدار این ویژگی برای پیش فرض normal است و حالت دیگر می تواند small-caps باشد.
<style>
body{
font-variant:small-caps;
}
</style>
مقادیری که ویژگی font-variant می پذیرد شامل موارد زیر می باشد:
Normal : مرورگر قلم عادی را نشان می دهد. این پیش فرض است.
Inherit : این ویژگی را از عنصر اصلی خود به ارث می برد.
Initial : این ویژگی را به مقدار پیش فرض خود تنظیم می کند.
all-small-caps : این ویژگی همه ی حروف را با حروف بزرگی که سایز آنها کوچک شده نمایش می دهد.
all-petite-caps : مانند all-small-caps است.
small-caps : این مقدار حروف انگلیسی کوچک را به حروف بزرگ که سایز آنها کوچک شده اند تغییر می دهد.اعداد و حروفی که بزرگ نوشته شده اند تغییری نخواهند کرد.
petite-caps : مانند small-caps است.
unicase : تمامی اعداد ، علامت ها و حروفی که بزرگ نوشته شده اند را در سایز کوچک نمایش می دهد و مابقی حروف در حالت عادی باقی می مانند.
مثال:
<p> What are the font styles in CSS? </p>
<style>
p{
font-family: tahoma, “Times New Roman“;
font-style: normal;
font-size: 25px;
font-variant:small-caps;
}
</style>
امیدواریم که این جلسه برای شما مفید بوده باشد. با ما درجلسات بعد آموزش CSS همراه باشید.
😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊
