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

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

Jimmy Mooney

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

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

1. หากคําขอใช้พารามิเตอร์ทั่วไปที่ API มีไฟล์อยู่แล้ว ระบบจะแสดง CSS แก่ผู้ใช้ทันทีโดยนําผู้ใช้ไปยังไฟล์เหล่านี้
2. หากคุณขอแบบอักษรที่มีพารามิเตอร์ที่ API ไม่ได้แคชไว้ในปัจจุบัน 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-range เป็นเครื่องมือหนึ่งที่สามารถใช้เพื่อต่อสู้กับการดาวน์โหลดแบบอักษรขนาดใหญ่ได้แล้ว พร็อพเพอร์ตี้ 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= เป็น "こんにちは"

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

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

เตรียมแบบอักษรเว็บให้พร้อมรับอนาคตด้วย Google Fonts CSS API

ทีม Google Fonts ยังมีส่วนร่วมในมาตรฐาน W3C ใหม่ซึ่งพัฒนาเทคโนโลยีแบบอักษรบนเว็บอย่างต่อเนื่อง เช่น WOFF2 โปรเจ็กต์ที่กำลังดำเนินการอยู่โปรเจ็กต์หนึ่งคือการโอนแบบเพิ่ม Font ซึ่งช่วยให้ผู้ใช้โหลดไฟล์แบบเป็นชิ้นเล็กๆ เมื่อใช้บนหน้าจอและสามารถสตรีมส่วนที่เหลือได้ตามต้องการ ซึ่งมีประสิทธิภาพมากกว่า unicode-range เมื่อคุณใช้ Web Fonts 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