แปลงไฟล์ฟ้อนต์ (นามสกุล .TTF, .OTF) สำหรับใช้กับเว็บไซต์

bysemicon -
0

 





วิธีการแสดงผลฟ้อนต์บนเว็บไซต์ สามารถทำได้ 2 วิธีหลัก ๆ

1. ใช้บริการ Online Font Service (บริการฟ้อนต์ออนไลน์) ต่าง ๆ ที่มีไฟล์ฟ้อนต์บน Server  แล้วนำลิงก์มา Embed บนหน้าเว็บไซต์ บริการฟรีก็เช่น Google Fonts แต่ยังมีฟอนต์ภาษาไทยจำนวนน้อยอยู่

2. นำไฟล์ฟ้อนต์มาแปลงให้เหมาะกับหน้าเว็บไซต์ แล้ว Embed ด้วย CSS3 @font-face ซึ่งในที่นี้เราจะใช้เว็บไซต์ FontSquirrel Web Font Generator  ช่วยในการแปลงฟอนต์

ขั้นตอนการอัพโหลด Web Font ภาษาไทย

1) คลิกปุ่มอัพโหลดฟ้อนต์



2) คลิก Expert… เพื่อแสดง Option เพิ่มขึ้น


ข้อควรระวัง: ถ้าฟ้อนต์มีหลายน้ำหนัก (เช่น Light, Regular, Semi-bold, Bold) ควรจะเลือกใช้ในเว็บแค่ 1-2 น้ำหนัก เท่านั้น เพราะยิ่งมีเราใช้หลายน้ำหนัก ยิ่งมีไฟล์ฟ้อนต์เยอะ และทำให้เว็บไซต์โหลดนานขึ้นตามไปด้วย ปกติผมจะเลือกแค่น้ำหนัก Regular กับ Bold หรือ Semi-bold แล้วแต่ดีไซน์ของฟ้อนต์

3) หลังจากกด Expert… แล้ว จะมี Option โผล่มาให้เลือก ให้เลื่อนลงมาหาหัวข้อ Subsetting แล้วเลือก No Subsetting ส่วน Option อื่น ๆ ไม่ต้องสนใจ



4) กดติ๊กถูกเพื่อยอมรับข้อตกลง แล้วกดปุ่ม Download Your Kit ได้เลย



ในขั้นตอนการ Download ฟ้อนต์ต้องรอสักพักนึงครับ ประมาณ 30 – 60 วินาทีต่อฟ้อนต์ ซึ่งยิ่งแปลงฟ้อนต์หลายน้ำหนักก็จะยิ่งใช้เวลาเยอะ เราจะดูได้จากด้านบนสุดว่ากำลังประมวลผลฟ้อนต์ไหนอยู่

5) เปิดไฟล์ ZIP ที่ดาวน์โหลดจาก Font Squirrel เมื่อเปิดไฟล์ ZIP ออกมาจะพบกับไฟล์ต่างๆ หลายไฟล์ ดังนี้


1. เราสามารถคลิก ชื่อฟ้อนต์-webfont.xxx   เปิดไฟล์ใน Web Browser เพื่อดูว่าฟ้อนต์ที่เราแปลงมาแสดงผลถูกต้องไม่

2. ฟ้อนต์ .eot, .ttf, .woff, .woff2  เป็นไฟล์ที่เราต้องอัพขึ้นไปบนเซิร์ฟเวอร์ เพื่อให้แสดงผลในหน้าเว็บไซต์ ที่ต้องมีไฟล์หลายนามสกุลก็เพราะว่า แต่ละ Web Browser (Internet Explorer, Firefox, Chrome, iPhone Safari, Android) ต้องใช้นามสกุลไฟล์แตกต่างกัน

3. ไฟล์ stylesheet.css  เป็นไฟล์ CSS สำหรับดึงฟ้อนต์มาแสดงในหน้าเว็บไซต์

โค้ดจาก stylesheet.css จะหน้าตาประมาณนี้

@font-face {
    font-family: 'chulalongkornregular';
    src: url('chulalongkornreg-webfont.eot');
    src: url('chulalongkornreg-webfont.eot?#iefix') format('embedded-opentype'),
         url('chulalongkornreg-webfont.woff2') format('woff2'),
         url('chulalongkornreg-webfont.woff') format('woff'),
         url('chulalongkornreg-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


ขั้นตอนการนำ Web Font ไปใช้งาน

1. อัพโหลดไฟล์ทั้งหมดไปไว้ในโฮสต์
2. นำที่อยู่หรือลิงก์ ของไฟล์ stylesheet.css ไปวางใน <head> ... </head>
3. เรียกใช้ font-family: 'ชื่อฟอนต์'; ใน Class ที่ต้องการ

ตัวอย่างการนำฟ้อนต์ไปใช้งาน โดยเขียนโค้ดดังนี้


<head>
    <title>untitled</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- ที่อยู่ที่เก็บฟอนต์ -->
    <link href="https://semicon.github.io/cdn/webfontchula_20230816_230044/chulafontsstyle.min.css" rel="stylesheet" >
   
<style>

        body{

            // ฟอนต์ที่ต้องการใช้   
font-family: 'chulalongkornregular', sans-serif;

        }

    </style>
   
</head>
   


เท่านี้เราก็มีฟอนต์สวยๆไว้ใช้กับเว็บไซต์ของเราได้ตามชอบใจ....


Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า