The CSS Podcast - 036: Text & Typography
ข้อความเป็นหนึ่งในองค์ประกอบหลักของเว็บ
เมื่อสร้างเว็บไซต์ คุณไม่จำเป็นต้องจัดรูปแบบข้อความ เนื่องจาก HTML มีการจัดรูปแบบเริ่มต้นที่ค่อนข้างสมเหตุสมผล
อย่างไรก็ตาม ข้อความมีแนวโน้มที่จะเป็นส่วนประกอบส่วนใหญ่ของเว็บไซต์ คุณจึงควรเพิ่มการจัดรูปแบบเพื่อทำให้ข้อความดูน่าสนใจ การเปลี่ยนพร็อพเพอร์ตี้พื้นฐานเพียงไม่กี่รายการจะช่วยปรับปรุงประสบการณ์การอ่านของผู้ใช้ได้อย่างมาก
ในโมดูลนี้ เราจะเริ่มต้นด้วยกฎ @font-face
ซึ่งช่วยให้คุณนําเข้าแบบอักษรที่กําหนดเองไปยังหน้าเว็บได้ วิธีนี้ช่วยให้มั่นใจว่าคุณมีแบบอักษรที่ตรงกับที่ต้องการ โดยไม่ขึ้นอยู่กับแบบอักษรที่ผู้ใช้ติดตั้ง
จากนั้นเราจะพูดถึงพร็อพเพอร์ตี้แบบอักษร CSS ที่สำคัญ ซึ่งได้แก่ font-family
, font-style
, font-weight
และ font-size
พื้นฐานเหล่านี้เป็นพื้นฐานสําหรับการจัดการข้อความทั้งในด้านสไตล์และความสามารถในการอ่าน
นอกจากนี้ เราจะพูดถึงพร็อพเพอร์ตี้เฉพาะย่อหน้า เช่น text-indent
และ word-spacing
ก่อนปิดท้ายด้วยหัวข้อขั้นสูง เช่น แบบอักษรแบบแปรผัน และองค์ประกอบจำลอง ซึ่งจะช่วยปรับแต่งการควบคุมแบบอักษรให้ดียิ่งขึ้น
เราจะให้ตัวอย่างและเคล็ดลับที่นำไปใช้ได้จริงตลอดทั้งกระบวนการเพื่อเสริมสร้างความเข้าใจและการประยุกต์ใช้เทคนิค CSS เหล่านี้
กฎ @font-face
กฎแอตทริบิวต์ @font-face
ของ CSS เป็นเครื่องมือในการออกแบบเว็บ ซึ่งช่วยให้คุณระบุและใช้แบบอักษรที่กำหนดเองเพื่อแสดงข้อความได้ ความยอดเยี่ยมของ @font-face
คือความอเนกประสงค์ ซึ่งช่วยให้คุณดึงข้อมูลแบบอักษรจากเซิร์ฟเวอร์ระยะไกลหรือจากแบบอักษรที่ติดตั้งในอุปกรณ์ของผู้ใช้
ไวยากรณ์
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff")
}
ตัวบอกลักษณะ
ascent-override
- ปรับแต่งเมตริกการไต่ระดับที่ส่งผลต่อพื้นที่เหนือเกณฑ์พื้นฐาน
descent-override
- ปรับเมตริกการลดลง ซึ่งส่งผลต่อพื้นที่ด้านล่างเส้นฐาน
font-display
- ควบคุมลักษณะการแสดงผลแบบอักษรโดยขึ้นอยู่กับสถานะการดาวน์โหลด
font-family
- ตั้งชื่อแบบอักษรเพื่อใช้ในพร็อพเพอร์ตี้ที่เกี่ยวข้องกับแบบอักษร
font-stretch
- ตั้งค่าการปรับขนาดแนวนอนที่ยอมรับได้ ซึ่งระบุเป็นค่าเดี่ยวหรือช่วง
font-style
- กำหนดรูปแบบแบบอักษรที่รองรับช่วงมุมสำหรับรูปแบบเอียง
font-weight
- กำหนดน้ำหนักหรือช่วงของน้ำหนักของแบบอักษรที่มี
font-feature-settings
- เปิดใช้การเข้าถึงฟีเจอร์แบบอักษร OpenType
font-variation-settings
- ให้การควบคุมการตั้งค่าแบบอักษรแบบปรับเปลี่ยนได้
line-gap-override
- ลบล้างระยะห่างบรรทัดเริ่มต้นของแบบอักษร
size-adjust
- ใช้ค่าตัวคูณมาตราส่วนกับขอบและเมตริกของแบบอักษร
src
- กำหนดแหล่งที่มาของแบบอักษร ไม่ว่าจะเป็นแบบอักษรในเครื่องหรือแบบอักษรจากระยะไกล ข้อมูลนี้จำเป็นสำหรับกฎ
@font-face
การรวมurl()
และlocal()
ภายในsrc
เป็นกลยุทธ์ทั่วไปที่ใช้แบบอักษรในเครื่อง (หากมี) โดยเปลี่ยนกลับเป็นไฟล์แบบอักษรระยะไกลเป็นไฟล์สำรอง โดยเบราว์เซอร์จะจัดลําดับความสําคัญของทรัพยากรตามลําดับการประกาศ ดังนั้นlocal()
ควรอยู่ก่อนurl()
unicode-range
- จํากัดอักขระที่ควรใช้กับแบบอักษรนี้
คำอธิบาย
@font-face
ช่วยปลดปล่อยนักออกแบบจากข้อจำกัดของแบบอักษร "ที่แสดงผลได้บนเว็บ" ด้วยการอนุญาตให้ใช้แบบอักษรที่กำหนดเอง ความสามารถในการค้นหาแบบอักษรของฟังก์ชัน local()
ในอุปกรณ์ของผู้ใช้จะมอบประสบการณ์ที่ราบรื่นโดยไม่จำเป็นต้องพึ่งพาการเชื่อมต่ออินเทอร์เน็ต
ประเภท MIME ของแบบอักษร
รูปแบบ | ประเภท MIME |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web Open Font Format | font/woff |
Web Open Font Format 2 | font/woff2 |
ความแตกต่างระหว่าง @font-face กับ font-family
ใน CSS ผู้คนมักสับสนระหว่าง @font-face
กับ font-family
แต่ทั้ง 2 อย่างนี้มีไว้เพื่อวัตถุประสงค์ที่แตกต่างกัน
ดังที่ได้กล่าวไปก่อนหน้านี้ @font-face
คือกฎที่ใช้กำหนดแบบอักษรที่กำหนดเองซึ่งคุณต้องการใช้ในเว็บแอปพลิเคชัน ซึ่งจะบอกเบราว์เซอร์ว่าจะดาวน์โหลดแบบอักษรจากที่ใด วิธีแสดงแบบอักษรระหว่างการโหลด (ด้วยพร็อพเพอร์ตี้ font-display
) และระบุชุดย่อยของอักขระที่จะดาวน์โหลด (ด้วย unicode-range
)
ในทางตรงกันข้าม font-family
คือพร็อพเพอร์ตี้ CSS ที่ใช้ในกฎ CSS เพื่อกำหนดแบบอักษรหรือรายการแบบอักษรให้กับองค์ประกอบ แบบอักษรที่แสดงในรายการภายใต้
font-family
อาจเป็นแบบอักษรที่ปลอดภัยบนเว็บ แบบอักษรของระบบ หรือแบบอักษรที่กำหนดเองซึ่งกำหนดด้วย
@font-face
สรุปคือ @font-face
จะประกาศและตั้งชื่อแบบอักษร จากนั้น font-family
จะใช้แบบอักษรที่ประกาศนี้กับองค์ประกอบ HTML
ตัวอย่างการใช้ทั้ง 2 รูปแบบมีดังนี้
<table>
<thead>
<tr>
<th><p><pre>
@font-face {
font-family: "CustomFont";
src: url("customfont.woff2") format("woff2");
}
body {
font-family: "CustomFont", Arial, sans-serif;
}
ในตัวอย่างนี้ @font-face
จะกำหนด "CustomFont" และบอกเบราว์เซอร์ว่าจะค้นหาที่ใด จากนั้นพร็อพเพอร์ตี้ font-family
จะใช้กับองค์ประกอบ body โดยมี Arial เป็นค่าสำรองหาก "CustomFont" ไม่พร้อมใช้งาน
เปลี่ยนแบบตัวพิมพ์
ใช้ font-family
เพื่อเปลี่ยนลักษณะแบบอักษรของข้อความ
พร็อพเพอร์ตี้ font-family
ยอมรับลิสต์สตริงที่คั่นด้วยคอมมา ซึ่งอ้างอิงถึงตระกูลแบบอักษรที่เฉพาะเจาะจงหรือทั่วไป ชุดแบบอักษรที่เฉพาะเจาะจงคือสตริงที่มีเครื่องหมายคำพูด เช่น "Helvetica", "EB Garamond" หรือ "Times New Roman" ชุดแบบอักษรทั่วไปคือคีย์เวิร์ด เช่น serif
, sans-serif
และ monospace
(ดูรายการตัวเลือกทั้งหมดใน MDN) เบราว์เซอร์จะแสดงแบบอักษรแรกที่พร้อมใช้งานจากรายการที่ระบุ
เมื่อใช้ font-family
คุณควรระบุชุดแบบอักษรทั่วไปอย่างน้อย 1 ชุดเผื่อไว้ในกรณีที่เบราว์เซอร์ของผู้ใช้ไม่มีแบบอักษรที่ต้องการ โดยทั่วไป ชุดแบบอักษรทั่วไปสำรองควรคล้ายกับแบบอักษรที่ต้องการ เช่น หากใช้ font-family: "Helvetica"
(ชุดแบบอักษรแบบ Sans Serif) สำรองควรเป็น sans-serif
เพื่อให้ตรงกัน
ใช้แบบอักษรตัวเอียงและเอียง
ใช้ font-style
เพื่อตั้งค่าว่าข้อความควรเป็นแบบตัวเอียงหรือไม่ font-style
ยอมรับคีย์เวิร์ดอย่างใดอย่างหนึ่งต่อไปนี้ normal
, italic
และ oblique
ทำข้อความเป็นตัวหนา
ใช้ font-weight
เพื่อตั้งค่า "ความหนา" ของข้อความ พร็อพเพอร์ตี้นี้ยอมรับค่าคีย์เวิร์ด (normal
, bold
), ค่าคีย์เวิร์ดแบบสัมพัทธ์ (lighter
, bolder
) และค่าตัวเลข (100
ถึง 900
)
คีย์เวิร์ด normal
และ bold
เทียบเท่ากับค่าตัวเลข 400
และ 700
ตามลำดับ
ระบบจะคํานวณคีย์เวิร์ด lighter
และ bolder
โดยสัมพันธ์กับองค์ประกอบหลัก ดูความหมายของน้ำหนักสัมพัทธ์ของ MDN เพื่อดูแผนภูมิที่มีประโยชน์ซึ่งแสดงวิธีกำหนดค่านี้
เปลี่ยนขนาดข้อความ
ใช้ font-size
เพื่อควบคุมขนาดขององค์ประกอบข้อความ พร็อพเพอร์ตี้นี้ยอมรับค่าความยาว เปอร์เซ็นต์ และค่าคีย์เวิร์ดจำนวนหนึ่ง
นอกจากค่าความยาวและเปอร์เซ็นต์แล้ว font-size
ยังยอมรับค่าคีย์เวิร์ดสัมบูรณ์บางค่า (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
) และค่าคีย์เวิร์ดสัมพัทธ์ 2 ค่า (smaller
, larger
) ค่าสัมพัทธ์จะสัมพันธ์กับ font-size
ขององค์ประกอบหลัก
เปลี่ยนระยะห่างระหว่างบรรทัด
ใช้ line-height
เพื่อระบุความสูงของบรรทัดแต่ละรายการในองค์ประกอบ พร็อพเพอร์ตี้นี้ยอมรับตัวเลข ความยาว เปอร์เซ็นต์ หรือคีย์เวิร์ด normal
โดยทั่วไป เราขอแนะนำให้ใช้ตัวเลขแทนความยาวหรือเปอร์เซ็นต์เพื่อหลีกเลี่ยงปัญหาเกี่ยวกับการรับค่า
เปลี่ยนระยะห่างระหว่างอักขระ
ใช้ letter-spacing
เพื่อควบคุมระยะห่างแนวนอนระหว่างอักขระในข้อความ พร็อพเพอร์ตี้นี้ยอมรับค่าความยาว เช่น em
, px
และ rem
โปรดทราบว่าค่าที่ระบุจะเพิ่มจำนวนช่องว่างตามปกติระหว่างอักขระ ในการแสดงตัวอย่างต่อไปนี้ ให้ลองเลือกแต่ละตัวอักษรเพื่อดูขนาดของกล่องจดหมายและการเปลี่ยนแปลงของกล่องจดหมายด้วย letter-spacing
เปลี่ยนระยะห่างระหว่างคำ
ใช้ word-spacing
เพื่อเพิ่มหรือลดความยาวของช่องว่างระหว่างแต่ละคำในข้อความ พร็อพเพอร์ตี้นี้ยอมรับค่าความยาว เช่น em
, px
และ rem
โปรดทราบว่าความยาวที่คุณระบุไว้เป็นระยะห่างเพิ่มเติมนอกเหนือจากระยะห่างปกติ ซึ่งหมายความว่า word-spacing: 0
มีค่าเท่ากับ word-spacing: normal
ชวเลข font
คุณสามารถใช้พร็อพเพอร์ตี้ font
แบบย่อเพื่อตั้งค่าพร็อพเพอร์ตี้ที่เกี่ยวข้องกับแบบอักษรหลายรายการพร้อมกันได้ รายการพร็อพเพอร์ตี้ที่เป็นไปได้ ได้แก่ font-family
, font-size
, font-stretch
, font-style
, font-variant
, font-weight
และ line-height
ดูรายละเอียดเกี่ยวกับวิธีสั่งซื้อพร็อพเพอร์ตี้เหล่านี้ได้ในfont
บทความของ MDN
เปลี่ยนรูปแบบตัวพิมพ์เล็ก-ใหญ่ของข้อความ
ใช้ text-transform
เพื่อแก้ไขการใช้อักษรตัวพิมพ์ใหญ่ในข้อความโดยไม่ต้องเปลี่ยน HTML ที่เกี่ยวข้อง พร็อพเพอร์ตี้นี้ยอมรับค่าคีย์เวิร์ด uppercase
, lowercase
และ capitalize
เพิ่มขีดเส้นใต้ ขีดเส้นทับ และขีดเส้นผ่านข้อความ
ใช้ text-decoration
เพื่อเพิ่มบรรทัดในข้อความ เส้นขีดล่างเป็นที่นิยมใช้มากที่สุด แต่คุณก็เพิ่มเส้นเหนือหรือผ่านข้อความได้
พร็อพเพอร์ตี้ text-decoration
เป็นพร็อพเพอร์ตี้ที่สั้นลงสำหรับพร็อพเพอร์ตี้ที่เฉพาะเจาะจงมากขึ้นซึ่งแสดงรายละเอียดไว้ด้านล่าง
พร็อพเพอร์ตี้ text-decoration-line
ยอมรับคีย์เวิร์ด underline
, overline
และ line-through
นอกจากนี้ คุณยังระบุคีย์เวิร์ดหลายรายการสำหรับหลายบรรทัดได้ด้วย
พร็อพเพอร์ตี้ text-decoration-color
จะกำหนดสีของการตกแต่งทั้งหมดจาก text-decoration-line
พร็อพเพอร์ตี้ text-decoration-style
ยอมรับคีย์เวิร์ด solid
, double
, dotted
, dashed
และ wavy
พร็อพเพอร์ตี้ text-decoration-thickness
ยอมรับค่าความยาวใดก็ได้และกำหนดความกว้างของเส้นของการตกแต่งทั้งหมดจาก text-decoration-line
พร็อพเพอร์ตี้ text-decoration
เป็นตัวย่อสำหรับพร็อพเพอร์ตี้ทั้งหมดข้างต้น
เพิ่มการเยื้องในข้อความ
ใช้ text-indent
เพื่อเพิ่มการเยื้องให้กับบล็อกข้อความ พร็อพเพอร์ตี้นี้ใช้ความยาว (เช่น 10px
, 2em
) หรือเปอร์เซ็นต์ของความกว้างของบล็อกที่บรรจุ
จัดการกับเนื้อหาที่แสดงไม่หมดหรือซ่อนอยู่
ใช้ text-overflow
เพื่อระบุวิธีแสดงเนื้อหาที่ซ่อนอยู่ โดยจะมี 2 ตัวเลือก ได้แก่ clip
(ค่าเริ่มต้น) ซึ่งจะตัดข้อความที่จุดที่ตัดออก และ ellipsis
ซึ่งจะแสดงเครื่องหมายจุดไข่ปลา (…) ที่จุดที่ตัดออก
ควบคุมพื้นที่ว่าง
พร็อพเพอร์ตี้ white-space
ใช้เพื่อระบุวิธีจัดการช่องว่างในองค์ประกอบ ดูรายละเอียดเพิ่มเติมได้ที่บทความ white-space
ใน MDN
white-space: pre
อาจมีประโยชน์ในการแสดงผลอาร์ต ASCII หรือบล็อกโค้ดที่มีการเยื้องอย่างระมัดระวัง
ควบคุมการแบ่งบรรทัดของคำ
ใช้ word-break
เพื่อเปลี่ยนวิธี "แบ่ง" คำเมื่อคำนั้นๆ ยาวเกินบรรทัด โดยค่าเริ่มต้น เบราว์เซอร์จะไม่แยกคำ การใช้ค่าคีย์เวิร์ด break-all
สำหรับ word-break
จะสั่งให้เบราว์เซอร์แบ่งคำที่แต่ละอักขระ หากจำเป็น
เปลี่ยนการจัดข้อความ
ใช้ text-align
เพื่อระบุการจัดแนวข้อความแนวนอนในองค์ประกอบบล็อกหรือเซลล์ในตาราง พร็อพเพอร์ตี้นี้ยอมรับค่าคีย์เวิร์ด left
, right
, start
, end
, center
, justify
และ match-parent
ค่า left
และ right
จะจัดข้อความให้อยู่ทางด้านซ้ายและขวาของบล็อกตามลำดับ
ใช้ start
และ end
เพื่อแสดงตำแหน่งเริ่มต้นและสิ้นสุดของบรรทัดข้อความในโหมดการเขียนปัจจุบัน ดังนั้น start
จะแมปกับ left
ในภาษาอังกฤษ และ right
ในสคริปต์ภาษาอาหรับซึ่งเขียนจากขวาไปซ้าย (RTL) การจัดแนวเหล่านี้เป็นการจัดแนวเชิงตรรกะ ดูข้อมูลเพิ่มเติมได้ในโมดูลพร็อพเพอร์ตี้เชิงตรรกะ
ใช้ center
เพื่อจัดข้อความให้อยู่ตรงกลางของบล็อก
ค่าของ justify
จะจัดระเบียบข้อความและเปลี่ยนการเว้นวรรคระหว่างคำโดยอัตโนมัติเพื่อให้ข้อความอยู่ตรงกับทั้งขอบซ้ายและขวาของบล็อก
เปลี่ยนทิศทางของข้อความ
ใช้ direction
เพื่อตั้งค่าทิศทางของข้อความเป็น ltr
(จากซ้ายไปขวา ซึ่งเป็นค่าเริ่มต้น) หรือ rtl
(จากขวาไปซ้าย) ภาษาบางภาษา เช่น อาหรับ ฮีบรู หรือเปอร์เซีย จะเขียนจากขวาไปซ้าย จึงควรใช้ direction: rtl
สำหรับภาษาอังกฤษและภาษาอื่นๆ ทั้งหมดที่อ่านจากซ้ายไปขวา ให้ใช้ direction: ltr
เปลี่ยนลำดับของข้อความ
ใช้ writing-mode
เพื่อเปลี่ยนลักษณะการรับส่งและจัดเรียงข้อความ ค่าเริ่มต้นคือ horizontal-tb
แต่คุณยังสามารถตั้งค่า writing-mode
เป็น vertical-lr
หรือ vertical-rl
สำหรับข้อความที่ต้องการแสดงในแนวนอน
เปลี่ยนการวางแนวของข้อความ
ใช้ text-orientation
เพื่อระบุการวางแนวของอักขระในข้อความ ค่าที่ถูกต้องสำหรับพร็อพเพอร์ตี้นี้คือ mixed
และ upright
พร็อพเพอร์ตี้นี้จะเกี่ยวข้องก็ต่อเมื่อตั้งค่า writing-mode
เป็นค่าอื่นที่ไม่ใช่ horizontal-tb
เพิ่มเงาให้กับข้อความ
ใช้ text-shadow
เพื่อเพิ่มเงาให้กับข้อความ พร็อพเพอร์ตี้นี้ต้องการความยาว 3 รายการ (x-offset
, y-offset
และ blur-radius
) และสี
ดูข้อมูลเพิ่มเติมได้ในส่วน text-shadow
ของข้อบังคับเกี่ยวกับเงา
แบบอักษรที่ปรับแต่งได้
โดยปกติแล้ว แบบอักษร "ปกติ" จะต้องนำเข้าไฟล์ที่แตกต่างกันสำหรับแบบอักษรเวอร์ชันต่างๆ เช่น ตัวหนา ตัวเอียง หรือแบบย่อ แบบอักษรที่เป็นตัวแปรคือแบบอักษรที่สามารถมีรูปแบบแบบอักษรที่หลากหลายได้ในไฟล์เดียว
ดูรายละเอียดเพิ่มเติมได้ที่บทความเกี่ยวกับแบบอักษรแบบแปรผัน
องค์ประกอบจำลอง
องค์ประกอบเทียม ::first-letter
และ ::first-line
องค์ประกอบจำลอง ::first-letter
และ ::first-line
จะกำหนดเป้าหมายไปยังตัวอักษรแรกและบรรทัดแรกขององค์ประกอบข้อความตามลำดับ
::selection
องค์ประกอบจำลอง
ใช้องค์ประกอบจำลอง ::selection
เพื่อเปลี่ยนลักษณะที่ปรากฏของข้อความที่ผู้ใช้เลือก
เมื่อใช้องค์ประกอบเสมือนนี้ คุณจะใช้ได้เฉพาะพร็อพเพอร์ตี้ CSS บางรายการ ได้แก่ color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
, stroke-width
font-variant
พร็อพเพอร์ตี้ font-variant
เป็นตัวย่อสำหรับพร็อพเพอร์ตี้ CSS หลายรายการที่ช่วยให้คุณเลือกรูปแบบแบบอักษรได้ เช่น small-caps
และ slashed-zero
พร็อพเพอร์ตี้ CSS นี้ประกอบด้วย font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
และ font-variant-numeric
ดูรายละเอียดเพิ่มเติมเกี่ยวกับการใช้งานได้จากลิงก์ในพร็อพเพอร์ตี้แต่ละรายการ
ทดสอบความเข้าใจ
ทดสอบความรู้ด้านการพิมพ์บนเว็บ
คีย์เวิร์ดใดต่อไปนี้สามารถใช้เป็นfont-family
คีย์เวิร์ดสำรองทั่วไปได้
serif
helvetica
italic
sci-fi
monospace
sans-serif
ข้อความใดใช้ในการแปลงอักษรตัวแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่ เช่น This is a sentence.
➡ This Is A Sentence.
font-style: capitals;
text-transform: capitalize;
font-variant: capitalize;
text-capitalize: true;
text-case: capitalize;
จริงหรือเท็จ: ใช้ text-orientation
เพื่อจัดข้อความชิดซ้าย ขวา หรือตรงกลาง
พร็อพเพอร์ตี้ CSS ใดที่ใช้เปลี่ยนระยะห่างระหว่างบรรทัดข้อความได้
line-height
line-spacing
leading
baseline-distance
แหล่งข้อมูล
- แนวทางปฏิบัติแนะนำเกี่ยวกับแบบอักษรจะกล่าวถึงการนำเข้าแบบอักษร การแสดงผลแบบอักษร และแนวทางปฏิบัติแนะนำอื่นๆ ในการใช้แบบอักษรบนเว็บ
- MDN Fundamental ข้อความและการจัดรูปแบบ