ข้อความและตัวอักษร

พอดแคสต์ CSS - 036: ข้อความและการพิมพ์

ข้อความเป็นหนึ่งในองค์ประกอบพื้นฐานที่สำคัญของเว็บ

เมื่อสร้างเว็บไซต์ คุณไม่จำเป็นต้องจัดรูปแบบข้อความเสมอไป เพราะ HTML ก็มีการจัดรูปแบบเริ่มต้นที่สมเหตุสมผลอยู่แล้ว

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

ในโมดูลนี้ เราจะมาดูคุณสมบัติแบบอักษร CSS พื้นฐานบางรายการ เช่น font-family, font-style, font-weight และ font-size จากนั้นเราจะเจาะลึกเกี่ยวกับพร็อพเพอร์ตี้ที่ส่งผลต่อย่อหน้าของข้อความ เช่น text-indent และ word-spacing และปิดท้ายโมดูลด้วยหัวข้อขั้นสูงอื่นๆ เช่น แบบอักษรที่เปลี่ยนแปลงได้และองค์ประกอบสมมติ

เปลี่ยนแบบอักษร

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ 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 เพื่อให้ตรงกัน

ใช้แบบอักษรตัวเอียงและเอียง

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ font-style เพื่อตั้งค่าว่าข้อความควรเป็นตัวเอียงหรือไม่ font-style ยอมรับคีย์เวิร์ด normal, italic และ oblique

ทำให้ข้อความเป็นตัวหนา

การสนับสนุนเบราว์เซอร์

  • 2
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ font-weight เพื่อตั้งค่า "ตัวหนา" ของข้อความ พร็อพเพอร์ตี้นี้ยอมรับค่าคีย์เวิร์ด (normal, bold) ค่าคีย์เวิร์ดสัมพัทธ์ (lighter, bolder) และค่าตัวเลข (100 ถึง 900)

คีย์เวิร์ด normal และ bold เทียบเท่ากับค่าตัวเลข 400 และ 700 ตามลำดับ

คีย์เวิร์ด lighter และ bolder จะได้รับการคำนวณโดยสัมพันธ์กับองค์ประกอบระดับบนสุด ดูความหมายของน้ำหนักสัมพัทธ์ของ MDN สำหรับแผนภูมิที่มีประโยชน์ซึ่งแสดงวิธีการหาค่านี้

เปลี่ยนขนาดข้อความ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ font-size เพื่อควบคุมขนาดองค์ประกอบของข้อความ พร็อพเพอร์ตี้นี้ยอมรับค่าความยาว เปอร์เซ็นต์ และค่าของคีย์เวิร์ดจำนวนหนึ่ง

นอกจากความยาวและค่าเปอร์เซ็นต์แล้ว font-size ยังยอมรับค่าคีย์เวิร์ดแบบสัมบูรณ์บางค่า (xx-small, x-small, small, medium, large, x-large, xx-large) และค่าคีย์เวิร์ดแบบสัมพัทธ์ 2-3 ค่า (smaller, larger) ค่าสัมพัทธ์นั้นสัมพัทธ์กับ font-size ขององค์ประกอบระดับบนสุด

เปลี่ยนช่องว่างระหว่างบรรทัด

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ line-height เพื่อระบุความสูงของแต่ละบรรทัดในองค์ประกอบ พร็อพเพอร์ตี้นี้ยอมรับตัวเลข ความยาว เปอร์เซ็นต์ หรือคีย์เวิร์ด normal โดยทั่วไป เราขอแนะนำให้ใช้ตัวเลขแทนความยาวหรือเปอร์เซ็นต์เพื่อหลีกเลี่ยงปัญหาเกี่ยวกับการสืบทอดค่า

เปลี่ยนการเว้นวรรคระหว่างอักขระ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ letter-spacing เพื่อควบคุมระยะห่างแนวนอนระหว่างอักขระต่างๆ ในข้อความ พร็อพเพอร์ตี้นี้ยอมรับค่าความยาว เช่น em, px และ rem

โปรดทราบว่าค่าที่ระบุจะเพิ่มพื้นที่ธรรมชาติระหว่างอักขระ ในการสาธิตด้านล่าง ลองเลือกอักษรตัวใดตัวหนึ่งเพื่อดูขนาดของตู้ไปรษณีย์และการเปลี่ยนแปลงด้วย letter-spacing

เปลี่ยนการเว้นวรรคระหว่างคำ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ 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

เปลี่ยนลักษณะตัวพิมพ์ของข้อความ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ text-transform เพื่อแก้ไขการใช้อักษรตัวพิมพ์ใหญ่ในข้อความโดยไม่จำเป็นต้องเปลี่ยน HTML ที่สำคัญ พร็อพเพอร์ตี้นี้ยอมรับค่าคีย์เวิร์ด uppercase, lowercase และ capitalize

เพิ่มการขีดเส้นใต้ เส้นเหนือ และบรรทัดผ่านในข้อความ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ 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 เป็นชื่อย่อของพร็อพเพอร์ตี้ข้างต้นทั้งหมด

เพิ่มการเยื้องในข้อความ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ text-indent เพื่อเพิ่มการเยื้องในบล็อกข้อความ พร็อพเพอร์ตี้นี้จะใช้เวลา (เช่น 10px, 2em) หรือเปอร์เซ็นต์ของความกว้างของบล็อกที่มีอยู่

จัดการกับเนื้อหาที่ล้นหรือถูกซ่อนไว้

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 7
  • 1.3

แหล่งที่มา

ใช้ text-overflow เพื่อระบุวิธีการแสดงเนื้อหาที่ซ่อน มี 2 ตัวเลือก ได้แก่ clip (ค่าเริ่มต้น) ซึ่งตัดข้อความส่วนที่เกินมา และ ellipsis ซึ่งแสดงจุดไข่ปลา (...) ที่จุดข้อความที่เกินมา

ควบคุมช่องว่าง

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

พร็อพเพอร์ตี้ white-space ใช้เพื่อระบุวิธีจัดการช่องว่างในองค์ประกอบ ดูรายละเอียดเพิ่มเติมได้ที่บทความเกี่ยวกับ white-space เกี่ยวกับ MDN

white-space: pre มีประโยชน์ในการแสดงผลรูปแบบ ASCII หรือการเยื้องโค้ดบล็อกที่มีการเยื้อง

ควบคุมการแบ่งคำ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 15
  • 3

แหล่งที่มา

ใช้ word-break เพื่อเปลี่ยนลักษณะการ "คั่น" คำที่ควรจะปรากฏเมื่อเกินบรรทัด โดยค่าเริ่มต้น เบราว์เซอร์จะไม่แยกคำ การใช้ค่าคีย์เวิร์ด break-all สำหรับ word-break จะสั่งให้เบราว์เซอร์แบ่งคำทีละอักขระหากจำเป็น

เปลี่ยนการจัดข้อความ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ text-align เพื่อระบุการจัดข้อความแนวนอนในองค์ประกอบบล็อกหรือเซลล์ในตาราง พร็อพเพอร์ตี้นี้ยอมรับค่าคีย์เวิร์ด left, right, start, end, center, justify และ match-parent

ค่า left และ right จะจัดข้อความชิดขอบซ้ายและขวาของบล็อกตามลำดับ

ใช้ start และ end เพื่อแสดงตำแหน่งของจุดเริ่มต้นและจุดสิ้นสุดของบรรทัดข้อความในโหมดการเขียนปัจจุบัน ดังนั้น start จึงแมปไปยัง left ในภาษาอังกฤษ และกับภาษา right เป็นภาษาอาหรับซึ่งเขียนจากขวาไปซ้าย (RTL) ทั้ง 2 อย่างนี้เป็นความสอดคล้องกับตรรกะ ดูข้อมูลเพิ่มเติมในโมดูลคุณสมบัติทางตรรกะของเรา

ใช้ center เพื่อจัดข้อความให้อยู่กึ่งกลางของบล็อก

ค่า justify จะจัดระเบียบข้อความและเปลี่ยนระยะห่างของคำโดยอัตโนมัติ เพื่อให้ข้อความอยู่ในแนวเดียวกันทั้งขอบซ้ายและขวาของบล็อก

เปลี่ยนทิศทางของข้อความ

การสนับสนุนเบราว์เซอร์

  • 2
  • 12
  • 1
  • 1

แหล่งที่มา

ใช้ direction เพื่อกำหนดทิศทางของข้อความ อาจเป็น ltr (จากซ้ายไปขวา ค่าเริ่มต้น) หรือ rtl (ขวาไปซ้าย) บางภาษา เช่น อาหรับ ฮีบรู หรือเปอร์เซียจะเขียนจากขวาไปซ้าย คุณจึงควรใช้ภาษาdirection: rtl สำหรับภาษาอังกฤษและภาษาแบบซ้ายไปขวาอื่นๆ ให้ใช้ direction: ltr

เปลี่ยนลักษณะการไหลของข้อความ

การสนับสนุนเบราว์เซอร์

  • 48
  • 12
  • 41
  • 10.1

แหล่งที่มา

ใช้ writing-mode เพื่อเปลี่ยนวิธีการจัดเรียงและการจัดเรียงข้อความ ค่าเริ่มต้นคือ horizontal-tb แต่คุณยังสามารถตั้งค่า writing-mode เป็น vertical-lr หรือ vertical-rl สำหรับข้อความที่ต้องการให้อยู่ในแนวนอน

เปลี่ยนการวางแนวของข้อความ

การสนับสนุนเบราว์เซอร์

  • 48
  • 79
  • 41
  • 14

แหล่งที่มา

ใช้ text-orientation เพื่อระบุการวางแนวของอักขระในข้อความ ค่าที่ถูกต้องสำหรับพร็อพเพอร์ตี้นี้คือ mixed และ upright พร็อพเพอร์ตี้นี้เกี่ยวข้องเฉพาะเมื่อตั้งค่า writing-mode เป็นอย่างอื่นที่ไม่ใช่ horizontal-tb

เพิ่มเงาในข้อความ

การสนับสนุนเบราว์เซอร์

  • 2
  • 12
  • 3.5
  • 1.1

แหล่งที่มา

ใช้ text-shadow เพื่อเพิ่มเงาลงในข้อความ พร็อพเพอร์ตี้นี้มีความยาว 3 ช่วง (x-offset, y-offset และ blur-radius) และสี

ดูข้อมูลเพิ่มเติมได้ที่ส่วน text-shadow ของโมดูลเกี่ยวกับเงา

แบบอักษรที่ปรับเปลี่ยนได้

ตามปกติแบบอักษร “ปกติ” จะต้องมีการนำเข้าไฟล์ที่แตกต่างกันสำหรับแบบอักษรแต่ละเวอร์ชัน เช่น ตัวหนา ตัวเอียง หรือแบบย่อ แบบอักษรตัวแปรคือแบบอักษรที่มีแบบอักษรที่มีแบบอักษรแตกต่างกันจำนวนมากในไฟล์เดียว

Roboto Flex ในชุดค่าผสมแบบสุ่มของความกว้างและน้ำหนัก

ดูรายละเอียดเพิ่มเติมได้ในบทความเกี่ยวกับแบบอักษรที่ปรับเปลี่ยนได้

องค์ประกอบจำลอง

องค์ประกอบจำลอง ::first-letter และ ::first-line

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

องค์ประกอบจำลอง ::first-letter และ ::first-line จะกำหนดเป้าหมายอักษรตัวแรกและบรรทัดแรกตามลำดับขององค์ประกอบข้อความ

องค์ประกอบจำลอง ::selection รายการ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 62
  • 1.1

แหล่งที่มา

ใช้องค์ประกอบจำลอง ::selection เพื่อเปลี่ยนลักษณะของข้อความที่ผู้ใช้เลือก

เมื่อใช้องค์ประกอบจำลองนี้ จะมีการใช้พร็อพเพอร์ตี้ CSS บางรายการเท่านั้น ได้แก่ color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width

font-variant

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • 1

แหล่งที่มา

พร็อพเพอร์ตี้ 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
ถูกต้องแล้ว!
monospace
ถูกต้องแล้ว!
italic
โปรดลองอีกครั้ง italic เป็นคีย์เวิร์ดที่ถูกต้องสำหรับ font-style ไม่ใช่ font-family
sci-fi
โปรดลองอีกครั้ง แต่ fantasy คือรายการสำรองทั่วไปที่ถูกต้องสำหรับ font-family
sans-serif
ถูกต้องแล้ว!
helvetica
โปรดลองอีกครั้ง "Helvetica" ไม่ใช่คีย์เวิร์ดทั่วไป แต่หมายถึงชุดแบบอักษรที่เฉพาะเจาะจงแทน

คำสั่งใดใช้แปลงอักษรตัวแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่ เช่น This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
โปรดลองอีกครั้ง
text-case: capitalize;
โปรดลองอีกครั้ง
text-transform: capitalize;
ถูกต้องแล้ว!
font-style: capitals;
โปรดลองอีกครั้ง
font-variant: capitalize;
โปรดลองอีกครั้ง

จริงหรือเท็จ: ใช้ text-orientation เพื่อจัดข้อความไปทางซ้าย ขวา หรือตรงกลาง

จริง
โปรดลองอีกครั้ง text-orientation เปลี่ยนการหมุนตัวอักษรในบรรทัด
ไม่จริง
ถูกต้องแล้ว! text-orientation เปลี่ยนการหมุนตัวอักษรในบรรทัด ใช้ text-align เพื่อจัดข้อความไปทางซ้าย ทางขวา หรือตรงกลาง (และเพิ่มเติม)

คุณสมบัติ CSS ใดที่ใช้เพื่อเปลี่ยนช่องว่างระหว่างบรรทัดข้อความได้

line-spacing
โปรดลองอีกครั้ง
leading
โปรดลองอีกครั้ง คำว่านำคือคำที่ถูกต้องสำหรับการเว้นวรรคระหว่างบรรทัดในการพิมพ์ แต่ไม่ใช่พร็อพเพอร์ตี้ CSS ที่ถูกต้อง
baseline-distance
โปรดลองอีกครั้ง
line-height
ถูกต้องแล้ว!

แหล่งข้อมูล