CSS - แบบอักษร

บทนี้จะสอนวิธีตั้งค่าแบบอักษรของเนื้อหาที่มีอยู่ในองค์ประกอบ HTML คุณสามารถตั้งค่าคุณสมบัติแบบอักษรขององค์ประกอบต่อไปนี้ -

  • font-family คุณสมบัติถูกใช้เพื่อเปลี่ยนใบหน้าของแบบอักษร

  • font-style คุณสมบัติถูกใช้เพื่อสร้างแบบอักษรตัวเอียงหรือเฉียง

  • font-variant คุณสมบัติถูกใช้เพื่อสร้างเอฟเฟกต์ขนาดเล็ก

  • font-weight คุณสมบัติถูกใช้เพื่อเพิ่มหรือลดลักษณะที่ตัวอักษรปรากฏเป็นตัวหนาหรือสว่าง

  • font-size คุณสมบัติถูกใช้เพื่อเพิ่มหรือลดขนาดของฟอนต์

  • font คุณสมบัติถูกใช้เป็นชวเลขเพื่อระบุคุณสมบัติแบบอักษรอื่น ๆ

ตั้งค่าตระกูลฟอนต์

ต่อไปนี้เป็นตัวอย่างซึ่งแสดงให้เห็นถึงวิธีการตั้งค่าแบบอักษรขององค์ประกอบ ค่าที่เป็นไปได้อาจเป็นชื่อตระกูลแบบอักษรใดก็ได้

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่ารูปแบบตัวอักษร

ต่อไปนี้เป็นตัวอย่างซึ่งสาธิตวิธีการตั้งค่ารูปแบบตัวอักษรขององค์ประกอบ ค่าที่เป็นไปได้ตามปกติและเอียงเอียง

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่า Font Variant

ตัวอย่างต่อไปนี้สาธิตวิธีตั้งค่าแบบอักษรขององค์ประกอบ ค่าที่เป็นไปได้ตามปกติและขนาดเล็กหมวก

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าน้ำหนักตัวอักษร

ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่าน้ำหนักแบบอักษรขององค์ประกอบ คุณสมบัติ font-weight มีฟังก์ชันในการระบุว่าฟอนต์เป็นตัวหนาเพียงใด ค่าที่เป็นไปได้อาจจะเป็นปกติตัวหนาโดดเด่นยิ่งขึ้น, น้ำหนักเบา, 100, 200, 300, 400, 500, 600, 700, 800, 900

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าขนาดตัวอักษร

ตัวอย่างต่อไปนี้สาธิตวิธีกำหนดขนาดฟอนต์ขององค์ประกอบ คุณสมบัติขนาดฟอนต์ถูกใช้เพื่อควบคุมขนาดของฟอนต์ ค่าที่เป็นไปได้อาจจะxx ขนาดเล็ก x ขนาดเล็กขนาดเล็กขนาดกลางขนาดใหญ่, X-Large, xx ขนาดใหญ่ขนาดเล็กขนาดใหญ่ขนาดพิกเซลหรือใน%

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าปรับขนาดตัวอักษร

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการตั้งค่าการปรับขนาดแบบอักษรขององค์ประกอบ คุณสมบัตินี้ช่วยให้คุณสามารถปรับความสูง x เพื่อทำให้แบบอักษรอ่านง่ายขึ้น ค่าที่เป็นไปได้อาจเป็นตัวเลขใดก็ได้

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าการยืดแบบอักษร

ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่าการยืดแบบอักษรขององค์ประกอบ คุณสมบัตินี้อาศัยคอมพิวเตอร์ของผู้ใช้เพื่อให้มีการใช้แบบอักษรขยายหรือย่อ

ค่าที่เป็นไปได้อาจจะเป็นปกติกว้างแคบพิเศษข้นพิเศษข้นข้นกึ่งข้นกึ่งขยายขยายพิเศษขยายพิเศษขยาย

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ทรัพย์สินชวเลข

คุณสามารถใช้คุณสมบัติฟอนต์เพื่อตั้งค่าคุณสมบัติฟอนต์ทั้งหมดพร้อมกัน ตัวอย่างเช่น -

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -