ตอนนี้ Google Fonts รองรับแบบอักษรที่หลากหลายในการอัปเดต API v2 อย่างสมบูรณ์แล้ว เราจะอธิบายวิธีเรียกใช้ชุดแบบอักษรเดี่ยวและชุดแบบอักษรหลายรายการ และวิธีระบุช่วงแกน เจาะลึกรายละเอียดเกี่ยวกับแบบอักษรที่เปลี่ยนแปลงได้ เรียนรู้เพิ่มเติมด้วยโบรชัวร์แบบอินเทอร์แอกทีฟ จาก David Berlow ที่ TypeNetwork
มีอะไรใหม่
ทั้งหมดนี้เริ่มต้นด้วย URL พื้นฐานใหม่ ได้แก่
https://fonts.googleapis.com/css2
ไวยากรณ์ของการระบุรูปแบบภายในแต่ละครอบครัวได้เปลี่ยนไปเพื่ออธิบาย แบบอักษร "พื้นที่การออกแบบ" ของตัวแปร
คู่มือเริ่มใช้งานฉบับย่อ
คัดลอกและวาง HTML นี้ลงในไฟล์
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro"> <style> body { font-family: 'Crimson Pro', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body> </html>
หน้าเว็บควรแสดงผลข้อความว่า "การสร้างเว็บที่สวยงาม" ในแบบอักษร Crimson Pro โดยใช้เบราว์เซอร์เพื่อเปิดไฟล์
หลายครอบครัว
หากต้องการหลายครอบครัว ให้ระบุพารามิเตอร์ family=
สําหรับแต่ละครอบครัว
เช่น วิธีขอแบบอักษร Crimson Pro และ Literata
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
คัดลอกและวาง HTML นี้ลงในไฟล์
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata"> <style> body { font-size: 48px; } div:nth-child(1) { font-family: 'Crimson Pro', serif; } div:nth-child(2) { font-family: 'Literata’, serif; } </style> </head> <body> <div>Making the Web Beautiful!</div> <div>Making the Web Beautiful!</div> </body> </html>
หน้านี้ควรแสดงข้อความ "การสร้างเว็บที่สวยงาม" ใน Crimson Pro จากนั้นใน Literata โดยใช้เบราว์เซอร์เพื่อเปิดไฟล์
ช่วงแกน
แบบอักษรที่หลากหลายมีรูปแบบที่หลากหลายอย่างต่อเนื่อง ซึ่งมักจะไม่มีเวลาในการตอบสนองเพิ่มเติม ซึ่งเกี่ยวข้องกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ แบบอักษรแบบไดนามิกนี้ใช้รูปแบบต่างๆ อย่างต่อเนื่อง โดยให้น้ําหนักทั้งหมดตั้งแต่ 100 ถึง 900 ในหน้า และปรับน้ําหนักตามสถานการณ์
หากต้องการขอช่วงแกนแบบอักษรตัวแปร ให้ใช้ทั้ง 2 ค่ากับ ..
แบบอักษร | ส่งคำขอ |
---|---|
คริมสัน Pro [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
ไอริช Pro ตัวเอียง [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
ตัวเอียง Crimson Pro และ [wght 200-900 ] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
สไตล์ของแต่ละบุคคล เช่น น้ําหนัก
หากไม่มีข้อกําหนดรูปแบบ API จะใช้รูปแบบเริ่มต้นของครอบครัวที่ขอ หากต้องการขอสไตล์อื่นๆ เช่น น้ําหนักที่เจาะจง ให้ใส่เครื่องหมายโคลอน (:) ต่อท้ายชุดแบบอักษร ตามด้วยรายการคีย์เวิร์ดของพร็อพเพอร์ตี้แกนตามลําดับตัวอักษร เครื่องหมาย (@) และรายการอย่างน้อย 1 ค่าของพร็อพเพอร์ตี้แกนเหล่านั้น
ตัวอย่างเหล่านี้แสดงการทํางานจริง
แบบอักษร | ส่งคำขอ |
---|---|
Crimson Pro (ค่าเริ่มต้น) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
สีแดงเข้ม | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
Crimson Pro ปกติและตัวหนา | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
สีแดงเข้มและหนา | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts แสดงสไตล์ทั้งหมดที่ใช้ได้กับชุดแบบอักษรแต่ละชุด
รูปแบบเริ่มต้น
เมื่อคําขอไม่ระบุตําแหน่งหรือช่วงสําหรับแกน ระบบจะใช้ตําแหน่งเริ่มต้น ตําแหน่งเริ่มต้นของแกนตัวเอียงคือ 0 (ปกติ) และค่าเริ่มต้นของแกนน้ําหนักคือ 400 (ปกติ)
สําหรับครอบครัวที่มีแกนที่ไม่มีตําแหน่งเริ่มต้น คําขอที่ไม่ระบุตําแหน่งของแกนเหล่านั้นจะล้มเหลว เช่น เมื่อขอครอบครัวที่มีแกนน้ําหนักตั้งแต่ 500 ถึง 900 ต้องระบุตําแหน่งน้ําหนัก
น้ําหนักที่ไม่เป็นมาตรฐาน
โดยทั่วไปแบบอักษรที่มีน้ําหนักจะระบุสไตล์ของหลายค่าเป็น 100 (เช่น 300, 400, 700) แบบอักษรที่เปลี่ยนแปลงได้มีทั้งน้ําหนักมาตรฐานและน้ําหนักปานกลาง วิธีแสดงผลน้ําหนักระดับกลาง
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
การเพิ่มประสิทธิภาพสําหรับเวลาในการตอบสนองและขนาดไฟล์
ระบุสไตล์ที่คุณใช้อยู่ให้ถูกต้องแม่นยํา API ใช้รูปแบบที่ขอ ในชุดแบบอักษรที่กะทัดรัดที่สุด การขอรูปแบบที่ไม่ได้ใช้อาจทําให้ผู้ใช้ดาวน์โหลดข้อมูลแบบอักษรมากกว่าที่จําเป็น ซึ่งจะทําให้เวลาในการตอบสนองเพิ่มมากขึ้น หากคุณใช้น้ําหนักเพียง 3 ประเภท ให้ระบุน้ําหนักเหล่านั้นในคําขอในรูปแบบใดรูปแบบหนึ่ง หากคุณใช้ช่วงน้ําหนักที่ต่อเนื่อง ให้ระบุช่วงน้ําหนักดังกล่าวในคําขอ
ใช้แบบอักษรที่แสดง
พร็อพเพอร์ตี้ font-display ช่วยให้คุณควบคุมสิ่งที่เกิดขึ้นขณะที่แบบอักษรยังโหลดอยู่หรือไม่พร้อมใช้งาน การระบุค่าอื่นที่ไม่ใช่ auto
เริ่มต้นมักจะเหมาะสม
ส่งค่าที่ต้องการในพารามิเตอร์ display
ดังนี้
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
การเพิ่มประสิทธิภาพคําขอแบบอักษร
บ่อยครั้งที่คุณต้องการใช้แบบอักษรบนเว็บบนเว็บไซต์หรือแอปพลิเคชัน ทําให้คุณรู้ล่วงหน้าว่าต้องใช้ตัวอักษรใด ซึ่งมักเกิดขึ้นเมื่อคุณใช้แบบอักษรบนเว็บในโลโก้หรือส่วนหัว
ในกรณีเหล่านี้ คุณควรพิจารณาระบุค่า text=
ใน URL คําขอแบบอักษร วิธีนี้ช่วยให้ Google Fonts แสดงผลไฟล์แบบอักษรที่เพิ่มประสิทธิภาพตามคําขอของคุณ ในบางกรณี วิธีนี้จะช่วยลดขนาดของไฟล์แบบอักษรลงได้ถึง 90%
หากต้องการใช้ฟีเจอร์นี้ เพียงเพิ่ม text=
ลงในคําขอ API เช่น หากคุณใช้เฉพาะ Inconsolata สําหรับชื่อบล็อก คุณจะใส่ชื่อนั้นเป็นค่าของ text=
ได้ คําขอจะมีลักษณะดังนี้
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
เช่นเดียวกับสตริงคําค้นหาทั้งหมด คุณควรเข้ารหัสค่า URL:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
ฟีเจอร์นี้ยังใช้ได้กับแบบอักษรสากล ซึ่งช่วยให้คุณระบุอักขระ UTF-8 ได้ เช่น áHola! นําเสนอเป็น
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
โปรดทราบว่าจะระบุพารามิเตอร์ "text=' เพียงครั้งเดียวเท่านั้น โดยจะมีผลกับทุกครอบครัวในคําขอ โปรดใช้คําขอ API ที่แยกกันหากคุณต้องการเพิ่มประสิทธิภาพข้อความในหลายครอบครัว
การสร้าง URL ของ API
ความเข้มงวด
โปรดทราบโดยทั่วไปว่า CSS API ที่อัปเดตจะเข้มงวดมากขึ้นเกี่ยวกับคําขอที่ยอมรับต่อ CSS เดิม
หลักเกณฑ์ทั่วไป
- ระบุแกนตามลําดับตัวอักษร (ภาษา
en-US
) - ต้องจัดเรียงกลุ่มค่าแกน (เช่น Tuple) เป็นตัวเลข
- ที่ทับซ้อนกันต้องไม่ซ้อนทับกัน (เช่น
wght
400..500 และ 500..600)
ข้อกําหนด URL ของ API
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec
: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name
: ชื่อของชุดแบบอักษร
axis_tag_list
: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis
: แท็กแกน เช่น ital
, wdth
, wght
axis_tuple_list
: <axis_tuple>[;<axis_tuple>...]
axis_tuple
: <value>[,<value>...] // Same length as axis_tag_list
value
: <range>
| <float>
range
: <float>..<float>
float
: ค่าภายในช่วงของแกนที่เกี่ยวข้อง
text
: ข้อความที่จะแสดงในส่วนแบบอักษรที่ขอ
display
: auto
| block
| swap
| fallback
| optional
การรองรับเบราว์เซอร์เวอร์ชันเก่า
เบราว์เซอร์ที่ไม่รองรับแบบอักษรจะไม่สามารถแสดงการออกแบบของคุณตามที่มุ่งหวัง ตรวจสอบการรองรับแบบอักษรตัวแปรของเบราว์เซอร์ในCaniuse
การฝึกฝนการเพิ่มประสิทธิภาพแบบต่อเนื่องช่วยให้คุณหลีกเลี่ยงการทํางานที่ไม่คาดคิดในเบราว์เซอร์รุ่นเก่าเหล่านั้นได้ ใช้คําค้นหา @supports
ใน CSS เพื่อกําหนดให้ฟีเจอร์แบบอักษรผันแปร
ในตัวอย่างนี้ เราต้องการใช้ข้อความ 450 ของ Markazi Text แต่จะต้องกลับไปใช้รูปแบบปกติ (น้ําหนัก 400) หรือปานกลาง (น้ําหนัก 500) เมื่อระบบไม่รองรับฟีเจอร์แบบอักษรตัวแปร
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
คําขอ CSS Markazi+Text:wght@450
จะส่งน้ําหนัก 450 ไปยังไคลเอ็นต์ที่รองรับแบบอักษรและน้ําหนักที่ถ่วงน้ําหนัก 400 กับ 500 ไปยังไคลเอ็นต์ที่ไม่รองรับ โดยทั่วไปแล้ว โฆษณาสํารองในช่วงของคําขอจะพร้อมใช้งานในเบราว์เซอร์เดิม
Axis | การทํางานสํารอง |
---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
ตัวอย่างต่อไปนี้แสดงสไตล์ที่มีให้ใช้งานในเบราว์เซอร์เดิมสําหรับคําขอที่แตกต่างกัน 2-3 รายการ
ส่งคำขอ | สไตล์ที่ใช้ในเบราว์เซอร์เวอร์ชันเก่าได้ |
---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
แบบอักษรตัวแปรที่ใช้ได้
ดูตารางแบบอักษรที่เปลี่ยนแปลงได้ใน v2 API ที่นี่
อ่านเพิ่มเติม
- ดูรายการชุดแบบอักษรทั้งหมดที่ได้จาก Google Fonts API ได้ใน Google Fonts
- ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทํางานของ Google Fonts API ได้ในหน้าข้อควรพิจารณาทางเทคนิค