Change Font HTML: คู่มือการเปลี่ยนฟอนต์ใน HTML ด้วย CSS

กฎ CSS font-family ให้คุณกำหนดฟอนต์ของเอกสาร HTML เพื่ออ้างอิงฟอนต์ภายนอก คุณสามารถใช้เมธอด url() เพื่อกำหนด font-face หรือฝังไฟล์ CSS ฟอนต์จากเว็บไซต์อย่าง Google Fonts

ในฐานะนักพัฒนา จะมีเวลาที่เราไม่ต้องการใช้ฟอนต์เริ่มต้นที่โผล่มาเมื่อ HTML ถูกประมวลผล บทความนี้มีเป้าหมายแสดงวิธีเปลี่ยนฟอนต์ในเอกสาร HTML โดยใช้ best practices

วิธีเปลี่ยนฟอนต์ใน HTML

มี 3 วิธีในการเปลี่ยนฟอนต์ของหน้าเว็บใน HTML:

• ใช้ฟอนต์ built-in ด้วยกฎ font-family
• ใช้กฎ @font-face อ้างอิงฟอนต์ภายนอก
• ใช้ไฟล์ CSS ภายนอก (external CSS stylesheet) สำหรับสไตล์ฟอนต์

ในบทความนี้ เราจะพูดถึงแต่ละวิธีของการเปลี่ยนฟอนต์

HTML Change Font: Built-in Font-Family

วิธีแรกที่เราสามารถเปลี่ยนฟอนต์ได้คือการใช้คุณสมบัติ font-family ใน inline styling สามารถทำได้ดังนี้:

<p style="font-family:wingdings;" id="wingdings">New York</p>

เราเพียงแค่ใช้คุณสมบัติ font-family เพื่อระบุว่าต้องการใช้ฟอนต์ไหนในบล็อกข้อความ ฟอนต์มาตรฐานหลายตัวพร้อมใช้งานทันที

เป็นความคิดที่ดีที่จะมีฟอนต์สำรอง (fallback font) เผื่อกรณีฟอนต์ตัวแรกโหลดไม่ได้ ง่าย nhưการเพิ่มเครื่องหมายจุลภาคและชื่อ font-family ใหม่ ผมมักจบด้วย generic grouping ในกรณีขอบ (edge case) ที่ตัวแรกและตัวที่สองไม่พร้อมใช้งาน

<p style="font-family: Roboto, Lato, sans-serif" id="roboto-plus-backups">New York</p>

Generic grouping ท้ายสุดคือฟอนต์ sans-serif เริ่มต้นของอุปกรณ์ที่ client ใช้งาน ชื่อ generic family ที่ใช้ได้: monospace, serif, sans-serif, cursive, และ fantasy คุณยังสามารถเข้าถึงฟอนต์เฉพาะบางตัวได้เช่น Times New Roman

HTML Change Font: การใช้ @font-face

คุณสามารถใช้กฎ @font-face เพื่อนำเข้าฟอนต์จากแหล่งภายนอกไปยังหน้าเว็บของคุณ

เพื่อใช้วิธีนี้ คุณต้องเข้าถึงไฟล์เอกสารฟอนต์ภายนอก ไฟล์ฟอนต์มักมีนามสกุล ".ttf"

มา看看วิธีเปลี่ยนฟอนต์โดยใช้แอตทริบิวต์ font-face นี่คือกฎสไตล์ CSS ที่เราต้องใช้:

@font-face {
  font-family: "Open Sans";
  src: url(yoururl);
}

เราใช้แอตทริบิวต์สไตล์ font-face เพื่อประกาศฟอนต์ใหม่ แอตทริบิวต์ font-family กำหนดชื่อฟอนต์ใหม่ของเรา src: url() สั่งให้เอกสาร CSS ทราบว่าจะหาฟอนต์ของเราที่ไหน ค่าของ "yoururl" ควรเป็น URL ของฟอนต์ข้อความของคุณ

ฟอนต์ของเราจะยังไม่เปลี่ยนหน้าเว็บ เราต้องบอก CSS stylesheet ว่าองค์ประกอบไหนควรใช้ฟอนต์ใหม่ของเรา:

h1, h2, h3 {
  font-family: "Open Sans";
}

โค้ดนี้บอก CSS stylesheet ให้ใช้ฟอนต์ "Open Sans" กับบางองค์ประกอบบนหน้าเว็บ h1, h2, h3 เป็น CSS selector ที่ใช้สไตล์กับองค์ประกอบที่ระบุ องค์ประกอบเหล่านี้คือ HTML headings

Change Font HTML: External CSS Font (Google Fonts)

บางเว็บไซต์อย่าง Google Fonts ให้คุณฝังฟอนต์ลงในเว็บไซต์โดยใช้ CSS stylesheet สไตล์เหล่านี้ให้คุณกำหนดประเภทฟอนต์โดยใช้แอตทริบิวต์ CSS ในกรณีนี้ เราจะลองใช้ฟอนต์ 'Bangers' และ 'Yellowtail' จาก Google Fonts:

<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p>
<p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>

หากคุณรันโค้ดข้างต้นใน IDE ที่คุณเลือกและโหลด มันจะใช้ generic fonts เป็นค่าเริ่มต้น หากคุณต้องการใช้ฟอนต์เหล่านี้ คุณสามารถทำได้ด้วยไม่กี่ขั้นตอนง่ายๆ:

1. ไปที่ Google Fonts
2. ใช้เวลาลองเล่นกับเว็บไซต์หากต้องการ มีตัวเลือกฟอนต์มากมาย คุณสามารถปรับข้อความตัวอย่างได้ด้วยสิ่งที่คุณต้องการ มีช่องกรอกข้อมูลที่ด้านบนของหน้าเว็บ
3. ค้นหา 'Yellowtail' และคลิกที่มัน คุณจะไปยังหน้าจอที่มีข้อมูลรายละเอียดเกี่ยวกับฟอนต์ หาปุ่ม "+ Select This Style" และคลิก
4. แถบด้านข้าง (sidebar drawer) ควรจะโผล่พร้อมข้อมูลเกี่ยวกับการเลือกของคุณ จะอยู่เปิดขณะที่คุณเรียกดูฟอนต์เพิ่มเติม คลิกลิงก์ Browse Fonts ที่ด้านบนของหน้าจอ และค้นหา 'Bangers' ทำตามขั้นตอนเดียวกับ 'Yellowtail'
5. บนแถบด้านข้าง คุณจะเห็นแท็บ 'Embed' คลิกที่มัน
6. ตัวเลือก <link> ควรจะถูก highlight อยู่แล้ว คัดลอกและวาง <link> ลงใน head ของ HTML ของคุณ
7. ปฏิบัติตามแนวทางที่กำหนดสำหรับการใช้แต่ละฟอนต์ใน CSS พวกเขาให้ฟอนต์สำรองที่แนะนำด้วย
8. เสร็จแล้ว! คุณพร้อมใช้ฟอนต์เหล่านี้ในเอกสารของคุณ

โค้ดตัวอย่างที่ทำงานได้ด้านล่างแสดงการใช้ทั้ง built-in และ third-party fonts ลองนำเข้าโฟนต์อื่นๆ ดูสิ!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet">
</head>
<body>
  <p id="courier">New York</p>
  <p id="roboto">New York</p>
  <p id="raleway" style="font-family: Raleway, sans-serif">New York</p>
  <p id="serif" style="font-family: Courier New">New York</p>
  <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p>
  <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p>
  <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
  <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p>
</body>
</html>

สรุป

คุณสามารถเปลี่ยนฟอนต์ HTML ได้โดยใช้แอตทริบิวต์ font-family หรือโดยใช้ external CSS stylesheet พร้อม custom fonts หากต้องการฝัง custom font ลงใน CSS ของเว็บไซต์ คุณสามารถใช้กฎ @font-face

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