API สำหรับแบบอักษรบนเว็บที่สวยงามและรวดเร็ว

วิธีใช้ Google Fonts CSS API เพื่อแสดงแบบอักษรสำหรับเว็บอย่างมีประสิทธิภาพ

Jimmy Mooney

ในช่วงหลายปีที่ผ่านมา เทคโนโลยีแบบอักษรสำหรับเว็บได้เปลี่ยนแปลงไปมาก สิ่งที่เคยเป็นแนวทางปฏิบัติเฉพาะกลุ่มซึ่งจำเป็นต้องใช้รูปภาพข้อความหรือปลั๊กอิน Flash (ซึ่งส่งผลเสียต่อการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือค้นหาของเว็บไซต์) ได้กลายเป็นหลักปฏิบัติมาตรฐานบนเว็บไปแล้วในปัจจุบัน กาลครั้งหนึ่งนานมาแล้ว คุณต้องโหลดแบบอักษรทั้งหมดก่อนที่หน้าเว็บจะโหลด ซึ่งมีรูปแบบและอักขระที่คุณอาจยังไม่เคยใช้ด้วยซ้ำ แต่ถึงกระนั้นก็ได้กลายเป็นอดีตไปแล้ว

Google Fonts CSS API มีการพัฒนาเช่นกันในช่วงหลายปีที่ผ่านมาเพื่อให้ทันกับการเปลี่ยนแปลงของเทคโนโลยีแบบอักษรสำหรับเว็บ ซึ่งพัฒนาไปไกลมากจากคุณค่าเดิมที่นำเสนอ เพื่อทำให้เว็บเร็วขึ้นโดยอนุญาตให้เบราว์เซอร์แคชแบบอักษรที่ใช้กันทั่วไปในเว็บไซต์ทั้งหมดที่ใช้ API นี้ กรณีนี้ไม่เป็นความจริงอีกต่อไป แต่ API ยังคงมีการเพิ่มประสิทธิภาพที่สำคัญเพิ่มเติมเพื่อให้เว็บไซต์โหลดได้อย่างรวดเร็วและแบบอักษรทำงานได้อย่างดี

เมื่อใช้ Google Fonts CSS API เว็บไซต์จะขอเฉพาะข้อมูลแบบอักษรที่จำเป็นเพื่อให้มีเวลาโหลด CSS น้อยที่สุด เพื่อให้ผู้เข้าชมเว็บไซต์โหลดเนื้อหาได้เร็วที่สุด API จะตอบกลับคำขอแต่ละรายการด้วยแบบอักษรที่ดีที่สุดสำหรับเว็บเบราว์เซอร์นั้น

ทั้งหมดนี้เกิดขึ้นด้วยการรวม HTML หนึ่งบรรทัดไว้ในโค้ดของคุณ

วิธีใช้ Google Fonts CSS API

เอกสารประกอบเกี่ยวกับ Google Fonts CSS API สรุปไว้เป็นอย่างดี ดังนี้

คุณไม่จำเป็นต้องเขียนโปรแกรมใดๆ เพียงเพิ่มลิงก์สไตล์ชีตพิเศษลงในเอกสาร HTML แล้วอ้างอิงแบบอักษรในรูปแบบ CSS

สิ่งขั้นต่ำที่คุณต้องทำคือใส่บรรทัดเดียวใน HTML ดังนี้

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

เมื่อขอแบบอักษรจาก API คุณจะระบุครอบครัวที่ต้องการ ระบุน้ำหนัก รูปแบบ ชุดย่อย และตัวเลือกอื่นๆ อีกมากมายได้ตามต้องการ จากนั้น API จะจัดการคำขอของคุณด้วย 1 ใน 2 วิธีต่อไปนี้

  1. หากคำขอใช้พารามิเตอร์ทั่วไปที่ API มีไฟล์อยู่แล้ว ระบบจะคืน CSS ให้ผู้ใช้ทันทีและนำผู้ใช้ไปยังไฟล์เหล่านี้
  2. หากคุณขอแบบอักษรที่มีพารามิเตอร์ที่ API ยังไม่ได้แคชไว้ในขณะนั้น ระบบจะย่อยแบบอักษรของคุณทันทีโดยใช้ HarfBuzz เพื่อดำเนินการอย่างรวดเร็ว และแสดงผล CSS ที่ชี้ไปยังแบบอักษรดังกล่าว

ไฟล์แบบอักษรอาจมีขนาดใหญ่ แต่ไม่จำเป็นต้องมี

แบบอักษรของเว็บอาจมีขนาดใหญ่ก็ได้ น้ำหนักของ Noto Sans Japan ใน WOFF2 เพียงน้ำหนักเดียวก็เกือบ 3.4 MB และการดาวน์โหลดนี้ให้กับผู้ใช้แต่ละคนก็ทำให้เวลาในการโหลดหน้าเว็บพุ่งสูงขึ้น เมื่อทุกมิลลิวินาทีมีค่าและทุกไบต์มีค่า คุณควรตรวจสอบว่ากำลังโหลดข้อมูลที่ผู้ใช้ต้องการเท่านั้น

Google Fonts CSS API สามารถสร้างไฟล์แบบอักษรขนาดเล็กมาก (เรียกว่าชุดย่อย) ซึ่งสร้างขึ้นแบบเรียลไทม์ เพื่อแสดงให้ผู้ใช้เห็นเฉพาะข้อความและรูปแบบที่เว็บไซต์ต้องการ คุณขออักขระที่เจาะจงได้โดยใช้พารามิเตอร์ text แทนที่จะแสดงทั้งแบบอักษร

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

แผนภูมิที่มีจำนวนตัวอักษรละตินพื้นฐาน กรีกพื้นฐาน และกรีกเพิ่มเติม

นอกจากนี้ CSS API ยังช่วยเพิ่มประสิทธิภาพแบบอักษรของเว็บเพิ่มเติมให้แก่ผู้ใช้โดยอัตโนมัติ โดยไม่ต้องใช้พารามิเตอร์ API API นี้จะแสดงไฟล์ CSS แก่ผู้ใช้ที่เปิดใช้ unicode-range ไว้แล้ว (หากเว็บเบราว์เซอร์รองรับ) เพื่อให้โหลดแบบอักษรเฉพาะสำหรับอักขระที่เว็บไซต์ต้องการเท่านั้น

ข้อบ่งชี้ CSS ช่วง Unicode เป็นเครื่องมือหนึ่งที่ตอนนี้สามารถใช้เพื่อต่อสู้กับการดาวน์โหลดแบบอักษรขนาดใหญ่ได้ พร็อพเพอร์ตี้ CSS นี้กำหนดช่วงของอักขระ Unicode ที่มีการประกาศ @font-face หากอักขระตัวใดตัวหนึ่งเหล่านี้แสดงผลในหน้าเว็บ ระบบจะดาวน์โหลดแบบอักษรนั้น วิธีนี้ใช้ได้ดีกับทุกภาษา คุณจึงสามารถเลือกใช้แบบอักษรที่มีอักขระละติน กรีก หรือซิริลลิก แล้วสร้างส่วนย่อยที่เล็กลงได้ ในแผนภูมิก่อนหน้านี้ คุณจะเห็นว่าหากคุณต้องโหลดชุดอักขระทั้ง 3 ชุดนี้ ตัวอักษรจะยาวเกิน 600 รูป

แผนภูมิที่มีจำนวนตัวอักษรละตินพื้นฐาน ละตินแบบขยาย เกาหลี และญี่ปุ่น

และยังเปิดใช้แบบอักษรจีน ญี่ปุ่น และเกาหลี (CJK) สำหรับเว็บด้วย ในแผนภูมิก่อนหน้า คุณจะเห็นว่าแบบอักษร CJK ครอบคลุม 15-20 เท่าของจำนวนอักขระของแบบอักษรละติน แบบอักษรเหล่านี้มักมีขนาดใหญ่มากและอักขระจำนวนมากในภาษาเหล่านั้นไม่ค่อยถูกใช้บ่อยเท่ากับแบบอื่นๆ

การใช้ CSS API และ Unicode-range จะช่วยลดการโอนไฟล์ได้ประมาณ 90% เมื่อใช้ข้อบ่งชี้ unicode-range คุณจะสามารถกำหนดแต่ละส่วนแยกกันได้ และแต่ละสไลซ์จะดาวน์โหลดเมื่อเนื้อหาของคุณมีอักขระหนึ่งตัวในช่วงอักขระเหล่านี้เท่านั้น

ตัวอย่าง: หากต้องการตั้งค่าเฉพาะคำว่า "เลือกที่จะไม่เล็กเพียงใด ちは" ใน Noto Sans JP คุณสามารถทำดังนี้

  • โฮสต์ไฟล์ WOFF2 ของคุณเอง
  • ใช้ CSS API เพื่อเรียกข้อมูล WOFF2
  • ใช้ CSS API โดยตั้งพารามิเตอร์ text= เป็น "เชิงบวกเจ็ทหัวเรื่องは"

กราฟที่มีการเปรียบเทียบวิธีการต่างๆ ในการดาวน์โหลด Noto Sans JP

ในตัวอย่างนี้ คุณจะเห็นว่าการใช้ CSS API ช่วยให้คุณประหยัด 97.5% จากการโฮสต์แบบอักษร WOFF2 ด้วยตัวเองได้เพราะการสนับสนุนในตัวของ API ในการแยกแบบอักษรขนาดใหญ่เป็น Unicode-range ด้วยการดำเนินการเพิ่มขึ้นอีกขั้นและระบุข้อความที่คุณต้องการแสดง จะช่วยลดขนาดของแบบอักษรเหลือเพียง 95.3% ของแบบอักษร CSS API ซึ่งมีขนาดเล็กกว่าแบบอักษรที่โฮสต์ด้วยตนเองถึง 99.9%

Google Fonts CSS API จะแสดงแบบอักษรโดยอัตโนมัติในรูปแบบที่เล็กที่สุดและเข้ากันได้มากที่สุดที่เบราว์เซอร์ของผู้ใช้รองรับ หากผู้ใช้ของคุณใช้เบราว์เซอร์ที่มีการสนับสนุน WOFF2 API จะจัดหาแบบอักษรใน WOFF2 แต่หากผู้ใช้ใช้เบราว์เซอร์รุ่นเก่า API จะแสดงแบบอักษรในรูปแบบที่เบราว์เซอร์นั้นสนับสนุน นอกจากนี้ API จะนำข้อมูลออกจากแบบอักษรเมื่อไม่จำเป็นเพื่อลดขนาดไฟล์ของผู้ใช้แต่ละราย เช่น ข้อมูลที่บอกใบ้จะถูกนำออกสำหรับผู้ใช้ที่เบราว์เซอร์ไม่จำเป็นต้องใช้

ปกป้องแบบอักษรสำหรับเว็บของคุณในอนาคตด้วย Google Fonts CSS API

ทีม Google Fonts ยังมีส่วนร่วมกับมาตรฐาน W3C ใหม่ ซึ่งยังคงคิดค้นเทคโนโลยีแบบอักษรสำหรับเว็บอย่างต่อเนื่อง เช่น WOFF2 โปรเจ็กต์ปัจจุบันคือ Incremental Font Transfer ซึ่งช่วยให้ผู้ใช้โหลดไฟล์แบบอักษรส่วนที่มีขนาดเล็กมากขณะที่นำมาใช้ในหน้าจอและสตรีมในส่วนที่เหลือได้ตามต้องการ โดยมีประสิทธิภาพสูงกว่า Unicode Range เมื่อคุณใช้ API แบบอักษรเว็บของเรา ผู้ใช้ของคุณจะได้รับการปรับปรุงเทคโนโลยีการโอนแบบอักษรที่สำคัญเหล่านี้เมื่อเบราว์เซอร์ทำงาน

นี่คือประโยชน์ของ Font API: ผู้ใช้ของคุณจะได้รับประโยชน์จากการปรับปรุงเทคโนโลยีใหม่ทุกครั้งโดยไม่มีการเปลี่ยนแปลงในเว็บไซต์ของคุณ รูปแบบใหม่ของแบบอักษรสำหรับเว็บใช่ไหม ก็ไม่มีปัญหา ต้องการการสนับสนุนเบราว์เซอร์ใหม่หรือระบบปฏิบัติการหรือไม่ ปัญหานี้จะหมดไป ดังนั้น แทนที่จะต้องเสียเวลาไปกับการบำรุงรักษาแบบอักษรบนเว็บ คุณก็โฟกัสที่ผู้ใช้และเนื้อหาของคุณได้อย่างอิสระ

การรองรับแบบอักษรตัวแปรในตัว

แบบอักษรตัวแปรคือไฟล์แบบอักษรที่เก็บรูปแบบการออกแบบที่หลากหลายในแกนต่างๆ และ Google Fonts CSS API เวอร์ชันใหม่จะรองรับแบบอักษรเหล่านั้น การเพิ่มแกนอีกแบบของรูปแบบจะช่วยทำให้แบบอักษรมีความยืดหยุ่น แต่สามารถเพิ่มขนาดไฟล์แบบอักษรได้เกือบ 2 เท่า

เมื่อคุณกำหนดคำขอ CSS API อย่างเจาะจง Google Fonts CSS API จะสามารถแสดงแบบอักษรเฉพาะในสัดส่วนที่เว็บไซต์ต้องการเท่านั้น เพื่อที่จะลดขนาดการดาวน์โหลดสำหรับผู้ใช้ วิธีนี้ช่วยให้คุณใช้แบบอักษรที่เปลี่ยนแปลงได้สำหรับเว็บโดยไม่ต้องใช้เวลาโหลดหน้าเว็บนาน ซึ่งทำได้โดยการระบุค่าเดียวบนแกน หรือระบุช่วง หรือคุณยังระบุหลายแกนและชุดแบบอักษรหลายชุดในคำขอเดียวได้อีกด้วย API มีความยืดหยุ่นเพื่อตอบสนองความต้องการของคุณ

ติดตั้งง่ายและเพิ่มประสิทธิภาพเพื่อคุณ

Google Fonts CSS API ช่วยให้คุณแสดงแบบอักษรที่มีคุณสมบัติดังต่อไปนี้ได้

  • เข้ากันได้กับเว็บเบราว์เซอร์มากขึ้น
  • เล็กที่สุดเท่าที่จะทำได้
  • จัดส่งอย่างรวดเร็ว
  • ใช้งานง่ายขึ้น

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Google Fonts ได้ที่ fonts.google.com และดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS API ได้ที่เอกสารประกอบเกี่ยวกับ API

ข้อความแสดงการยอมรับ

รูปภาพหลักของ leesehee