آموزش font در CSS

آموزش font در CSS

 

ممکن است شما بخواهید از فونت خاصی برای سایت خود استفاده کرده و شکل و نمای زیباتری را اعمال کنید.

برای شروع آموزش اول مثال زیر را اجرا کنید تا فونت پیشفرض را مشاهده کنید.

 

<!DOCTYPE html>
<html>
<head>
  <title>lesson</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
  <div id="firstdiv" class="test">
      آموزش رایگاه طراحی وبسایت در سایت فرکیان تک
  </div>

  <div id="seconddiv" class="test">
      آموزش رایگاه طراحی وبسایت در سایت فرکیان تک
  </div>

</body>
</html>

 

.test:nth-child(2n){
  background-color: red;
}
.test:nth-child(2n+1){
  background-color: yellow;
}
.test{
  margin: 20px;
  border-radius: 10px;
  padding: 20px;
}
div:hover{
  margin: 40px;
  color: blue;
}
استفاده از فونت در css
 

حال با دستور font-family، فونت مورد نظر خود را فراخوانی کنید. در اینجا div اول به رنگ زرد است را انتخاب میکنم.

 

#firstdiv{
  font-family: Tahoma;
}

استفاده از font در css
 

در نظر داشته باشید که ممکن است فونتی که شما انتخاب میکنید در سیستم کاربر وجود نداشته باشد. برای این کار از نوع تعریف زیر انتخاب کنید.

Font-family: Arial, Tahoma;

این دستور در مرحله اول Arial را اجرا میکند. اگر این فونت وجود نداشت به سراغ فونت دوم می رود.

میتوانید از دستور های زیر استفاده کرده و سایز و استایل متن را تغییر دهید.

 

#firstdiv{
  font-family: Tahoma;
  font-size: 30px;
  font-weight: bold;
  font-style: italic;
}
font در css
 

اگر شما بخواهید که حتما سایت شما با فونت مد نظرتان اجرا شود باید در مرحله اول فونت مورد نظر را دانلود کنید یا اینکه از control panel کپی کنید و در پوشه مورد نظر past کنید.

آموزش استفاده از فونت در css

 

 

استفاده از font در css
 

بعد با دستور @font-face منبع فونت را نوشته و همچنین برای font-family آن یک اسم دلخواه نام برده و هرجا نیاز داشتید، نام جدید را صدا بزنید.

 

@font-face{
  src: url("arabtype.ttf");
  font-family: myfont;
}

#firstdiv{
  font-family: myfont;
  font-size: 30px;
  font-weight: bold;
  font-style: italic;
}
استفاده از فونت ها در طراحی سایت
 

برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.

 

قسمت قبل آموزش (آموزش width و height در CSS)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.