فونت های واکنشگرا
راحت برای خواندن
صفحات W3.CSS برای خواندن،حتی برای افرادی با توانایی کم در خواندن، آسان است.
- سایز پیش فرض W3.CSS برابر 15px است.
- فونت پیش فرض برای متن های انگلیسی، برابرVerdana است که بهترین فاصله بین حروف را دارد.
- فاصله پیشفرض بین خطوط، 1.5 می باشد.
سربرگ های <h1> - <h6>
به صورت پیش فرض در W3.CSS ،سربرگ های HTML به این صورت سبک دهی می شوند:
مثال
<h1>Heading 1 (36px)</h1>
<h2>Heading 2 (30px)</h2>
<h3>Heading 3 (24px)</h3>
<h4>Heading 4 (20px)</h4>
<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>
کلاس های اندازه فونت
توجه داشته باشید که فقط با استفاده از تگ های H1 تا H6 می توان عنوان مطالب را نمایش داد.و سعی نکنید که با تغییر اندازه فونت، سعی کنید متنی را بجای عنوان نمایش دهید.
در W3.CSS اندازه فونت ها توسط کلاس های w3-size تنظیم می شوند:
مثال
تغییر پیش فرض های W3.CSS
تغییر تنظیمات پیش فرض w3.CSS بسیار ساده است.
برای تغییر پیش فرض ها سه راه در پیش روی شماست:
- لغو تنظیمات پیش فرض در بخش <head> صفحه
- افزودن فایل CSS خودتان بعد از W3.CSS
- دانلود و تغییر محتوای فایل W3.CSS
در زیر سه روش بالا را توضیح می دهیم:
1- لغو تنظیمات پیشفرض در بخش <head>
h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
خودتان امتحان کنيد »2- CSS مد نظرتان را را بعد از W3.CSS بیافزایید
<link rel="stylesheet" href="/myStyle.css">
3- تغییر W3.CSS
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
تغییر فونت پیش فرض صفحه
در سربرگ صفحه خودتان (یادر stylesheet) ، بعد از بارگذاری W3.CSS سبکهای html و body را تغییر دهید:
مثال
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
استفاده از فونت های غیررایج W3.CSS
با W3.CSS این که فونت ها را به صفحه اضافه کنید ،خیلی ساده است .
- ساده برای استفاده (فقط HTML و CSS)
- استفاده از کتابخانه های فونت خارجی (مانند Google )
- کار کردن با تمام مرورگرهای جدید
استفاده از کلاس فونت
در سربرگ صفحه وب خود (یا در Stylesheet خود) ،یک کلاس فونت ایجاد کنید:
مثال
.w3-myfont {
font-family: "Comic Sans MS", cursive, sans-serif;
}
از نام کلاس فونت در بدنه صفحه خود استفاده کنید:
استفاده از فونت های خارجی
در سربرگ صفحه وب خود یک فایل خارجی فونت قرار دهید و یک نام کلاس به فونت میدهیم:
مثال
<style>
.w3-tangerine {
font-family: 'Tangerine', serif;
}
</style>
در بدنه صفحه وب خود، از نام کلاس استفاده کنید:
مثال های بیشترخودتان امتحان کنید
مثال
href="https://fonts.googleapis.com/css?family=Lobster">
مثال
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">
مثال
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
افکت های فونت در Internet Explorer9 و نسخه های پایین تر کار نمیکنند.
- نوشته شده توسط زهرا داوودی
- بازدید: 3761
