فونت های واکنشگرا

چاپ

راحت برای خواندن

صفحات W3.CSS برای خواندن،حتی برای افرادی با توانایی کم در خواندن، آسان است.


 سربرگ های <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-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
خودتان امتحان کنيد »

 تغییر پیش فرض های   W3.CSS

تغییر تنظیمات پیش فرض w3.CSS بسیار ساده است.

برای تغییر پیش فرض ها سه راه در پیش روی شماست:

  1. لغو تنظیمات پیش فرض در  بخش <head> صفحه
  2. افزودن فایل  CSS  خودتان بعد از W3.CSS 
  3. دانلود و تغییر محتوای فایل 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="https://beyamooz.com/lib/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  را تغییر دهید:

مثال

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
خودتان امتحان کنيد »

استفاده از فونت های غیررایج W3.CSS

با W3.CSS این که فونت ها را به صفحه اضافه کنید ،خیلی ساده است .


استفاده از کلاس فونت

در سربرگ صفحه وب خود (یا در Stylesheet خود) ،یک کلاس فونت ایجاد کنید:

مثال

.w3-myfont {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

از نام کلاس فونت در بدنه صفحه خود استفاده کنید:

مثال

<body>
  <p class="w3-myfont">Making the Web!</p>
</body>
خودتان امتحان کنيد »

استفاده از فونت های خارجی

در سربرگ صفحه وب خود یک فایل خارجی فونت قرار دهید و یک نام کلاس به فونت میدهیم:

مثال

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

<style>
.w3-tangerine {
  font-family: 'Tangerine', serif;
}
</style>

در بدنه صفحه وب خود، از نام کلاس استفاده کنید:

مثال

<body>
  <p class="w3-tangerine">Making the Web Beautiful!</p>
</body>
خودتان امتحان کنيد »

 مثال های  بیشترخودتان امتحان کنید

مثال

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
خودتان امتحان کنيد »
 

مثال

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">
خودتان امتحان کنيد »
 

مثال

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
خودتان امتحان کنيد »

افکت های فونت در Internet Explorer9  و نسخه های پایین تر کار نمیکنند.