การปรับแต่ง Font (Font Family, Size, Weight)

การปรับแต่ง Font (Font Family, Size, Weight)

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการจัดการสีและพื้นหลังไปแล้ว ในบทนี้ เราจะมาเจาะลึกเรื่องของการปรับแต่งตัวอักษร (Font) ซึ่งเป็นอีกหนึ่งองค์ประกอบสำคัญในการออกแบบเว็บไซต์ให้สวยงามและสื่อสารได้อย่างมีประสิทธิภาพ การเลือกใช้ฟอนต์ที่เหมาะสมจะช่วยเสริมสร้างเอกลักษณ์ของเว็บไซต์และดึงดูดความสนใจของผู้ใช้งานได้

Font Family: เลือกฟอนต์ที่ใช่

font-family คือคุณสมบัติ CSS ที่ใช้กำหนดชนิดของฟอนต์ที่ต้องการแสดงผลบนเว็บไซต์ การเลือกใช้ font-family ที่เหมาะสมจะช่วยให้เว็บไซต์ของคุณดูดีและอ่านง่ายมากยิ่งขึ้น

หลักการทำงานของ font-family

เมื่อเรากำหนด font-family ใน CSS, browser จะพยายามแสดงผลข้อความด้วยฟอนต์ที่เรากำหนด หาก browser ไม่พบฟอนต์นั้นในเครื่องของผู้ใช้งาน browser จะใช้ฟอนต์สำรองที่เรากำหนดไว้ใน font-family แทน ดังนั้นการกำหนดฟอนต์สำรองจึงเป็นสิ่งสำคัญ

ตัวอย่างการใช้งาน font-family

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-family: "Times New Roman", Times, serif;
}

p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

จากตัวอย่างข้างต้น:

• body จะใช้ฟอนต์ Arial หากไม่มี Arial จะใช้ฟอนต์ประเภท sans-serif ตัวใดก็ได้
• h1 จะใช้ฟอนต์ "Times New Roman" หากไม่มี จะใช้ Times หากไม่มีทั้งสองอย่าง จะใช้ฟอนต์ประเภท serif ตัวใดก็ได้
• p จะใช้ฟอนต์ Verdana หากไม่มี จะใช้ Geneva หากไม่มี จะใช้ Tahoma หากไม่มีทั้งสามอย่าง จะใช้ฟอนต์ประเภท sans-serif ตัวใดก็ได้

ประเภทของฟอนต์ (Generic Font Families)

ในการกำหนด font-family เรามักจะใส่ Generic Font Families ไว้เป็นตัวเลือกสุดท้ายเสมอ เพื่อให้มั่นใจว่า browser จะแสดงผลข้อความด้วยฟอนต์ที่อ่านได้เสมอ Generic Font Families มีดังนี้:

• serif: ฟอนต์ที่มีเชิง (เช่น Times New Roman) เหมาะสำหรับเนื้อหาที่ต้องการความน่าเชื่อถือ
• sans-serif: ฟอนต์ที่ไม่มีเชิง (เช่น Arial, Helvetica) เหมาะสำหรับเนื้อหาที่ต้องการความทันสมัย
• monospace: ฟอนต์ที่มีความกว้างของแต่ละตัวอักษรเท่ากัน (เช่น Courier New) เหมาะสำหรับ code
• cursive: ฟอนต์ที่เลียนแบบลายมือ (เช่น Brush Script MT) เหมาะสำหรับหัวข้อที่ต้องการความโดดเด่น (ควรใช้อย่างระมัดระวัง)
• fantasy: ฟอนต์ที่มีลักษณะแปลกตา (เช่น Papyrus) เหมาะสำหรับหัวข้อที่ต้องการความโดดเด่น (ควรใช้อย่างระมัดระวัง)

การใช้ฟอนต์จาก Google Fonts

Google Fonts เป็นแหล่งรวมฟอนต์ฟรีมากมายที่เราสามารถนำมาใช้บนเว็บไซต์ของเราได้ง่ายๆ โดยไม่ต้องดาวน์โหลดฟอนต์มาติดตั้งเอง

วิธีการใช้งาน Google Fonts

1. เข้าไปที่ Google Fonts แล้วเลือกฟอนต์ที่ต้องการ
2. คลิกที่ฟอนต์ที่เลือก แล้วเลือกรูปแบบ (styles) ที่ต้องการ (เช่น Regular, Bold, Italic)
3. คัดลอกโค้ดที่ Google Fonts ให้มา (ในส่วนของ <link> tag) แล้วนำไปใส่ใน <head> ของไฟล์ HTML ของคุณ
4. ใช้ font-family ที่ Google Fonts แนะนำใน CSS ของคุณ

ตัวอย่างการใช้ Google Fonts

สมมติว่าเราต้องการใช้ฟอนต์ "Roboto" จาก Google Fonts

1. เพิ่ม <link> tag ใน <head> ของ HTML

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

2. ใช้ font-family ใน CSS

body {
  font-family: 'Roboto', sans-serif;
}

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

font-size คือคุณสมบัติ CSS ที่ใช้กำหนดขนาดของตัวอักษร มีหน่วยวัดหลายแบบที่สามารถนำมาใช้ได้ เช่น:

• px (pixels): ขนาดคงที่ เหมาะสำหรับกำหนดขนาดที่แน่นอน
• em: ขนาดสัมพันธ์กับขนาดตัวอักษรของ element แม่ (parent element) 1em เท่ากับขนาดตัวอักษรของ element แม่
• rem (root em): ขนาดสัมพันธ์กับขนาดตัวอักษรของ root element (<html>)
• % (percentage): ขนาดเป็นเปอร์เซ็นต์ของขนาดตัวอักษรของ element แม่

ตัวอย่างการใช้งาน font-size

body {
  font-size: 16px; /* กำหนดขนาดตัวอักษรเริ่มต้นของ body เป็น 16 pixels */
}

h1 {
  font-size: 2em; /* ขนาดของ h1 จะเป็น 2 เท่าของขนาดตัวอักษรของ body (32px) */
}

p {
  font-size: 1.2rem; /* ขนาดของ p จะเป็น 1.2 เท่าของขนาดตัวอักษรของ root element */
}

ข้อแนะนำในการเลือกหน่วยวัด

โดยทั่วไป rem เป็นหน่วยวัดที่แนะนำให้ใช้ในการกำหนดขนาดตัวอักษร เนื่องจากมีความยืดหยุ่นและง่ายต่อการปรับขนาดตัวอักษรทั้งเว็บไซต์

Font Weight: กำหนดความหนาของตัวอักษร

font-weight คือคุณสมบัติ CSS ที่ใช้กำหนดความหนาของตัวอักษร

ค่าที่ใช้ได้สำหรับ font-weight

• normal: ความหนาปกติ (ค่าเริ่มต้น)
• bold: ความหนา
• bolder: หนาขึ้น
• lighter: บางลง
• 100 - 900: ค่าตัวเลขที่กำหนดความหนา (100 คือบางที่สุด, 900 คือหนาที่สุด)

ตัวอย่างการใช้งาน font-weight

h1 {
  font-weight: bold;
}

p.emphasize {
  font-weight: 700; /* เทียบเท่ากับ bold */
}

p.light {
  font-weight: lighter;
}

Font Style: กำหนดรูปแบบตัวอักษร

font-style คือคุณสมบัติ CSS ที่ใช้กำหนดรูปแบบของตัวอักษร

ค่าที่ใช้ได้สำหรับ font-style

• normal: รูปแบบปกติ (ค่าเริ่มต้น)
• italic: ตัวเอียง
• oblique: ตัวเอียง (อาจแตกต่างจาก italic เล็กน้อย ขึ้นอยู่กับฟอนต์)

ตัวอย่างการใช้งาน font-style

em {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการปรับแต่งตัวอักษรด้วย CSS ซึ่งประกอบไปด้วย font-family, font-size, font-weight และ font-style การทำความเข้าใจและใช้งานคุณสมบัติเหล่านี้อย่างถูกต้องจะช่วยให้เราสามารถสร้างเว็บไซต์ที่มีรูปแบบตัวอักษรที่สวยงามและเหมาะสมกับเนื้อหาได้

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการจัดตำแหน่งข้อความ (Text Alignment) ซึ่งเป็นอีกหนึ่งองค์ประกอบสำคัญในการจัด Layout ของเว็บไซต์