คู่มือนี้จะอธิบายวิธีใช้ Google Fonts API เพื่อเพิ่มแบบอักษรลงในหน้าเว็บ คุณไม่จำเป็นต้องเขียนโปรแกรมใดๆ เลย สิ่งที่คุณต้องทำคือ เพิ่มลิงก์สไตล์ชีตพิเศษลงในเอกสาร HTML จากนั้นอ้างอิงแบบอักษรในสไตล์ CSS
ตัวอย่างสั้นๆ
ดังตัวอย่างต่อไปนี้ คัดลอกและวาง HTML ต่อไปนี้ลงในไฟล์
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body> </html>
จากนั้นเปิดไฟล์ในเว็บเบราว์เซอร์สมัยใหม่ คุณจะเห็นหน้าที่แสดงข้อมูลต่อไปนี้ ในแบบอักษรที่เรียกว่า Tangerine
ประโยคนั้นเป็นข้อความทั่วไป คุณจึงเปลี่ยนหน้าตาของประโยคได้โดยใช้ CSS ลองเพิ่มเงาลงในสไตล์ในตัวอย่างก่อนหน้านี้
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
คุณจะเห็นเงาตกกระทบใต้ข้อความ
และนั่นเป็นเพียงจุดเริ่มต้นของการใช้งาน Fonts API และ CSS
ภาพรวม
คุณเริ่มใช้ Google Fonts API ได้ใน 2 ขั้นตอนดังนี้
เพิ่มลิงก์สไตล์ชีตเพื่อขอแบบอักษรเว็บที่ต้องการ:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
จัดรูปแบบองค์ประกอบด้วยแบบอักษรของเว็บที่ขอในสไตล์ชีต ดังนี้
.css-selector { font-family: 'Font Name', serif; }
หรือมีรูปแบบแทรกในบรรทัดในองค์ประกอบนั้นๆ ดังนี้
<div style="font-family: 'Font Name', serif;">Your text</div>
ดูรายการแบบอักษรที่ใช้ได้ที่หัวข้อ Google Fonts
การระบุชุดแบบอักษรและสไตล์ใน URL ของสไตล์ชีต
หากต้องการกำหนด URL ที่จะใช้ในลิงก์สไตล์ชีต ให้เริ่มต้นด้วย URL หลักของ Google Fonts API ดังนี้
https://fonts.googleapis.com/css
จากนั้นเพิ่มพารามิเตอร์ URL family=
โดยมีชื่อชุดแบบอักษรและรูปแบบอย่างน้อย 1 รายการ
เช่น หากต้องการขอแบบอักษร Inconsolata ให้ใช้รูปแบบต่อไปนี้
https://fonts.googleapis.com/css?family=Inconsolata
หากต้องการขอชุดแบบอักษรหลายชุด ให้คั่นชื่อด้วยอักขระไปป์
(|
)
เช่น หากต้องการขอแบบอักษร Tangerine, Inconsolata และ Droid Sans ให้ทำดังนี้
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
การขอแบบอักษรหลายรายการจะช่วยให้คุณใช้แบบอักษรเหล่านั้นทั้งหมดได้ในหน้าเว็บ (แต่อย่ามากเกินไป หน้าเว็บส่วนใหญ่ไม่จำเป็นต้องมีแบบอักษรมาก และการขอแบบอักษรจำนวนมากอาจทำให้หน้าเว็บโหลดช้า)
Google Fonts API มีแบบอักษรที่ขอในเวอร์ชันปกติโดยค่าเริ่มต้น หากต้องการขอรูปแบบหรือน้ำหนักอื่นๆ ให้ใส่โคลอน (:
) ต่อท้ายชื่อแบบอักษร ตามด้วยรายการรูปแบบหรือน้ำหนักที่คั่นด้วยคอมมา (,
)
เช่น
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
หากต้องการดูว่ารูปแบบใดและน้ำหนักใดที่ใช้ได้กับแบบอักษรหนึ่งๆ โปรดดูข้อมูลของแบบอักษรใน Google Fonts
คุณอาจให้ชื่อเต็มหรือตัวย่อสำหรับแต่ละรูปแบบที่ขอก็ได้ ส่วนการถ่วงน้ำหนัก คุณสามารถระบุน้ำหนักเป็นตัวเลขได้
สไตล์ | ผู้ระบุ |
---|---|
ตัวเอียง | italic หรือ i |
ตัวหนา | bold หรือ b หรือน้ำหนักเป็นตัวเลข เช่น 700 |
ตัวเอียงหนา | bolditalic หรือ bi |
ตัวอย่างเช่น หากต้องการขอ Cantarell ตัวเอียงและ Droid Serif ตัวหนา คุณสามารถใช้ URL ใดๆ ต่อไปนี้ได้
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
ใช้การแสดงแบบอักษร
font-display ให้คุณควบคุมสิ่งที่จะเกิดขึ้นขณะที่แบบอักษรไม่พร้อมใช้งาน โดยทั่วไปแล้วการระบุค่าอื่นนอกเหนือจาก auto
เริ่มต้นมักจะเหมาะสม
ส่งค่าที่ต้องการในพารามิเตอร์สตริงการค้นหา display
:
https://fonts.googleapis.com/css?family=Roboto&display=swap
การระบุชุดย่อยของสคริปต์
แบบอักษรบางตัวในไดเรกทอรีแบบอักษรของ Google รองรับสคริปต์หลายรายการ (เช่น ละติน ซิริลลิก และกรีก) พารามิเตอร์ย่อยควรต่อท้าย URL เพื่อระบุว่าควรดาวน์โหลดชุดย่อยใด
เช่น หากต้องการขอชุดย่อยของแบบอักษรซิริลลิก Roboto Mono URL จะเป็นดังนี้
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
หากต้องการขอชุดย่อยของแบบอักษร Roboto Mono ในภาษากรีก URL จะมีลักษณะดังนี้
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
หากต้องการขอชุดย่อยภาษากรีกและซิริลลิกของแบบอักษร Roboto Mono URL จะมีลักษณะดังนี้
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
ระบบจะรวมเซ็ตละตินเสมอหากมีและไม่จําเป็นต้องระบุ โปรดทราบว่าหากเบราว์เซอร์ไคลเอ็นต์รองรับ unicode-range (http://caniuse.com/#feat=font-unicode-range) ระบบจะไม่สนใจพารามิเตอร์ย่อย เบราว์เซอร์จะเลือกจากชุดย่อยที่แบบอักษรรองรับเพื่อรับสิ่งที่ต้องใช้ในการแสดงข้อความ
ดูรายการแบบอักษรและชุดแบบอักษรทั้งหมดที่มีได้ที่ Google Fonts
การเพิ่มประสิทธิภาพคำขอแบบอักษร
บ่อยครั้งที่ที่คุณต้องการใช้แบบอักษรของเว็บบนเว็บไซต์หรือแอปพลิเคชัน คุณจะทราบล่วงหน้าว่าต้องใช้ตัวอักษรใด กรณีนี้มักเกิดขึ้นเมื่อใช้แบบอักษรของเว็บ ในโลโก้หรือส่วนหัว
ในกรณีเหล่านี้ คุณควรพิจารณาระบุค่า text=
ใน URL คำขอแบบอักษร วิธีนี้ช่วยให้ Google แสดงผลไฟล์แบบอักษรที่เพิ่มประสิทธิภาพเพื่อคำขอของคุณได้ ในบางกรณี วิธีนี้สามารถลดขนาดไฟล์แบบอักษรลงได้ถึง 90%
หากต้องการใช้ฟีเจอร์นี้ เพียงเพิ่ม text=
ในคำขอ Google Fonts API เช่น หากใช้เพียง Inconsolata สำหรับชื่อบล็อก คุณจะตั้งชื่อบล็อกเป็นค่า text=
ได้ คำขอจะมีลักษณะดังนี้
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
เช่นเดียวกับสตริงข้อความค้นหาทั้งหมด คุณควรเข้ารหัส URL ค่าด้วยคำสั่งต่อไปนี้
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
ฟีเจอร์นี้ยังใช้งานได้กับแบบอักษรสากล ซึ่งช่วยให้คุณระบุอักขระ UTF-8 ได้ เช่น ¡Hola! จะแสดงเป็นดังนี้
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
การเปิดใช้เอฟเฟกต์แบบอักษร (เบต้า)
เมื่อสร้างส่วนหัวหรือแสดงข้อความในเว็บไซต์ คุณมักต้องการจัดรูปแบบข้อความด้วยรูปแบบการตกแต่ง เพื่อให้การทำงานของคุณง่ายขึ้น Google มีคอลเล็กชันเอฟเฟกต์แบบอักษรให้คุณนำไปใช้ได้ง่าย ๆ เพื่อสร้างข้อความที่แสดงที่สวยงาม เช่น
หากต้องการใช้ฟีเจอร์เบต้านี้ เพียงเพิ่ม effect=
ในคำขอ Google Fonts API และเพิ่มชื่อคลาสที่เกี่ยวข้องลงในองค์ประกอบ HTML ที่คุณต้องการให้มีผล ในตัวอย่างด้านบน เราใช้เอฟเฟกต์แบบอักษร shadow-multiple
ดังนั้นคำขอจึงมีลักษณะดังนี้
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
หากต้องการใช้เอฟเฟกต์ ให้เพิ่มชื่อคลาสที่เกี่ยวข้องลงในองค์ประกอบ HTML ชื่อคลาสที่เกี่ยวข้องจะเป็นชื่อเอฟเฟกต์นำหน้าด้วย font-effect-
เสมอ ดังนั้นชื่อคลาสสำหรับ shadow-multiple
จะเป็น font-effect-shadow-multiple
<div class="font-effect-shadow-multiple">This is a font effect!</div>
คุณขอเอฟเฟกต์หลายรายการได้โดยการแยกชื่อเอฟเฟกต์ด้วยอักขระไปป์ (|
)
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
ต่อไปนี้เป็นรายการเอฟเฟ็กต์แบบอักษรทั้งหมดที่มีให้
ผลกระทบ | ชื่อ API | ชื่อคลาส | การสนับสนุน |
---|---|---|---|
การวิเคราะห์ | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
เครื่องหมายอิฐ | brick-sign |
font-effect-brick-sign |
Chrome และ Safari |
ภาพพิมพ์แคนวาส | canvas-print |
font-effect-canvas-print |
Chrome และ Safari |
แคร็ก | crackle |
font-effect-crackle |
Chrome และ Safari |
decaying |
font-effect-decaying |
Chrome และ Safari | |
การทำลาย | destruction |
font-effect-destruction |
Chrome และ Safari |
มีปัญหา | distressed |
font-effect-distressed |
Chrome และ Safari |
ไม้หุ้มผิว | distressed-wood |
font-effect-distressed-wood |
Chrome และ Safari |
Embos | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
อัคคีภัย | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
ภาพเคลื่อนไหวในการถ่ายทำ | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
แตกง่าย | fragile |
font-effect-fragile |
Chrome และ Safari |
หญ้า | grass |
font-effect-grass |
Chrome และ Safari |
น้ำแข็ง | ice |
font-effect-ice |
Chrome และ Safari |
การเคลื่อนไหว | mitosis |
font-effect-mitosis |
Chrome และ Safari |
นีออน | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
เนื้อเรื่อง | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
สีเขียว | putting-green |
font-effect-putting-green |
Chrome และ Safari |
เหล็กดัด | scuffed-steel |
font-effect-scuffed-steel |
Chrome และ Safari |
Shadow Multiple | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
แตกเป็นเสี่ยง | splintered |
font-effect-splintered |
Chrome และ Safari |
คงที่ | static |
font-effect-static |
Chrome และ Safari |
สโตนวอช | stonewash |
font-effect-stonewash |
Chrome และ Safari |
3 มิติ | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
ลอย 3 มิติ | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
วินเทจ | vintage |
font-effect-vintage |
Chrome และ Safari |
วอลเปเปอร์ | wallpaper |
font-effect-wallpaper |
Chrome และ Safari |
การจัดรูปแบบแบบอักษรมีหลายวิธีและหลายสิ่งสามารถทำได้ผ่าน CSS เราเพียงให้แนวคิด 2-3 อย่างในการเริ่มต้นใช้งาน สำหรับแนวคิดเพิ่มเติม ให้ลองใช้ Google ค้นหา "เอฟเฟ็กต์ข้อความ CSS" และ เรียกดูไอเดียต่างๆ ที่มีอยู่บนเว็บอยู่แล้ว!
อ่านเพิ่มเติม
- ดูรายการชุดแบบอักษรทั้งหมดที่ Google Fonts API มีให้ใน Google Fonts
- ดูวิธีใช้เครื่องมือโหลดแบบอักษรสำหรับเว็บเพื่อให้ควบคุมการโหลดแบบอักษรได้มากขึ้น
- ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของ Google Fonts API ได้ในหน้าข้อควรพิจารณาทางเทคนิค