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

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

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

เมื่อสร้างเว็บไซต์ คุณไม่จำเป็นต้องจัดรูปแบบข้อความเสมอไป เพราะจริงๆ แล้ว 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 font/woff
รูปแบบแบบอักษรสำหรับเว็บแบบเปิด 2 font/woff2

ความแตกต่างระหว่าง @font-face และ font-family

ใน CSS นั้น @font-face และ font-family มักมีความสับสน แต่ทำหน้าที่แตกต่างกัน

ดังที่ได้กล่าวไปแล้ว @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 จะนำพร็อพเพอร์ตี้ดังกล่าวไปใช้กับองค์ประกอบเนื้อหา โดยใช้ Arial เป็นสำรองหากไม่มี "CustomFont" ที่พร้อมใช้งาน

เปลี่ยนแบบตัวพิมพ์

การรองรับเบราว์เซอร์

  • 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) แต่เป็นก��รตรวจสอบความสอดคล้องเชิงตรรกะ ดูข้อมูลเพิ่มเติมในโมดูลคุณสมบัติเชิงตรรกะ

ใช้ 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
ถูกต้องแล้ว!

แหล่งข้อมูล