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

การอัปเดต CSS API

ตอนนี้ 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`

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

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

สร้างเว็บสวยๆ

สไตล์ของแต่ละบุคคล เช่น น้ําหนัก

หากไม่มีข้อกําหนดรูปแบบ 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

เบราว์เซอร์ของคุณไม่รองรับแบบอักษรที่เปลี่ยนแปลงได้ (caniuse) ในเบราว์เซอร์ที่รองรับแบบอักษร ข้อความต่อไปนี้ควรแสดงผล Crimson Pro ที่มีน้ําหนักต่างกันไม่เกิน 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 เดิม

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

ระบุแกนตามลําดับตัวอักษร (ภาษา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 ได้ในหน้าข้อควรพิจารณาทางเทคนิค