ความสามารถอย่างหนึ่งที่ถูกพูดถึงกันมากในการกำหนดมาตรฐานของ CSS ระยะแรก เมื่อราวสิบปีก่อน คือ web font แต่เว็บเบราว์เซอร์ในขณะนั้น ไม่ว่า Internet Explorer หรือ Netscape ต่างไม่สนใจความามารถนี้และไปใช้รูปแบบของตัวเอง (อย่าถามถึง Firefox นะครับ ตอนนั้นจะว่าเป็นวุ้นก็ยังไม่ใช่) ท้ายสุดคุณสมบัตินี้ก็หายไป จนกระทั่งถูกหยิบมาบรรจุอีกครั้งใน CSS3

ถามว่า web font คืออะไร อธิบายไม่ถูกแงะ เรียกง่ายๆว่า @font-face rule อธิบายต่อว่า คือ คุณสามารถกำหนดอักษรพิเศษผ่าน CSS โดยที่อักษรนั้นๆ ไม่จำเป็นต้องมีในเครื่องของคนเข้าเว็บ พอเข้าใจยัง? สมมติว่าผมอยากให้เว็บผมเด่นและเทพมาก อยากทำให้สวยจัดด้วย font งามๆ หรือทำร้ายสายตาผู้เข้าชมแบบสาหัสสากรรจ์ เรากำหนดได้ผ่าน CSS ไม่ต้องใช้จาว่าสคริปต์ช่วยหรือใช้อำนาจเผด็จการให้ผู้ใช้ต้องดาวน์โหลดฟอนต์มาติดตั้ง เพื่อรับชมความงามของเว็บ (แบบนี้มันจะทำเว็บเพื่อใครฟร่ะ)

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

แล้วยังไงต่อ?

สิ่งแรกที่เจ้าของเว็บต้องทำ คือ ต้องอัพโหลดฟอนต์ไปไว้ที่เว็บของตัวเองก่อน (ที่ไหนก็ตามแต่เถอะครับ) แล้วลงมือเขียนโค้ด กำหนดแนบฟอนต์ใน CSS (ผมนิยมเขียนไฟล์ CSS แยกต่างหาก ไม่ชอบเขียนปนในไฟล์ HTML เพราะเขียนปนมันมีข้อเสียและข้อจำกัดหลายอย่าง)

@font-face {
font-family: "TH Srisakdi"; src: url('http://n-blue.nblogz.net/fonts/TH Srisakdi.ttf');
}

เสร็จพิธีการปลุกเสกฟอนต์แล้ว เริ่มลงอาคมใน CSS ต่อ กำหนดการแสดงผล สมมติว่าผมจะใช้ DIV กำหนดค่า ส่วนใดส่วนหนึ่ง ผมเขียน class ของผมดังนี้

.manhasstyleisgay {
font-family:"TH Srisakdi";
font-size:72px;
font-weight:bold;
color:#1c4685;
text-align:center;
margin:1em;
}

ส่วนของ font-family ระบุว่าจงใช้ฟอนต์นี้ (ส่วนอื่นผมเขียนขยายเล่นๆ ครับ อย่าใส่ใจ) สำหรับมือใหม่หัดขับ CSS (ผมก็ด้วย) อาจจะสงสัยว่าทำไมต้องมีเครื่องหมาย “..” คลุมชื่อฟอนต์ คำตอบง่ายๆ คือ ฟอนต์ไหนที่ชื่อเว้นวรรค เป็นช่องว่างระหว่างชื่อ (อย่างเช่น TH Srisakdi) ต้องใส่ “..” คร่อม ไม่งั้นความหมายเป็นอื่น ฟอนต์ที่ชื่อเขียนติดกัน (อย่าง Tahoma) ไม่ต้องครับ (อันนี้เป็นพื้นฐานที่หนังสือเล่มไหน หรือใครก็ไม่ค่อยบอกคุณ)

เสร็จจากนี้ก็ไปต่อที่การเขียน HTML สมมติว่าผมเขียนโค้ดง่ายๆ ในไฟล์ HTML ตามนี้

<div class="manhasstyleisgay">สวัสดีประเทศไทย</div>

ผลลัพธ์ที่ได้จากเว็บบราวเซอร์ที่รองรับ CSS3 จะให้ผลแบบนี้ ..

ดีมั๊ยครับถ้า CSS3 ทำได้แบบนี้ และเว็บเบราว์เซอร์รองรับความสามารถนี้ แต่ข่าวร้าย คือ ถึงนาทีนี้จะมีก็แต่ WebKit (ที่จะแปลงร่างต่อเป็น Safari) เท่านั้นที่รองรับคุณสมบัตินี้ ส่วน Firefox 3 Alpha 8 ทดสอบแล้วยังไม่รองรับ Opera 9.5 ที่อยู่ระหว่างการพัฒนาก็ยังไม่รองรับ แต่แว่วๆ ว่าจะรองรับ (Opera มักเป็นผู้นำในการสนับสนุนมาตรฐาน CSS) ส่วน Internet Explore นั้น เวอร์ชั่น 7 ไม่รองรับร้อยเปอร์เซนต์ ส่วน IE 8 เคยได้ยินว่าจะสนับสนุน CSS3 แต่ไม่ทราบว่าจะมากน้อยแค่ไหน ครอบคลุมคุณสมบัตินี้หรือไม่ และอาจเป็นไปได้ว่าต้องคอยกันนาน อย่างน้อยก็อีก 6-12 เดือน กว่า IE8 จะออก

ป.ล. ผมไม่เก่ง CSS นะครับ เพิ่งหัดเมื่อสองปีก่อน จับห่างๆ นานๆ ครั้ง ดังนั้น อย่าเหมาว่าผมเทพ ..เค๊?

ขอบคุณฟอนต์ตัวอย่างงามๆ จาก f0nt โค้ดจะดูเละๆ หน่อย ขอเวลาหาปลั๊กอินจัดการโค้ดตัวใหม่ก่อนครับ (เริ่มรำคาญตัวนี้มากขึ้นทุกขณะ WP ด้วย ทำเละทุกที)
//ขอบคุณบอส + เมษ + ไนซ์ + เอ แก้คำผิด