.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
فونت های پشتیبان !
خب یه موردی وجود داره برای اینکه اگر فونت ما هر بلایی سرش اومد و نتونست لود بشه ما میایم یه فونت دیگه معرفی میکنیم و میگیم برو این فونت رو لود کن و اگه نشد بعدی و بعدی و … در مثال بالا اومدیم با علامت , این فونت های بعدی رو مشخص کردیم که اگر فونت اول لود نشد حالا به دلیلی بیاد بره فونت بعدی رو لود کنه تا بالاخره یه فونت اوکی باشه و لود بشه روی صفحه !
استایل فونت ها در CSS
اگه خواستیم فونت ها رو استایل بدیم (فقط این مساله رو با استایل در CSS قاطی نکنین ! این میشه استایل دهی به فونت ها) و منظورمون از استایل ایتالیک کردن هستش مثلا … میایم از ویژگی font-style استفاده میکنیم مثال پایین رو ببینین متوجه میشین کاملا :
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
وزن دهی فونت ها در CSS
وزن دهی به فونت ها با استفاده از CSS روش کاملا آسونی هستش . فقط کافیه بیایم به المان بگیم وزن این فونت اینقدر هست و خود CSS و مرورگر به کمک همدیگه این قابلیت رو برای ما ایجاد میکنن. یعنی چی ؟! مقدار عددی میدیم از ۱۰۰ تا ۹۰۰ که وزن کم و زیاد هستش . فقط دقت کنید این عددها بازه ۱۰۰ تایی هستند نیان وسط کار ریز درج کنین ! حالا میتونیم بیایم از عبارت bold هم استفاده کنیم بطور مثال ! (موارد دیگه هم وجود داره که میتونیم متن بنویسیم. ترجیحا از عدد استفاده کنین ! در دوره های پیشرفته آموزش برنامه نویسی کاملا توضیح داده میشه همه این موارد ! ) به مثال های زیر توجه کنین :
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.w100 {
font-weight: 100;
}
p.w500 {
font-weight: 500;
}
سایز فونت ها در CSS
در بیشتر موارد ما نیاز داریم که تمامی سایزهای فونت وب سایت رو عوض کنیم . یعنی بیایم المان ها رو بزرگ تر نشون بدیم ویا کوچیک تر ! حالا وقت اون هستش که با خصوصیت font-size آشنا بشین . با این خصوصیت میتونیم بیایم المان ها رو سایز متن هاشون رو بزرگ و کوچیک کنیم . فقط یک نکته رو رعایت کنین ! اون هم اینه در تازه کاران مشاهده میشه که سایزهای فونت رو نزدیک به هم میذارن در المان های تگ های هدینگ و المان های پاراگراف ! این کار به وفور دیده شده ولی نباید این کار رو بکنیم چرا که هر المان اهمیت خودش رو داره و ما داریم میایم برای دید کاربر تمامی این المان ها رو یکسان میذاریم .
روش های تنظیم کردن سایز فونت نوشته ها مختلف هستش . میشه به پیکسل باشه و یا مقادیر دیگه ! در زیر تقریبا تمامی این روش ها توضیح داده شده :
تعیین سایز فونت نوشته ها با پیکسل
میتونیم بیایم از مقدارهای پیکسل استفاده کنیم تا بتوینم سایز نوشته ها رو مشخص کنیم . توی این روش نمیتونیم فونت رو جوری سایزبندی کنیم که با بزرگ تر شدن صفحه سایزش متفاوت باشه ! و همین مشکل توی برخی جاها اذیت کننده میشه . مثال های زیر رو ببینین :
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
تعیین سایز فونت نوشته ها با EM
خب یه روش دیگه هم هست که میتونیم بیایم بر اساس سایز استاندارد صفحه که پیش فرض مرورگرها هست سایز بدیم ! یعنی پیش فرض فونت پاراگراف عدد ۱۶ پیکسل هست که میشه مقدار ۱ EM و ما میایم بر اساس مقداری که میخوایم تبدیل بشه از em استفاده میکنیم و بقیه کارها با CSS و مرورگرمونه ! مثال های زیر رو ببینین :
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
این روش هم مثل مثال قبلی محدویت هایی داره و نمیتونه بیاد سایز این متن ها رو خیلی عوض کنه . رسپانسیو بودن سایز متن ها با روش های دیگه ای هستش !
رسپانسیو کردن سایز متن ها
برای رسپانسیو کردن سایز متن ها میتونیم بیایم از عرض صفحه ای که کاربر در حال مشاهده هست استفاده کنیم ! در جلسات قبلی دوره های آموزش برنامه نویسی در HTML و CSS یاد گرفتیم که VW یا همون viewport width چی هستش . حالا میایم از همون مقدار واحد برای عدد دهی به سایز متن ها استفاده می کنیم . مثال زیر رو ببینین :
Hello World
<h1 style="font-size:10vw">Hello World</h1>
فقط الان برای تست کردن این مورد کافی هست که ابعد این صفحه رو که الان باز دارین عوض کنین و مشاهده میکنین که این متن کوچیک و بزرگ میشه بر اساس صفحه شما ! مقدارش هم به این حالت هست که هر 1vw برابر است با 1% از ابعاد عرض صفحه ای که در حال حاضر کاربر در حال مشاهده هستش .
