CSS @font-face: การเรียนรู้การโหลดฟอนต์แบบกำหนดเองเพื่อประสบการณ์เว็บระดับโลก

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

ทำความเข้าใจพลังของ @font-face

ก่อนการมาถึงของ @font-face นักออกแบบเว็บส่วนใหญ่ถูกจำกัดอยู่แค่ชุดฟอนต์ระบบ (system fonts) ที่มีอยู่ไม่กี่แบบ ซึ่งมักจะนำไปสู่ความสวยงามของเว็บที่คล้ายคลึงกัน @font-face ได้ปฏิวัติสิ่งนี้โดยอนุญาตให้นักพัฒนาสามารถระบุฟอนต์ที่กำหนดเองเพื่อให้เบราว์เซอร์ของผู้ใช้ดาวน์โหลดและแสดงผลได้ สิ่งนี้ช่วยให้เว็บไซต์มีเสียงทางตัวพิมพ์ที่เป็นเอกลักษณ์ ซึ่งมีความสำคัญอย่างยิ่งต่อการสร้างความแตกต่างของแบรนด์และการสื่อสารอารมณ์หรือข้อความที่เฉพาะเจาะจง

ไวยากรณ์พื้นฐานของ @font-face นั้นเรียบง่ายอย่างสวยงาม:

            @font-face {
  font-family: 'YourFontName';
  src: url('path/to/your-font.woff2') format('woff2'),
       url('path/to/your-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

เรามาทำความเข้าใจคุณสมบัติที่จำเป็นเหล่านี้กัน:

• font-family: นี่คือชื่อที่คุณจะใช้อ้างอิงถึงฟอนต์ที่คุณกำหนดเองในไฟล์ CSS ของคุณ คุณสามารถเลือกชื่ออะไรก็ได้ที่คุณชอบ แต่แนวทางปฏิบัติที่ดีคือการตั้งชื่อให้สื่อความหมาย
• src: คุณสมบัตินี้คือหัวใจของ @font-face มันระบุตำแหน่งของไฟล์ฟอนต์ คุณสามารถระบุ URL ได้หลายรายการ โดยแต่ละรายการชี้ไปยังรูปแบบฟอนต์ที่แตกต่างกัน เบราว์เซอร์จะพยายามดาวน์โหลดอันแรกที่รองรับ
• url(): ระบุเส้นทางไปยังไฟล์ฟอนต์ ซึ่งอาจเป็น URL แบบสัมพัทธ์หรือแบบสมบูรณ์
• format(): คำอธิบายที่สำคัญนี้ช่วยให้เบราว์เซอร์ระบุรูปแบบฟอนต์ได้ ทำให้สามารถข้ามการดาวน์โหลดรูปแบบที่ไม่รองรับได้ รูปแบบที่พบบ่อย ได้แก่ woff2, woff, truetype (.ttf), opentype (.otf) และ embedded-opentype (.eot สำหรับ Internet Explorer เวอร์ชันเก่า)
• font-weight: กำหนดน้ำหนัก (เช่น normal, bold, 100-900) ของฟอนต์ โดยปกติคุณจะกำหนดกฎ @font-face แยกต่างหากสำหรับน้ำหนักที่แตกต่างกันของฟอนต์ตระกูลเดียวกัน
• font-style: ระบุสไตล์ของฟอนต์ (เช่น normal, italic, oblique) เช่นเดียวกับน้ำหนัก สไตล์ที่แตกต่างกันมักจะต้องมีการประกาศ @font-face แยกต่างหาก

การเพิ่มประสิทธิภาพการโหลดฟอนต์เพื่อการเข้าถึงทั่วโลก

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

ทำความเข้าใจรูปแบบฟอนต์และการรองรับของเบราว์เซอร์

เบราว์เซอร์สมัยใหม่รองรับรูปแบบ .woff2 และ .woff ได้อย่างยอดเยี่ยม รูปแบบเหล่านี้มีการบีบอัดสูงและมีประสิทธิภาพ ทำให้เป็นตัวเลือกที่ต้องการสำหรับการออกแบบตัวพิมพ์บนเว็บ

• WOFF2 (Web Open Font Format 2): นี่คือรูปแบบที่ทันสมัยและมีประสิทธิภาพที่สุด โดยให้การบีบอัดที่เหนือกว่า (ดีกว่า WOFF ถึง 45%) เนื่องจากการใช้การบีบอัดแบบ Brotli ได้รับการสนับสนุนจากเบราว์เซอร์สมัยใหม่ทั้งหมด รวมถึง Chrome, Firefox, Safari และ Edge
• WOFF (Web Open Font Format): รุ่นก่อนหน้าของ WOFF2, WOFF ให้การบีบอัดที่ดีและได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์ต่างๆ เป็นทางเลือกสำรองที่เชื่อถือได้หาก WOFF2 ไม่พร้อมใช้งาน
• TrueType Font (TTF) / OpenType Font (OTF): เหล่านี้เป็นรูปแบบฟอนต์เดสก์ท็อปแบบดั้งเดิมที่สามารถใช้บนเว็บได้ อย่างไรก็ตาม โดยทั่วไปแล้วรูปแบบเหล่านี้ได้รับการปรับให้เหมาะสมสำหรับการส่งมอบบนเว็บน้อยกว่า WOFF/WOFF2 โดยมีขนาดไฟล์ที่ใหญ่กว่า
• Embedded OpenType (EOT): รูปแบบนี้ส่วนใหญ่ใช้สำหรับ Internet Explorer เวอร์ชันก่อน IE9 ปัจจุบันถือว่าล้าสมัยไปมาก แต่อาจรวมไว้เพื่อความเข้ากันได้ย้อนหลังเป็นพิเศษ แม้ว่ามักจะถูกละเว้นในการพัฒนาสมัยใหม่ก็ตาม
• SVG Fonts: Safari เวอร์ชันเก่ารองรับฟอนต์ SVG เช่นเดียวกับ EOT ฟอนต์เหล่านี้ไม่ค่อยได้ใช้ในปัจจุบัน

การประกาศ @font-face ที่แข็งแกร่งมักจะรวมลำดับของรูปแบบต่างๆ โดยให้ความสำคัญกับรูปแบบที่มีประสิทธิภาพสูงสุดก่อน:

            @font-face {
  font-family: 'MyAwesomeFont';
  src: url('/fonts/MyAwesomeFont.woff2') format('woff2'),
       url('/fonts/MyAwesomeFont.woff') format('woff');
}
            

              
                Copy
              
            
          

การตั้งค่านี้ช่วยให้แน่ใจว่าเบราว์เซอร์จะพยายามดาวน์โหลด MyAwesomeFont.woff2 ก่อน หากไม่รองรับ WOFF2 ก็จะเปลี่ยนไปดาวน์โหลด MyAwesomeFont.woff แทน

การใช้ Subsetting เพื่อเพิ่มประสิทธิภาพ

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

Font subsetting คือกระบวนการสร้างไฟล์ฟอนต์ขนาดเล็กที่มีเฉพาะอักขระ (glyphs) และคุณสมบัติที่จำเป็นสำหรับการใช้งานเฉพาะของคุณ ผู้ผลิตฟอนต์และเครื่องมือออนไลน์จำนวนมากมีความสามารถในการทำ font subsetting ตัวอย่างเช่น หากคุณต้องการเพียงอักขระละตินพื้นฐานและสัญลักษณ์เฉพาะบางอย่างสำหรับเว็บไซต์ภาษาฝรั่งเศส คุณสามารถสร้างไฟล์ WOFF2 ที่ถูก subset ให้มีเพียง glyphs เหล่านั้นได้

ลองพิจารณาสถานการณ์ที่เว็บไซต์ข่าวต้องการแสดงพาดหัวข่าวด้วยฟอนต์ตัวหนาที่มีสไตล์ แต่เนื้อหาหลักใช้ฟอนต์มาตรฐานที่อ่านง่ายมาก ด้วยการ subset ฟอนต์ที่มีสไตล์ให้มีเฉพาะอักขระที่จำเป็นสำหรับพาดหัวข่าว ขนาดการดาวน์โหลดจะลดลงอย่างมาก เมื่อกำหนดกฎ @font-face ของคุณ คุณเพียงแค่ชี้ไปยังไฟล์ฟอนต์ที่ถูก subset:

            @font-face {
  font-family: 'HeadlineFont';
  src: url('/fonts/HeadlineFont-subset.woff2') format('woff2');
  font-weight: 700;
}
            

              
                Copy
              
            
          

ข้อมูลเชิงลึกที่นำไปใช้ได้จริง: ระบุชุดอักขระที่คุณต้องการจริงๆ หากกลุ่มเป้าหมายของคุณใช้ภาษาเฉพาะที่มีอักขระที่เป็นเอกลักษณ์ (เช่น กรีก, อาหรับ, อักษรเอเชียตะวันออก) ตรวจสอบให้แน่ใจว่าไฟล์ฟอนต์ของคุณรองรับ ในทางกลับกัน หากคุณมั่นใจว่าผู้ชมของคุณส่วนใหญ่ใช้อักขระละติน ให้ลองใช้การ subsetting เพื่อลดขนาดไฟล์

กลยุทธ์การแสดงผลฟอนต์: การควบคุมประสบการณ์ผู้ใช้

เมื่อฟอนต์ที่กำหนดเองกำลังโหลด จะมีช่วงเวลาที่ข้อความบนหน้าเว็บของคุณอาจยังไม่ถูกจัดสไตล์ ซึ่งอาจนำไปสู่เอฟเฟกต์การกระพริบ (Flash of Invisible Text - FOIT) หรือลักษณะที่ยุ่งเหยิง (Flash of Unstyled Text - FOUT) คุณสมบัติ CSS font-display ให้การควบคุมที่สำคัญต่อพฤติกรรมนี้ ซึ่งส่งผลกระทบอย่างมากต่อประสบการณ์ของผู้ใช้

คุณสมบัติ font-display ยอมรับค่าต่างๆ หลายค่า:

• auto: พฤติกรรมเริ่มต้นของเบราว์เซอร์ ซึ่งอาจแตกต่างกันไป แต่โดยทั่วไปจะใช้ฟอนต์ระบบสำรองก่อนแล้วจึงสลับไปใช้ฟอนต์ที่กำหนดเองเมื่อโหลดเสร็จ
• block: เบราว์เซอร์จะสร้างช่วงเวลาบล็อกสั้นๆ (โดยทั่วไป 3 วินาที) ซึ่งในช่วงเวลานั้นฟอนต์จะมองไม่เห็น หากฟอนต์ยังไม่โหลดภายในเวลานั้น เบราว์เซอร์จะแสดงข้อความสำรอง เมื่อฟอนต์โหลดเสร็จ ก็จะสลับเข้ามาแทน ซึ่งอาจนำไปสู่ FOIT
• swap: เบราว์เซอร์จะแสดงข้อความสำรองทันที (โดยใช้ฟอนต์ระบบ) แล้วจึงสลับไปใช้ฟอนต์ที่กำหนดเองเมื่อโหลดเสร็จ ซึ่งมักเป็นที่นิยมสำหรับประสบการณ์ผู้ใช้ เนื่องจากช่วยให้มั่นใจว่าข้อความจะมองเห็นได้ทันที
• fallback: แนวทางแบบผสมผสาน เบราว์เซอร์จะแสดงข้อความสำรองทันทีและสร้างช่วงเวลาที่มองไม่เห็นสั้นมาก (เช่น 100ms) สำหรับฟอนต์ที่กำหนดเอง หากฟอนต์ที่กำหนดเองโหลดภายในช่วงเวลาสั้นๆ นี้ ก็จะถูกแสดงผล มิฉะนั้นจะยังคงใช้ฟอนต์สำรองต่อไปตลอดเซสชัน
• optional: คล้ายกับ fallback แต่เบราว์เซอร์จะส่งคำขอเครือข่ายสำหรับฟอนต์และจะใช้ก็ต่อเมื่อโหลดเร็วมาก (ในช่วงเวลาที่มองไม่เห็นสั้นๆ เริ่มแรก) หากพลาดหน้าต่างนี้ เบราว์เซอร์จะยังคงใช้ฟอนต์สำรองต่อไปตลอดเซสชันของหน้าเว็บ ซึ่งเท่ากับเป็นการเลื่อนการใช้ฟอนต์ที่กำหนดเองออกไปเพื่อการใช้งานในภายหลัง เหมาะสำหรับฟอนต์ที่ไม่สำคัญซึ่งประสิทธิภาพเป็นสิ่งสำคัญที่สุด

สำหรับผู้ชมทั่วโลกที่ความเร็วการเชื่อมต่ออาจแตกต่างกันอย่างมาก swap หรือ fallback มักเป็นตัวเลือกที่เป็นมิตรต่อผู้ใช้มากที่สุด เพราะช่วยให้ผู้ใช้เห็นเนื้อหาทันที ป้องกันความหงุดหงิด

หากต้องการใช้ font-display คุณต้องเพิ่มเข้าไปในกฎ @font-face ของคุณ:

            @font-face {
  font-family: 'GlobalSans';
  src: url('/fonts/GlobalSans.woff2') format('woff2');
  font-display: swap;
}
            

              
                Copy
              
            
          

ตัวอย่าง: ลองนึกภาพเว็บไซต์ของแอปพลิเคชันธนาคาร สำหรับผู้ใช้ในภูมิภาคที่มีอินเทอร์เน็ตไม่เสถียร FOIT ที่เกิดจากไฟล์ฟอนต์ขนาดใหญ่อาจหมายความว่าพวกเขาไม่สามารถมองเห็นปุ่มเข้าสู่ระบบได้เป็นเวลาหลายวินาที การใช้ font-display: swap; ช่วยให้แน่ใจว่าแบบฟอร์มเข้าสู่ระบบจะปรากฏขึ้นทันทีด้วยฟอนต์ระบบ และฟอนต์ของแบรนด์ที่กำหนดเองจะโหลดในภายหลัง ซึ่งยังคงรักษาความสามารถในการใช้งานไว้ได้

การโหลดฟอนต์ล่วงหน้าเพื่อเพิ่มประสิทธิภาพ

เพื่อเพิ่มประสิทธิภาพกระบวนการโหลดให้ดียิ่งขึ้น คุณสามารถใช้แท็ก <link rel="preload"> ในส่วน <head> ของเอกสาร HTML ของคุณ วิธีนี้จะบอกให้เบราว์เซอร์ดึงไฟล์ฟอนต์ตั้งแต่เนิ่นๆ ในกระบวนการโหลดหน้าเว็บ แม้กระทั่งก่อนที่จะพบกับ CSS ที่ใช้ฟอนต์เหล่านั้น

สิ่งสำคัญคือต้องโหลดล่วงหน้าเฉพาะฟอนต์ที่จำเป็นสำหรับ viewport เริ่มต้นหรือเนื้อหาที่สำคัญเท่านั้น การโหลดล่วงหน้าที่มากเกินไปอาจส่งผลเสียต่อประสิทธิภาพโดยการใช้แบนด์วิดท์ที่จำเป็นสำหรับทรัพยากรอื่นๆ

เพิ่มบรรทัดเหล่านี้ในส่วน <head> ของ HTML ของคุณ:

            <link rel="preload" href="/fonts/MyAwesomeFont.woff2" as="font" type="font/woff2" crossorigin></link>
<link rel="preload" href="/fonts/MyAwesomeFont.woff" as="font" type="font/woff" crossorigin></link>
            

              
                Copy
              
            
          

แอตทริบิวต์ที่สำคัญ:

• href: เส้นทางไปยังไฟล์ฟอนต์ของคุณ
• as="font": บอกเบราว์เซอร์ว่านี่คือทรัพยากรฟอนต์
• type="font/woff2": ระบุ MIME type ซึ่งช่วยให้เบราว์เซอร์จัดลำดับความสำคัญได้
• crossorigin: จำเป็นสำหรับ CORS (Cross-Origin Resource Sharing) หากฟอนต์ของคุณโฮสต์อยู่บนโดเมนหรือ CDN ที่แตกต่างกัน ควรตั้งค่าเป็น anonymous หรือละเว้นหากฟอนต์อยู่บน origin เดียวกัน

แนวทางปฏิบัติที่ดีที่สุด: รวม @font-face เข้ากับ font-display: swap; และการโหลดล่วงหน้าเชิงกลยุทธ์เพื่อความสมดุลที่ดีที่สุดระหว่างความเร็วและประสบการณ์ทางภาพ โหลดล่วงหน้าฟอนต์รูปแบบที่สำคัญที่สุดของคุณ (เช่น น้ำหนักปกติของฟอนต์หลัก) โดยใช้ <link rel="preload"> และใช้ font-display: swap; สำหรับรูปแบบอื่นๆ หรือเป็นฟอนต์สำรอง

เทคนิคและข้อควรพิจารณาขั้นสูงสำหรับ @font-face

นอกเหนือจากพื้นฐานแล้ว ยังมีเทคนิคและข้อควรพิจารณาขั้นสูงหลายอย่างที่สามารถปรับปรุงการใช้งานฟอนต์ที่คุณกำหนดเองได้ดียิ่งขึ้น

ความหลากหลายของฟอนต์และฟอนต์แปรผัน (Variable Fonts)

ฟอนต์แปรผัน (Variable fonts) คือความก้าวหน้าครั้งปฏิวัติวงการออกแบบตัวพิมพ์ แทนที่จะต้องส่งไฟล์หลายไฟล์สำหรับแต่ละน้ำหนักและสไตล์ (เช่น Regular, Bold, Italic) ไฟล์ฟอนต์แปรผันไฟล์เดียวสามารถครอบคลุมรูปแบบการออกแบบที่หลากหลายได้ ซึ่งช่วยลดขนาดไฟล์ได้อย่างมากและให้การควบคุมคุณสมบัติทางตัวพิมพ์ได้อย่างลื่นไหล

ด้วยฟอนต์แปรผัน คุณสามารถสร้างแอนิเมชันน้ำหนักของฟอนต์ ปรับขนาดทางสายตาได้ทันที หรือปรับแต่งระยะห่างระหว่างตัวอักษรแบบไดนามิกได้ การประกาศ @font-face สำหรับฟอนต์แปรผันจะดูคล้ายกัน แต่คุณมักจะระบุช่วงสำหรับ font-weight และ font-style หรือใช้แกนเฉพาะที่ฟอนต์นั้นรองรับ

ตัวอย่างการใช้ฟอนต์แปรผัน (สมมติว่าฟอนต์รองรับแกนน้ำหนักและตัวเอียง):

            @font-face {
  font-family: 'VariableFont';
  src: url('/fonts/VariableFont.woff2') format('woff2');
  font-weight: 100 900; /* Defines the range of weights */
  font-style: italic 0 italic 1; /* Defines italic range if applicable */
}

/* Applying different weights */
h1 {
  font-family: 'VariableFont';
  font-weight: 700;
}

p {
  font-family: 'VariableFont';
  font-weight: 450;
}

.italic-text {
  font-family: 'VariableFont';
  font-style: italic;
  font-weight: 500;
}
            

              
                Copy
              
            
          

ความเกี่ยวข้องในระดับโลก: ฟอนต์แปรผันมีประสิทธิภาพอย่างเหลือเชื่อ ทำให้เหมาะสำหรับผู้ชมต่างประเทศที่แบนด์วิดท์อาจเป็นข้อจำกัด นอกจากนี้ยังให้ความยืดหยุ่นมากขึ้นสำหรับการออกแบบที่ยืดหยุ่น (responsive design) ทำให้สามารถปรับแต่งการออกแบบตัวพิมพ์ได้อย่างละเอียดบนขนาดหน้าจอและอุปกรณ์ต่างๆ ที่พบได้ทั่วไปในภูมิภาคต่างๆ

การจัดการฟอนต์สำรองอย่างราบรื่น

แม้จะพยายามอย่างเต็มที่แล้ว แต่การโหลดฟอนต์อาจล้มเหลวได้ การใช้กลยุทธ์ฟอนต์สำรองที่แข็งแกร่งจึงมีความสำคัญอย่างยิ่งต่อการรักษาความสามารถในการอ่านและรูปลักษณ์ที่สอดคล้องกัน แม้ในสภาวะที่ไม่เอื้ออำนวย

CSS ของคุณควรกำหนดลำดับชั้นของฟอนต์ที่ชัดเจน เริ่มต้นด้วยฟอนต์ที่คุณกำหนดเอง ตามด้วยฟอนต์ตระกูลทั่วไปที่มีลักษณะใกล้เคียงกันมากที่สุด

            body {
  font-family: 'MyCustomFont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
  font-family: 'MyHeadlineFont', Georgia, Times, 'Times New Roman', serif;
}

            

              
                Copy
              
            
          

ข้อควรพิจารณาสำหรับฟอนต์สำรองทั่วโลก:

• ฟอนต์สำรองเฉพาะภาษา: สำหรับเว็บไซต์ที่มีผู้ชมทั่วโลกอย่างแท้จริง ควรพิจารณาว่าภูมิภาคต่างๆ อาจมีฟอนต์ระบบที่นิยมใช้แตกต่างกันไป แม้ว่าฟอนต์สำรองทั่วไปเช่น Arial และ Times New Roman จะมีใช้อย่างแพร่หลาย แต่ในบางบริบท คุณอาจต้องการรวมฟอนต์สำรองที่เป็นที่รู้จักว่ามีอยู่ในระบบปฏิบัติการที่หลากหลายกว่าหรืออุปกรณ์มือถือที่ใช้กันทั่วไปในภูมิภาคเฉพาะ อย่างไรก็ตาม เพื่อความเรียบง่ายและความเข้ากันได้ในวงกว้าง การยึดติดกับฟอนต์ตระกูลทั่วไปที่เป็นที่ยอมรับในระดับสากลมักเป็นแนวทางที่ปฏิบัติได้จริงที่สุด
• ชุดอักขระ: ตรวจสอบให้แน่ใจว่าฟอนต์สำรองของคุณรองรับชุดอักขระที่เนื้อหาของคุณต้องการ หากฟอนต์หลักของคุณสำหรับเว็บไซต์หลายภาษา ฟอนต์สำรองของคุณก็ควรจะรองรับอักขระได้กว้างขวางเช่นกัน

การใช้ฟอนต์ในเครื่อง (ด้วยความระมัดระวัง)

@font-face อนุญาตให้คุณระบุชื่อฟอนต์ในเครื่องในคุณสมบัติ `src` ได้ หากฟอนต์นั้นติดตั้งอยู่บนระบบของผู้ใช้แล้ว เบราว์เซอร์อาจใช้ฟอนต์นั้นแทนการดาวน์โหลดเว็บฟอนต์ ซึ่งช่วยประหยัดแบนด์วิดท์

            @font-face {
  font-family: 'MySystemFont';
  src: local('MySystemFontRegular'), /* Name as installed */
       local('MySystemFont-Regular'),
       url('/fonts/MySystemFont.woff2') format('woff2');
}

            

              
                Copy
              
            
          

ข้อควรระวัง:

• การตั้งชื่อที่ไม่สอดคล้องกัน: ชื่อฟอนต์ในเครื่องอาจแตกต่างกันอย่างมากในแต่ละระบบปฏิบัติการและแม้กระทั่งการติดตั้งที่แตกต่างกัน ทำให้การตรวจจับที่เชื่อถือได้เป็นเรื่องยาก
• ความแตกต่างของฟอนต์: แม้ว่าฟอนต์ที่มีชื่อเดียวกันจะถูกติดตั้งในเครื่อง แต่ก็อาจเป็นเวอร์ชันที่แตกต่างกันหรือมีเมตริกที่แตกต่างจากเว็บฟอนต์เล็กน้อย ซึ่งนำไปสู่การเลื่อนของเลย์เอาต์
• ประโยชน์ที่จำกัด: ด้วยการเพิ่มประสิทธิภาพเว็บฟอนต์สมัยใหม่ (WOFF2, subsetting, preloading) ประโยชน์ของการพึ่งพาฟอนต์ในเครื่องมักมีน้อยและอาจสร้างปัญหามากกว่าแก้ไข

คำแนะนำ: แม้ว่าคุณจะสามารถรวมการประกาศฟอนต์ในเครื่องเป็นขั้นตอนแรกในรายการ `src` ของคุณได้ แต่ควรให้ความสำคัญกับเวอร์ชันเว็บฟอนต์เพื่อผลลัพธ์ที่คาดเดาได้สำหรับผู้ชมทั่วโลกของคุณ

Font Loading API: การควบคุมที่ละเอียดยิ่งขึ้น

สำหรับการควบคุมที่ละเอียดยิ่งขึ้น CSS Font Loading API นำเสนอโซลูชันที่ใช้ JavaScript ซึ่งช่วยให้คุณสามารถโหลดฟอนต์แบบไดนามิก ตรวจสอบสถานะการโหลด และนำไปใช้ตามเหตุการณ์แบบเรียลไทม์ได้

การใช้ JavaScript คุณสามารถ:

• โหลดฟอนต์ตามความต้องการ
• ตอบสนองต่อความคืบหน้าในการโหลดฟอนต์
• ใช้สไตล์ที่เฉพาะเจาะจงหลังจากที่ฟอนต์โหลดเสร็จแล้วเท่านั้น

ตัวอย่างการใช้ FontFace และ document.fonts:

            const fontFace = new FontFace('MyDynamicFont', 'url(/fonts/MyDynamicFont.woff2)', {
  style: 'normal',
  weight: 'normal'
});

document.fonts.add(fontFace);

fontFace.load().then(function() {
  // Font loaded successfully, now apply it or update UI
  document.body.style.fontFamily = 'MyDynamicFont, sans-serif';
}).catch(function(error) {
  // Handle font loading errors
  console.error('Font loading failed:', error);
});
            

              
                Copy
              
            
          

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

บริการจัดการฟอนต์และ CDNs

สำหรับหลายๆ คน การจัดการไฟล์ฟอนต์และการรับประกันการส่งมอบที่ดีที่สุดอาจเป็นเรื่องซับซ้อน บริการเว็บฟอนต์และเครือข่ายการจัดส่งเนื้อหา (CDNs) นำเสนอโซลูชันที่สะดวกและมักจะได้รับการปรับให้เหมาะสมอย่างดี

• Google Fonts: หนึ่งในบริการฟรียอดนิยมที่สุด นำเสนอคลังฟอนต์โอเพนซอร์สขนาดใหญ่ โดยปกติคุณจะฝังโดยใช้แท็กลิงก์ง่ายๆ Google Fonts จะให้บริการรูปแบบที่มีประสิทธิภาพสูงสุดโดยอัตโนมัติ (เช่น WOFF2) และรวม font-display: swap; ไว้เป็นค่าเริ่มต้น
• Adobe Fonts (Typekit): บริการแบบสมัครสมาชิกที่ให้บริการฟอนต์เชิงพาณิชย์คุณภาพสูง มีการผสานรวมที่แข็งแกร่งและการเพิ่มประสิทธิภาพ
• การโฮสต์ด้วยตนเองกับ CDN: คุณสามารถโฮสต์ไฟล์ฟอนต์ของคุณเองบน CDN ได้ ซึ่งจะทำให้คุณสามารถควบคุมรูปแบบไฟล์ การทำ subsetting และการส่งมอบได้อย่างสมบูรณ์ CDNs มีการกระจายอยู่ทั่วโลก ทำให้มั่นใจได้ว่าจะส่งมอบให้ผู้ใช้ได้อย่างรวดเร็วไม่ว่าจะอยู่ที่ใด

ตัวอย่าง: แบรนด์อีคอมเมิร์ซระดับโลกอาจใช้ Google Fonts สำหรับหน้าการตลาดเพื่อให้แน่ใจว่ามีความสอดคล้องทางภาพและการจดจำแบรนด์ สำหรับส่วนธุรกรรมของเว็บไซต์ (กระบวนการชำระเงิน) พวกเขาอาจโฮสต์ฟอนต์ที่ได้รับการปรับให้เหมาะสมอย่างสูงและทำ subsetting บน CDN ของตนเองเพื่อความเร็วและความน่าเชื่อถือสูงสุด

การรับประกันการเข้าถึงและความครอบคลุม

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

• ความชัดเจนในการอ่าน (Legibility): เลือกฟอนต์ที่ชัดเจนและอ่านง่าย โดยเฉพาะในขนาดที่เล็กลง หลีกเลี่ยงฟอนต์ที่ตกแต่งมากเกินไปหรือฟอนต์ที่บีบอัดสำหรับเนื้อหาหลัก
• ความคมชัด (Contrast): ตรวจสอบให้แน่ใจว่ามีความคมชัดเพียงพอระหว่างสีฟอนต์และสีพื้นหลัง นี่เป็นสิ่งสำคัญสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น
• การรองรับอักขระ: ดังที่ได้กล่าวไปแล้ว ตรวจสอบว่าฟอนต์ที่คุณเลือกและฟอนต์สำรองรองรับภาษาและสคริปต์ที่ผู้ใช้ของคุณใช้ อักขระที่ขาดหายไปอาจแสดงผลเป็นสี่เหลี่ยมที่ไม่มีประโยชน์ (tofu)
• การทดสอบ: ทดสอบการออกแบบตัวพิมพ์ของคุณในเบราว์เซอร์ อุปกรณ์ และระบบปฏิบัติการต่างๆ สิ่งที่ดูดีบนเครื่องพัฒนาของคุณอาจแสดงผลแตกต่างไปจากที่อื่น

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

สรุป: การสร้างความเป็นเลิศด้านการออกแบบตัวพิมพ์ระดับโลก

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

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