CSS Fonts รูปแบบตัวอักษร

5 min readSep 26, 2019

เกี่ยวกับรูปแบบของตัวอักษร กำหนด [font-family: … ; ] ความหนา ขนาด รูปแบบของตัวอักษร Bra Bra Bra

ความแตกต่างระหว่าง Serif และ Sans-serif Fonts จะมี

font :: กำหนดค่ารวมกันได้ เช่น ลักษณะตัวอักษร ขนาด รูปแบบ
font-family   :: รูปแบบตัวอักษร
font-size     :: ขนาดตัวอักษร
font-style    :: ลักษณะตัวอักษร
font-varient  :: ตัวแรกจะมีขนาดใหญ่
font-weight   :: น้ำหนักตัวอักษร

CSS Font Families รูปแบบตัวอักษร

ใน CSS มี 2 ชนิด ที่เป็นชื่อของ font family คือ

generic family : กลุ่มของ font families คล้ายกับ ("Serif" หรือ "Monospace") font family : ระบุ font family  ( "Times New Roman" หรือ"Arial")

Font Family รูปแบบตัวอักษร

กำหนดค่า font family รูปแบบของตัวอักษร [font family: …………… ;] และถ้า font family มีมากกว่าหนึ่งคำ ให้ใช้เครื่องหมาย quotation marks (,)

<!doctype html>
<html lang="en">
    <head>
      <style>
         h1 {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
         }
         div {
             color: rgb(24, 180, 58);
             text-transform: capitalize;
             line-height: 1.5;
             word-spacing: 3px;
         }
      </style>
   </head><body>
     <h1>CSS Font Families</h1>
     <div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
    </div>
</body>
</html>

**font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;**

Font Style ลักษณะตัวอักษร

กำหนด Font Style เป็นแบบธรรมดา หนา เอียง ตามคำสั่งนี้ [font-style: ………. ;]

normal - ธรรมดา
italic - ตัวเอียง
oblique - ตัวเอียง

มาลองทำกันเลย

<!doctype html>
<html lang="en">
    <head>
      <style>
         h1 {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
             font-style: italic; //ตัวอักษรเอียง
         }
         div {
             color: rgb(24, 180, 58);
             text-transform: capitalize;
             line-height: 1.5;
             word-spacing: 3px;
         }
      </style>
   </head><body>
     <h1>CSS Font Families</h1>
     <div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
    </div>
</body>
</html>

Font Size ขนาดตัวอักษร

กำหนดค่าขนาดของตัวอักษร [font-size: ……….;]

Set Font Size With Pixels กำหนดขนาด Font ด้วย Pixels

<!doctype html>
<html lang="en">
    <head>
      <style>
         h1.text {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
             font-style: italic; //ตัวอักษรเอียง
             font-size: 50px;  //ขนาดของตัวอักษร
         }
         div {
             color: rgb(24, 180, 58);
             text-transform: capitalize;
             line-height: 1.5;
             word-spacing: 3px;
         }
      </style>
   </head><body>
     <h1 class="text">CSS Font Families</h1>
     <div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
    </div>
</body>
</html>

Set Font Size With Em กำหนดขนาด Font ด้วย Em

<!doctype html>
<html lang="en">
    <head>
      <style>
         h1.text {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
             font-style: italic; //ตัวอักษรเอียง
             font-size: 5em;  //ขนาดของตัวอักษร ด้วยem /*80px/16=5em */         }
         div {
             color: rgb(24, 180, 58);
             text-transform: capitalize;
             line-height: 1.5;
             word-spacing: 3px;
         }
      </style>
   </head><body>
     <h1 class="text">CSS Font Families</h1>
     <div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
    </div>
</body>
</html>

**font-size: 5em; //ขนาดของตัวอักษร ด้วยem** /*80px/16=5em */

Use a Combination of Percent and Em ใช้ % และ em ร่วมกัน

<!doctype html>
<html lang="en">
    <head>
      <style>
         body {
             font-size: 100%; //ขนาดตัวอักษร ด้วย percent
         }
         h1.text {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
             font-style: italic; //ตัวอักษรเอียง
             font-size: 5em; //ขนาดตัวอักษร ด้วยem /*80px/16=5em */}
         div {
             color: rgb(24, 180, 58);
             text-transform: capitalize;
             line-height: 1.5;
             word-spacing: 3px;
             font-size: 1.5em; //ขนาดตัวอักษร ด้วยem /*24px/16=1.5em */
         }
      </style>
   </head><body>
     <h1 class="text">CSS Font Families</h1>
     <div>
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
    </div>
</body>
</html>

font-size: 100%; //ขนาดตัวอักษร ด้วย percent ; font-size: 5em; //ขนาดตัวอักษร ด้วยem /*80px/16=5em */ ; font-size: 1.5em; //ขนาดตัวอักษร ด้วยem/*24px/16=1.5em */

Font Weight น้ำหนักตัวอักษร

การกำหนดค่าความหนา ความบางของตัวอักษร [font-weight: ……..;]

Responsive Font Size กำหนดค่าตัวอักษรด้วย vm (size. 1vw = 1%)

<!doctype html>
<html lang="en">
    <head>
      <style>
         body {
             font-size: 100%; //ขนาดตัวอักษร ด้วย percent
         }
         h1.text {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
             font-style: italic; //ตัวอักษรเอียง
             font-size: 5em; //ขนาดตัวอักษร ด้วยem /*80px/16=5em */
             font-weight: bold;  //อักษรตัวหนา
         }
         div {
             color: rgb(24, 180, 58);
             text-transform: capitalize;
             line-height: 1.5;
             word-spacing: 3px;
             font-size: 1.5em; //ขนาดตัวอักษร ด้วยem /*24px/16=1.5em */
         }
      </style>
   </head><body>
     <h1 class="text">CSS Font Families</h1>
     <div style="font-size: 2vw;">  //ขนาดตัวอักษร 2 vm
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
    </div>
</body>
</html>

Font Variant ตัวแรกจะมีขนาดใหญ่

จะมีอยู่ 2 แบบ ให้เรากำหนด ดังนี้ [font-variant: ………..;]

1.normal คือไม่มีอะไรเปลี่ยนแปลง
2.small-caps คือจะแปลงตัวอักษรให้เป็นตัวอักษรตัวใหญ่ทั้งหมด ตัวอักษรตัวแรกของคำจะมีความแตกต่างจากพวก คือจะมีขนาดใหญ่ขึ้นไปอีก

มาลองเขียนกัน!!!

<!doctype html>
<html lang="en">
    <head>
      <style>
         body {
             font-size: 100%; //ขนาดตัวอักษร ด้วย percent
         }
         h1.text {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; //รูปแบบของตัวอักษร
             font-style: italic; //ตัวอักษรเอียง
             font-size: 5em;  //ขนาดตัวอักษร ด้วยem /*80px/16=5em */
             font-weight: bold;  //อักษรตัวหนา
             font-variant: small-caps;  //ตัวแรกจะมีขนาดใหญ่ 
         }
         div {
             color: rgb(24, 180, 58);
             text-transform: capitalize;
             line-height: 1.5;
             word-spacing: 3px;
             font-size: 1.5em; //ขนาดตัวอักษร ด้วยem /*24px/16=1.5em */
         }
      </style>
   </head><body>
     <h1 class="text">CSS Font Families</h1>
     <div style="font-size: 2vw;">  //ขนาดตัวอักษร 2 vm
generic family - a group of font families with a similar look (like "Serif" or "Monospace")<br>
font family - a specific font family (like "Times New Roman" or "Arial")
    </div>
</body>
</html>

**font-variant: small-caps; //ตัวแรกจะมีขนาดใหญ่**

ส่งท้ายนี้

Font คือการเอาทุกอย่างมาเขียนรวม เช่น

font: italic 20px Verdana; //ลักษณะตัวอักษร ขนาด รูปแบบ

ยังลองดูน่ะ ติชมมาได้เลยเราจะได้ปรับปรุงแนวทางการเขียนถ้าเข้าใจ บางทีเราเองก็เริ่มงง ฮาๆๆ เรื่องนี้เกี่ยวกับ Font ล้วนๆ มีวัวผสมหน่อย มีการเอาเนื้อหาจากเรื่องอื่นมาแจมหน่อยๆ เพื่อให้มีสีสันมากขึ้นขึ้นขึ้น