การจับคู่ฟอนต์และไดเรกทอรี Google Fonts
เรียกดูไดเรกทอรี Google Fonts ยอดนิยมที่คัดสรรมาแล้วพร้อมตัวอย่างสด กรองตามหมวดหมู่และค้นหาตามชื่อ แล้วคัดลอก CSS ที่พร้อมวางและสำรวจการจับคู่ฟอนต์ที่แนะนำ — ทั้งหมดในเบราว์เซอร์ของคุณ
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ฟอนต์โหลดจาก Google Fonts เพื่อดูตัวอย่างสดเท่านั้น ไม่มีการอัปโหลด ไม่ต้องสมัครสมาชิก ฟรีทั้งหมด
หัวข้อที่ใช้ฟอนต์แบบ display
และนี่คือย่อหน้าเนื้อหาที่ใช้ฟอนต์ข้อความที่จับคู่กัน การจับคู่ฟอนต์ที่ดีสร้างสมดุลระหว่างบุคลิกและความอ่านง่าย: ฟอนต์หัวข้อที่มีเอกลักษณ์ดึงดูดสายตา ขณะที่ฟอนต์เนื้อหาที่สะอาดและสบายตาทำให้อ่านข้อความยาว ๆ ได้ง่าย คลิก "CSS" เพื่อคัดลอกทั้งบรรทัด @import และกฎ font-family สำหรับหัวข้อและเนื้อหาของคุณ
เกี่ยวกับ การจับคู่ฟอนต์และไดเรกทอรี Google Fonts
ไดเรกทอรีฟอนต์นี้รวบรวม Google Fonts ยอดนิยม 80 แบบไว้ในหน้าเดียวที่ค้นหาได้ แต่ละแบบแสดงเป็นตัวอย่างสดพร้อมประโยคแพนแกรม บรรทัดตัวอักษรและตัวเลข และป้ายกำกับหมวดหมู่ ครอบคลุมตระกูลตัวอักษรห้าแบบ ได้แก่ sans-serif, serif, display, handwriting และ monospace ทำให้คุณเปรียบเทียบรูปทรงตัวอักษรจริงแทนการเดาจากชื่อ
การ์ดฟอนต์ทุกใบมีคำแนะนำการจับคู่ที่คัดสรรมาแล้ว ได้แก่ ฟอนต์คู่หูที่เข้ากันดีสำหรับหัวข้อและเนื้อหา การคลิกชิปคู่จะเปิดตัวอย่างที่ตั้งพาดหัวด้วยฟอนต์หนึ่งและย่อหน้าด้วยอีกฟอนต์หนึ่ง ทำให้คุณตัดสินการผสมผสานนั้นในบริบทจริงก่อนตัดสินใจใช้
เมื่อฟอนต์หรือการจับคู่เหมาะสมแล้ว คลิกครั้งเดียวจะคัดลอก CSS ที่พร้อมวางใช้งาน ได้แก่ บรรทัด @import สำหรับสไตล์ชีต Google Fonts พร้อมชุด font-family ที่ตรงกันและฟอนต์สำรองที่เหมาะสม ฟอนต์จะโหลดจาก Google Fonts เฉพาะสำหรับตัวอย่างสดเท่านั้น สิ่งที่คุณพิมพ์จะไม่ถูกอัปโหลดไปที่ใด
วิธีใช้ การจับคู่ฟอนต์และไดเรกทอรี Google Fonts
- เลื่อนดูการ์ดฟอนต์ แต่ละใบแสดงชื่อ ป้ายกำกับหมวดหมู่ และข้อความตัวอย่างสดที่ตั้งด้วยแบบอักษรจริง
- ใช้กล่องค้นหาเพื่อค้นหาฟอนต์ตามชื่อ หรือคลิกชิปหมวดหมู่ (Sans-serif, Serif, Display, Handwriting, Monospace) เพื่อกรองตาราง
- ลากแถบเลื่อนขนาด (16–72 px) เพื่อดูตัวอย่างบรรทัดตัวอย่างที่ขนาดหัวข้อหรือเนื้อหาที่คุณต้องการ
- คลิกชิป "Pairs with" หรือปุ่ม "Preview pairing" เพื่อดูพาดหัวและย่อหน้าเนื้อหาที่ตั้งด้วยการผสมผสานที่แนะนำ
- คลิกปุ่ม "CSS" บนการ์ดหรือในตัวอย่างการจับคู่ เพื่อคัดลอกบรรทัด @import และการประกาศ font-family ไปยังคลิปบอร์ดของคุณ