0Pricing
CSS Academy · บทเรียน

ตระกูลแบบอักษรและแบบอักษรที่ปลอดภัยบนเว็บ

กำหนดตระกูลแบบอักษร และทำความเข้าใจว่าแบบอักษรใดใช้งานได้อย่างปลอดภัยในเบราว์เซอร์ทุกชนิด

ตระกูลแบบอักษรและแบบอักษรที่ปลอดภัยบนเว็บ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณสมบัติแบบอักษร

คุณสมบัติ font-family กำหนดแบบอักษรให้กับองค์ประกอบ คุณต้องระบุ ชุดแบบอักษร ซึ่งเป็นรายชื่อแบบอักษรคั่นด้วยเครื่องหมายจุลภาค เรียงจากที่ต้องการมากที่สุดไปน้อยที่สุด และลงท้ายด้วยตระกูลแบบอักษรทั่วไป

<p>This text renders in the page's body font stack.</p>

ตระกูลแบบอักษรทั่วไป

CSS กำหนดตระกูลแบบอักษรทั่วไปห้าประเภทไว้เป็นแบบอักษรสำรอง:

  • serif — แบบอักษรที่มีเส้นประดับ เช่น Times และ Georgia
  • sans-serif — แบบอักษรเรียบที่ไม่มีเส้นประดับ เช่น Arial และ Helvetica
  • monospace — แบบอักษรที่มีความกว้างคงที่ เช่น Courier และ Consolas
  • cursive — แบบอักษรที่มีลักษณะคล้ายลายมือ
  • fantasy — แบบอักษรตกแต่งสำหรับการแสดงผล

แบบอักษรที่ปลอดภัยสำหรับเว็บ

แบบอักษรที่ปลอดภัยสำหรับเว็บได้รับการติดตั้งไว้ล่วงหน้าในระบบปฏิบัติการเกือบทั้งหมด คุณจึงใช้งานได้โดยไม่ต้องโหลดไฟล์แบบอักษรภายนอก:

  • Sans-serif: Arial, Helvetica, Verdana, Trebuchet MS
  • Serif: Georgia, Times New Roman
  • Monospace: Courier New, Consolas

ชื่อแบบอักษรที่มีช่องว่าง

ชื่อแบบอักษรที่มีช่องว่างต้องใส่ไว้ใน เครื่องหมายอัญประกาศ:

<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>

แนวทางปฏิบัติที่ดีสำหรับชุดแบบอักษร

สร้างชุดแบบอักษรโดยมีองค์ประกอบดังนี้:

  1. แบบอักษรที่ต้องการ ซึ่งอาจไม่ได้ติดตั้งอยู่
  2. แบบอักษรสำรองที่มีลักษณะคล้ายกันหนึ่งหรือสองแบบ
  3. ตระกูลแบบอักษรทั่วไปเป็นทางเลือกสุดท้าย
<p class="font-stack">Georgia &rarr; Palatino Linotype &rarr; serif fallback</p>

แบบอักษรส่วนติดต่อผู้ใช้ของระบบ

งานออกแบบสมัยใหม่มักใช้ แบบอักษรของระบบ ซึ่งเป็นแบบอักษรส่วนติดต่อผู้ใช้ดั้งเดิมของระบบปฏิบัติการ วิธีนี้ทำให้ดูเป็นแบบเดียวกับระบบและไม่ต้องดาวน์โหลดอะไรเลย:

<p class="system-ui-text">This uses your OS's native UI font.</p>

ชุดแบบอักษรความกว้างคงที่สำหรับโค้ด

เครื่องมือแก้ไขโค้ดและเทอร์มินัลจำเป็นต้องใช้ชุดแบบอักษรความกว้างคงที่:

<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
  return "world";
}</pre>

การสืบทอดแบบอักษร

องค์ประกอบส่วนใหญ่จะสืบทอด font-family จากองค์ประกอบแม่ องค์ประกอบฟอร์มบางชนิด เช่น <input> และ <textarea> อาจไม่สืบทอดโดยค่าเริ่มต้นในเบราว์เซอร์บางตัว จึงควรกำหนดให้ชัดเจน:

<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>

การตรวจสอบแบบอักษรที่มีอยู่

คุณสามารถตรวจสอบว่าแบบอักษรของระบบพร้อมใช้งานหรือไม่ด้วยฟังก์ชัน local() ภายใน @font-face เบราว์เซอร์จะลองใช้แบบอักษรในเครื่องก่อนดาวน์โหลด

<p class="my-font-text">Text using MyFont (local match or fallback)</p>

การเลือกชุดอักขระด้วยช่วงยูนิโค้ด

เมื่อโหลดแบบอักษร ให้ใช้ unicode-range ใน @font-face เพื่อโหลดเฉพาะช่วงอักขระที่ต้องการ ซึ่งช่วยลดขนาดการดาวน์โหลดสำหรับเว็บไซต์หลายภาษา

<p class="inter-text">Basic Latin text (U+0000&ndash;00FF range)</p>

ภาพรวมแบบอักษรแปรผัน

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

ตรวจสอบความเข้าใจ

ควรใช้ตระกูลแบบอักษรทั่วไปใดเป็นแบบอักษรสำรองสุดท้ายสำหรับชุดแบบอักษร sans-serif

สรุป

คุณสมบัติ font-family รับชุดแบบอักษรที่ลงท้ายด้วยตระกูลแบบอักษรทั่วไป แบบอักษรที่ปลอดภัยสำหรับเว็บทำงานได้ทุกที่โดยไม่ต้องโหลด แบบอักษรส่วนติดต่อผู้ใช้ของระบบให้ความรู้สึกเป็นธรรมชาติและไม่ต้องเสียค่าใช้จ่ายจากคำขอข้อมูลผ่านเว็บ ควรใส่เครื่องหมายอัญประกาศเสมอเมื่อชื่อแบบอักษรมีช่องว่าง

คำถามที่พบบ่อย

บทเรียน “ตระกูลแบบอักษรและแบบอักษรที่ปลอดภัยบนเว็บ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตระกูลแบบอักษรและแบบอักษรที่ปลอดภัยบนเว็บ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตระกูลแบบอักษรและแบบอักษรที่ปลอดภัยบนเว็บ”

กำหนดตระกูลแบบอักษร และทำความเข้าใจว่าแบบอักษรใดใช้งานได้อย่างปลอดภัยในเบราว์เซอร์ทุกชนิด คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ตระกูลแบบอักษรและแบบอักษรที่ปลอดภัยบนเว็บ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ตระกูลแบบอักษรและแบบอักษรที่ปลอดภัยบนเว็บ
  2. ขนาด น้ำหนัก และรูปแบบแบบอักษร
  3. การจัดแนว การตกแต่ง และระยะห่างข้อความ
  4. Google Fonts และ @font-face
← กลับไปที่ CSS Academy