การจัดรูปแบบข้อความบนเพจเว็บเป็นส่วนสำคัญของการออกแบบเว็บ ตัวอย่างเช่น คุณอาจต้องการให้ส่วนหัวแสดงด้วยแบบอักษรเฉพาะ หรือให้ข้อความทั้งหมดบนหน้าใช้แบบอักษร serif
ที่นี่คือที่มาของคุณสมบัติ CSS font-family คุณสมบัตินี้ช่วยให้คุณระบุแบบอักษรหนึ่งหรือหลายแบบเพื่อใช้จัดรูปแบบข้อความบนเว็บเพจ
บทช่วยสอนนี้จะอธิบายพื้นฐานของคุณสมบัติ CSS font-family พร้อมตัวอย่าง และวิธีใช้เพื่อจัดรูปแบบข้อความบนเว็บเพจ
คุณสมบัติ CSS Font Family
มีหลายด้านที่เกี่ยวข้องกับการจัดรูปแบบแบบอักษรใน CSS ตั้งแต่การกำหนดสี ขนาดแบบอักษร ส่วนที่สำคัญที่สุดคือการตั้งค่า font family — รูปแบบที่ใช้โดยข้อความบนเว็บเพจ
เพื่อกำหนดแบบอักษรที่ใช้โดยข้อความบนเว็บเพจ คุณสามารถใช้คุณสมบัติ font-family ไวยากรณ์มีดังนี้:
font-family: fontFamilyOne, fontFamilyTwo, …;
คุณสมบัติ font-family รับค่าเป็นแบบอักษรเดียวหรือรายการแบบอักษร หากระบุมากกว่าหนึ่งแบบ ให้คั่นด้วยเครื่องหมายจุลภาค
ลำดับของแบบอักษรคือลำดับที่เบราว์เซอร์จะพยายามใช้ เบราว์เซอร์จะใช้แบบอักษรตัวแรกในรายการที่ติดตั้งอยู่หรือดาวน์โหลดได้ หากไม่มี จะลองแบบถัดไปต่อไป
สิ่งสำคัญคือ font-family จะเลือกแบบอักษรสำหรับแต่ละตัวอักษรในบล็อกข้อความ ดังนั้น หากตัวอักษรใดไม่มีในแบบอักษรหนึ่ง เบราว์เซอร์จะลองแบบถัดไปจนพบแบบที่เหมาะสม
เมื่อใช้คุณสมบัติ font-family ควรระบุชื่อแบบอักษรทั่วไป (generic font family) อย่างน้อยหนึ่งแบบ เช่น serif, sans-serif, หรือ monospace เพื่อให้เบราว์เซอร์ยังเลือกแบบอักษรได้แม้แบบอื่นในรายการไม่พร้อมใช้งาน
มีสองวิธีใช้ font-family ได้แก่ การระบุแบบอักษรเฉพาะ (custom font) และการใช้แบบอักษรทั่วไป (generic font family) แบบอักษรทั่วไปที่ใช้ได้มีดังนี้:
serif: ตัวอักษรใช้แบบอักษรแบบมีขา (เช่น Lucida Bright, Palladio)sans-serif: ตัวอักษรใช้แบบอักษรแบบไม่มีขา (เช่น Open Sans, Trebuchet MS)monospace: ตัวอักษรทุกตัวมีความกว้างเท่ากัน (เช่น monospace, Menlo)cursive: ตัวอักษรมีการเชื่อมต่อ (เช่น Lucida Calligraphy)fantasy: แบบอักษรตกแต่งเพื่อดึงดูดสายตา (เช่น Papyrus)
ยังมีแบบอักษรทั่วไปอื่นๆ อีก โปรดดูรายละเอียดในเอกสาร Mozilla CSS font-family
ตัวอย่างการใช้ CSS Font Family
สมมติว่าคลับแสตมป์ท้องถิ่น "The Seattle Stamp Club" ขอให้ปรับเปลี่ยนแบบอักษรบนเว็บไซต์ของพวกเขา
ขั้นแรก ต้องการเปลี่ยนแบบอักษรของทุกหัวข้อ <h1> บนหน้า "ติดต่อเรา" ให้ใช้แบบอักษร "Open Sans" หากไม่มี ให้ใช้แบบอักษรทั่วไป "sans-serif" โค้ดดังนี้:
<html> <h1>Contact Us</h1> <style> h1 { font-family: "Open Sans", sans-serif; }
กดปุ่ม Run ในโค้ดเอดิเตอร์เพื่อดูผลลัพธ์
ในโค้ด HTML เราระบุหัวข้อบ้างด้วยแท็ก <h1> ที่มีข้อความ Contact Us จากนั้นใน CSS ใช้ font-family กำหนดแบบอักษรสำหรับทุก元素 <h1>
ค่าที่กำหนดให้ font-family ตั้งค่าแบบอักษรของ <h1> เป็น Open Sans และหากไม่มี จะใช้ sans-serif โดยระบุสองแบบคั่นด้วยจุลภาค
ต่อมา สมมติว่าต้องการจัดรูปแบบทุก元素 <p> บนหน้า Contact ให้ใช้แบบอักษร Times หากไม่มี ให้ใช้แบบอักษร serif เริ่มต้น โค้ดดังนี้:
<html> <p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p> <style> p { font-family: "Times", serif; }
กดปุ่ม Run ในโค้ดเอดิเตอร์เพื่อดูผลลัพธ์
ในตัวอย่าง เรา宣告ย่อหน้าข้อความด้วยแท็ก <p> จากนั้นตั้งค่า font-family ของทุก <p> ให้ใช้ Times และ serif เบราว์เซอร์จะพยายามแสดงด้วย Times ก่อน หากไม่มี จะใช้ serif
สรุป
คุณสมบัติ CSS font-family ช่วยให้คุณระบุรูปแบบข้อความบนเว็บเพจได้ เช่น ใช้แบบอักษร "Arial" หรือแบบอักษรทั่วไป "cursive" สำหรับข้อความทั้งหมด
บทช่วยสอนนี้อธิบายพื้นฐานและตัวอย่างการใช้ font-family เพื่อจัดรูปแบบข้อความ ตอนนี้คุณพร้อมที่จะใช้คุณสมบัตินี้อย่างมืออาชีพแล้ว!
