CSS - การจัดการ Font-face และ Custom Fonts

กับโลกของการออกแบบเว็บไซต์ที่เปลี่ยนแปลงตลอดเวลา การเพิ่มเอกลักษณ์ให้กับเว็บไซต์ด้วยการใช้ฟอนต์ที่ไม่ซ้ำแบบใครจึงกลายเป็นส่วนสำคัญของการออกแบบเว็บในปัจจุบัน หนึ่งในวิธีที่นักพัฒนาเว็บสามารถใช้งานฟอนต์ที่ไม่ธรรมดาคือการใช้ CSS `@font-face` ที่ช่วยให้เราสามารถนำฟอนต์ที่กำหนดเองมาใช้บนเว็บไซต์ได้

อะไรคือ @font-face ใน CSS?

`@font-face` คือคำสั่งใน CSS ที่ช่วยให้เราสามารถนำฟอนต์มาใช้บนเว็บไซต์ได้แม้ฟอนต์นั้นจะไม่ได้เป็นฟอนต์ที่ติดมากับระบบปฏิบัติการของเครื่องผู้ใช้ก็ตาม โดยเราสามารถระบุแหล่งที่มาของฟอนต์ ฟอนต์ชื่อ และรูปแบบของฟอนต์เพื่อนำมาใช้งานได้

การใช้งาน @font-face

การใช้งาน `@font-face` นั้นไม่ยาก เพียงทำตามขั้นตอนดังนี้:

@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont.woff2') format('woff2'),
         url('mycustomfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

จากตัวอย่างข้างต้น เราได้กำหนดฟอนต์ชื่อ `MyCustomFont` โดยระบุฟอนต์จากไฟล์ `mycustomfont.woff2` และ `mycustomfont.woff` ซึ่งเป็นรูปแบบที่เป็นมาตรฐานและรองรับในหลายเบราว์เซอร์ การใช้หลายๆ format ช่วยในการรองรับการแสดงผลบนเครื่องมือและเบราว์เซอร์ที่แตกต่างกันออกไป

วิธีนำฟอนต์มาใช้งานในเว็บไซต์

เมื่อเรากำหนดฟอนต์เรียบร้อยแล้ว การเรียกใช้งานในเว็บไซต์ก็ทำได้ง่ายๆ โดยใช้คำสั่ง CSS ในการจัดรูปแบบฟอนต์

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

การใช้ `font-family` เหมือนเป็นการระบุชนิดฟอนต์ที่ต้องการ สำหรับกรณีที่ฟอนต์ที่เรากำหนดไม่สามารถเรียกใช้งานได้ (เช่น ไฟล์เสียหาย หรือไม่สามารถโหลดมาได้) เบราว์เซอร์จะใช้ฟอนต์ที่ระบุในลำดับต่อไปตามที่กำหนดไว้ (ในที่นี้คือ `sans-serif`)

ข้อควรระวังในการใช้ Custom Fonts

การนำฟอนต์จากบริการภายนอก

หากไม่ต้องการจัดการกับไฟล์ฟอนต์ด้วยตัวเอง สามารถใช้บริการฟอนต์ออนไลน์อย่าง Google Fonts หรือ Adobe Fonts ที่ช่วยให้คุณสามารถเลือกและใช้ฟอนต์ที่หลากหลายได้ง่ายๆ เพียงแค่เพิ่มลิงก์ไปยัง CSS ของเว็บไซต์

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

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

<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>

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

ประโยชน์ของการใช้ Custom Fonts

การใช้ Custom Fonts ช่วยให้เว็บไซต์ดูมีเอกลักษณ์และดึงดูดผู้ใช้ได้มากขึ้น การเลือกใช้ฟอนต์ที่ตรงกับแบรนด์หรือสไตล์ของเว็บไซต์จะช่วยสร้างประสบการณ์ที่ดีให้กับผู้ใช้งานได้อย่างแน่นอน

การเรียนรู้และเข้าใจในการจัดฟอนต์ภายในเว็บไซต์นั้นนอกจากจะเป็นทักษะที่ทำให้เว็บไซต์ของคุณโดดเด่นแล้วยังเป็นพื้นฐานสำคัญในโลกของการพัฒนาเว็บอีกด้วย

หากคุณสนใจในการพัฒนาทักษะการเขียนโปรแกรมและการออกแบบเว็บไซต์ การเลือกเรียนกับสถาบันอย่าง Expert-Programming-Tutor (EPT) ที่มีหลักสูตรครอบคลุมสำหรับผู้เริ่มต้นและผู้มีประสบการณ์ก็อาจเป็นก้าวที่ดีสำหรับคุณในการพัฒนาศักยภาพของตนเอง!

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

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/