หน้านี้ได้รับการแปลโดย Cloud Translation API

การอัปเดต CSS API

ตอนนี้ Google Fonts รองรับแบบอักษรที่หลากหลายในการอัปเดต API เวอร์ชัน 2 อย่างเต็มรูปแบบแล้ว เราจะ อธิบายวิธีเรียกชุดแบบอักษรทั้งแบบเดี่ยวและหลายชุด และวิธีระบุ ช่วงของแกน หากต้องการเจาะลึกแบบอักษรต่างๆ คุณสามารถเรียนรู้เพิ่มเติมได้จาก โบรชัวร์ที่มีภาพประกอบแบบอินเทอร์แอกทีฟ จาก 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>

เมื่อใช้เบราว์เซอร์เพื่อเปิดไฟล์ หน้าควรแสดงข้อความ "ทำให้ Web Beautiful” ในแบบอักษร 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 ใน 1 หน้า และปรับเปลี่ยนตามน้ำหนักที่แตกต่างกัน ซึ่งขึ้นอยู่กับเงื่อนไขบางอย่าง

หากต้องการขอช่วงของแกนแบบอักษรตัวแปร ให้ผนวกค่า 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`

ดูเหมือนว่าเบราว์เซอร์ของคุณไม่รองรับแบบอักษรที่หลากหลาย (caniuse) ในเบราว์เซอร์ที่สนับสนุนรูปแบบตัวอักษร ข้อความต่อไปนี้ควรแสดงผล Crimson Pro เป็นชุดน้ำหนักแบบราบรื่นตั้งแต่ 400 ถึง 500 ภาพเคลื่อนไหว CSS ข้อความจึงปรับรูปแบบเมื่อโต้ตอบได้อย่างราบรื่น

หากเบราว์เซอร์รองรับแบบอักษรที่หลากหลาย (caniuse) อย่างเต็มรูปแบบ) ข้อความต่อไปนี้ควรจะแสดงผล Crimson Pro เป็นชุดน้ำหนักแบบราบรื่นจาก 400 ถึง 500 ภาพเคลื่อนไหว CSS ทำให้ข้อความมีรูปแบบที่หลากหลายได้อย่างราบรื่นเมื่อโต้ตอบ

ทำให้เว็บสวยงาม!

แต่ละรูปแบบ เช่น น้ำหนัก

หากไม่มีข้อกำหนดเกี่ยวกับรูปแบบ API จะแสดงรูปแบบเริ่มต้นของ ครอบครัวที่ขอ หากต้องการขอสไตล์เดี่ยวๆ เช่น น้ำหนักที่เจาะจง เติมเครื่องหมายโคลอน (:) ต่อท้ายชื่อชุดแบบอักษร ตามด้วยรายการแกน คีย์เวิร์ดของพร็อพเพอร์ตี้ตามลำดับตัวอักษร เครื่องหมาย @ และรายการอย่างน้อย 1 รายการ สำหรับคุณสมบัติของแกนเหล่านั้น

ตัวอย่างเหล่านี้แสดงให้เห็นการทำงานจริง

แบบอักษร	ส่งคำขอ
Crimson Pro (ค่าเริ่มต้น)	`https://fonts.googleapis.com/css2?family=Crimson+Pro`
คริมสัน Pro หนา	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700`
คริมสัน Pro ปกติและ หนา	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700`
คริมสัน Pro ตัวหนาและ ตัวเอียงหนา	`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

ดูเหมือนว่าเบราว์เซอร์ของคุณไม่รองรับแบบอักษรที่มีตัวแปร (caniuse) ในเบราว์เซอร์ ที่สนับสนุนรูปแบบอักษร ข้อความต่อไปนี้ควรแสดงเป็นสีแดงเข้ม มือโปรที่มีน้ำหนักต่างกันอย่างชัดเจนที่ 400, 450 และ 500

หากเบราว์เซอร์รองรับแบบอักษรที่เปลี่ยนแปลงได้โดยสมบูรณ์ (caniuse) ข้อความต่อไปนี้ควรแสดงผล Crimson Pro ด้วยน้ำหนักที่ชัดเจนที่ 400 450 และ 500

ทำให้เว็บสวยงาม!

การเพิ่มประสิทธิภาพสำหรับเวลาในการตอบสนองและขนาดไฟล์

ระบุรูปแบบที่คุณใช้อยู่ให้ถูกต้อง 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 API เดิม

หลักเกณฑ์ทั่วไป

แสดงรายการแกนตามลำดับตัวอักษร (en-US ภาษา)
กลุ่มค่าแกน (เช่น Tuples) ต้องจัดเรียงเป็นตัวเลข
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 แต่จะต้อง กลับไปใช้ปกติ (น้ำหนัก 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

ตัวอย่างเหล่านี้แสดงให้เห็นรูปแบบที่สามารถใช้งานได้บนเบราว์เซอร์รุ่นเก่า คำขอที่ต่างกัน

ส่งคำขอ	รูปแบบที่ใช้ได้ในเบราว์เซอร์เดิม
`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 ใน หน้าการพิจารณาทางเทคนิค