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

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

กฎ @ ของ CSS @font-face มีประโยชน์อย่างยิ่งในการออกแบบเว็บ ซึ่งช่วยให้คุณระบุ และใช้แบบอักษรที่กำหนดเองเพื่อแสดงข้อความได้ ข้อดีของ @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
รูปแบบแบบอักษรแบบเปิดสำหรับเว็บ font/woff
รูปแบบแบบอักษรแบบเปิดสำหรับเว็บ 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"

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

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

Browser Support

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

Source

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

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

ใช้ [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) เพื่อแก้ไขการใช้อักษรตัวพิมพ์ของข้อความโดยไม่ต้องเปลี่ยน HTML พื้นฐาน พร็อพเพอร์ตี้นี้ยอมรับค่าคีย์เวิร์ดต่อไปนี้ `uppercase`, `lowercase` และ `capitalize`

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

จัดการเนื้อหาที่ล้นหรือซ่อนอยู่

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

ควบคุมวิธีตัดคำ

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

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

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

ควบคุมวิธีตัดข้อความ

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

ใช้ text-wrap เพื่อ เปลี่ยนวิธีตัดข้อความภายในองค์ประกอบ

คีย์เวิร์ดที่ยอมรับสำหรับพร็อพเพอร์ตี้นี้ ได้แก่ wrap, nowrap, balance และ stable ค่าเริ่มต้นคือ wrap ซึ่งจะลดการล้นโดยการตัดข้อความ ข้ามบรรทัดตามช่องว่างปกติและการแบ่งคำ

คุณสามารถใช้nowrapเพื่อทำสิ่งที่ตรงกันข้ามและป้องกันไม่ให้ข้อความ ขึ้นบรรทัดใหม่ ซึ่งอาจทำให้ข้อความล้นได้

หากต้องการให้ข้อความแต่ละบรรทัดมีจำนวนเท่ากัน เช่น เมื่อเขียนส่วนหัวหรือบรรทัดแรก ให้ใช้คีย์เวิร์ด balance เบราว์เซอร์จะใช้ค่านี้กับองค์ประกอบที่มีข้อความไม่เกิน 6 บรรทัดเท่านั้นเพื่อปรับปรุง ประสิทธิภาพ

คีย์เวิร์ด stable ทำงานคล้ายกับ wrap แต่มีไว้ใช้กับข้อความที่มีแอตทริบิวต์ contenteditable เมื่อตั้งค่า text-wrap: stable แล้ว บรรทัดเหนือเนื้อหาที่กำลังแก้ไข จะไม่เลื่อนไปมาในกระบวนการ

บางครั้งสตริงยาวๆ ที่ไม่มีจุดแบ่งที่ชัดเจนอาจล้นคอนเทนเนอร์ได้ หากต้องการควบคุมวิธีขึ้นบรรทัดใหม่ของข้อความประเภทนี้ ให้ใช้ overflow-wrap

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

คีย์เวิร์ดที่คุณใช้ได้สำหรับพร็อพเพอร์ตี้นี้คือ normal, break-word และ anywhere การตั้งค่าเริ่มต้นคือ normal และจะไม่ตัดข้อความไปยังบรรทัดถัดไป เว้นแต่จะมีช่องว่างหรือจุดตัดตามธรรมชาติ

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

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

Browser Support

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

Source

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

เปลี่ยนโฟลว์ของข้อความ

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

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

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

Browser Support

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

Source

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

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

Browser Support

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

Source

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

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

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

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

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

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

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

::first-letter และ ::first-line องค์ประกอบเสมือน

Browser Support

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

Source

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

::selection องค์ประกอบเสมือน

Browser Support

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

Source

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

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

font-variant

Browser Support

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

Source

พร็อพเพอร์ตี้ 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
ถูกต้อง

แหล่งข้อมูล