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

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" ไม่พร้อมใช้งาน

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

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

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 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 เพื่อให้ตรงกัน

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

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

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

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

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

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

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

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

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

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

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

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

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

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

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

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

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 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

เปลี่ยนรูปแบบตัวพิมพ์เล็ก-ใหญ่ของข้อความ

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

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

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

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 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 เป็นตัวย่อสำหรับพร็อพเพอร์ตี้ทั้งหมดข้างต้น

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

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

จัดการกับเนื้อหาที่แสดงไม่หมดหรือซ่อนอยู่

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3

แหล่งที่มา

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

ควบคุมพื้นที่ว่าง

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

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

ควบคุมการแบ่งบรรทัดของคำ

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

แหล่งที่มา

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

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

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

ค่า left และ right จะจัดข้อความให้อยู่ทางด้านซ้ายและขวาของบล็อกตามลำดับ

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

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

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

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

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

  • Chrome: 2.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

เปลี่ยนลำดับของข้อความ

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

  • Chrome: 48
  • ขอบ: 12.
  • Firefox: 41.
  • Safari: 10.1

แหล่งที่มา

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

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

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

  • Chrome: 48
  • Edge: 79
  • Firefox: 41.
  • Safari: 14

แหล่งที่มา

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

เพิ่มเงาให้กับข้อความ

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

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5
  • Safari: 1.1

แหล่งที่มา

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

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

แบบอักษรที่ปรับแต่งได้

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

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

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

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

องค์ประกอบเทียม ::first-letter และ ::first-line

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

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

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

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 62
  • Safari: 1.1

แหล่งที่มา

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

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

font-variant

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

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 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
โปรดลองอีกครั้ง Leading เป็นคำที่ถูกต้องสำหรับเว้นวรรคระหว่างบรรทัดในการจัดรูปแบบตัวอักษร แต่ไม่ใช่พร็อพเพอร์ตี้ CSS ที่ถูกต้อง
baseline-distance
โปรดลองอีกครั้ง
line-height
ถูกต้อง

แหล่งข้อมูล