CSS Academy · บทเรียน

Google Fonts และ @font-face

โหลดแบบอักษรภายนอกจาก Google Fonts หรือกำหนดแบบอักษรที่กำหนดเองด้วยกฎ @font-face

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

เหตุใดจึงใช้แบบอักษรกำหนดเอง

แบบอักษรที่ปลอดภัยสำหรับเว็บมีตัวเลือกอยู่เพียงไม่กี่แบบ แบบอักษรกำหนดเองช่วยให้จับคู่กับอัตลักษณ์ของแบรนด์ได้อย่างแม่นยำ แนวทางหลักมีสองแบบคือ บริการแบบอักษรของ Google (บริการที่ให้โฮสต์) และ @font-face (โฮสต์ด้วยตนเอง)

การตั้งค่าแบบอักษรของ Google

ไปที่ fonts.google.com เลือกตระกูลแบบอักษร เลือกน้ำหนัก แล้วคัดลอกแท็ก <link> ไปไว้ใน <head> ของ HTML:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

การใช้แบบอักษรของ Google ใน CSS

หลังจากเชื่อมโยงแล้ว ให้อ้างอิงแบบอักษรด้วยชื่อในชุด font-family:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

พารามิเตอร์ API ของแบบอักษรของ Google

พารามิเตอร์ display=swap ใช้กลยุทธ์การสลับการแสดงแบบอักษร โดยจะแสดงข้อความด้วยแบบอักษรสำรองทันที แล้วสลับเป็นแบบอักษรกำหนดเองเมื่อโหลดเสร็จ วิธีนี้ป้องกันไม่ให้ข้อความหายไประหว่างการโหลด

พื้นฐานของ @font-face

@font-face ช่วยให้คุณโหลดไฟล์แบบอักษรกำหนดเองที่โฮสต์ไว้ด้วยตนเองได้ ให้กำหนดชื่อตระกูลแบบอักษรและแหล่งที่มาของไฟล์:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: รูปแบบสมัยใหม่

WOFF2 (รูปแบบแบบอักษรเปิดสำหรับเว็บรุ่นที่ 2) เป็นรูปแบบที่แนะนำ มีการบีบอัดดีที่สุด (โดยทั่วไปมีขนาดเล็กกว่า WOFF 30%) และรองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมด ควรใส่ WOFF เป็นรูปแบบสำรองเสมอ

หลายค่าน้ำหนักด้วย @font-face

ประกาศบล็อก @font-face หนึ่งบล็อกต่อชุดน้ำหนักและรูปแบบ ใช้ชื่อ font-family เดียวกัน เพื่อให้เบราว์เซอร์เลือกไฟล์ที่ถูกต้องโดยอัตโนมัติ:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

คุณสมบัติ font-display

ตัวกำหนด font-display ควบคุมพฤติกรรมการโหลดแบบอักษร:

swap — แสดงแบบอักษรสำรองทันที แล้วสลับเมื่อพร้อม (แนะนำ)
block — ซ่อนข้อความได้นานสูงสุด 3 วินาที
fallback — ซ่อนข้อความช่วงสั้น ๆ แล้วใช้แบบอักษรสำรองถาวร
optional — ใช้เฉพาะเมื่อมีการแคชไว้แล้ว

<p class="swap-text">Text swaps in once Inter loads.</p>

@font-face สำหรับแบบอักษรแปรผัน

แบบอักษรแปรผันกำหนดช่วงของแกนแทนค่าของน้ำหนักที่ตายตัว:

<p class="variable-text">Variable weight text (550)</p>

การโหลดแบบอักษรสำคัญล่วงหน้า

โหลดไฟล์แบบอักษรที่สำคัญที่สุดล่วงหน้าเพื่อลดความล่าช้าที่ขัดขวางการแสดงผล เพิ่ม <link rel="preload"> ไว้ก่อนสไตล์ชีต:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

ใช้ local() เพื่อข้ามการดาวน์โหลด

ใช้ local() ใน src เพื่อตรวจสอบว่าผู้ใช้ติดตั้งแบบอักษรไว้แล้วหรือไม่ก่อนดาวน์โหลด

<p class="roboto-text">Uses local Roboto if installed</p>

ตรวจสอบอย่างรวดเร็ว

รูปแบบแบบอักษรใดให้การบีบอัดดีที่สุดและรองรับเบราว์เซอร์สมัยใหม่ได้กว้างที่สุด?

สรุป

บริการแบบอักษรของ Google มอบแบบอักษรที่โฮสต์ไว้ให้ใช้งานง่ายผ่านแท็ก <link> โฮสต์แบบอักษรด้วยตนเองโดยใช้ @font-face ในรูปแบบ WOFF2 และใช้ font-display: swap เพื่อประสิทธิภาพที่ดีที่สุด โหลดแบบอักษรสำคัญล่วงหน้าและใช้ local() เพื่อหลีกเลี่ยงการดาวน์โหลดที่ไม่จำเป็น

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

บทเรียน “Google Fonts และ @font-face” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Google Fonts และ @font-face”

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

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

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

บทเรียน “Google Fonts และ @font-face” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ CSS Academy