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

เครื่องมือสำหรับเฟรมเวิร์กสำหรับแบบอักษรสำรอง

Janicklas Ralph James

เว็บไซต์ที่โหลดแบบอักษรโดยใช้ font-display: Swap มักพบปัญหาการเปลี่ยนเลย์เอาต์ (CLS) เมื่อเว็บฟอนต์โหลดขึ้นและถูกสลับกับแบบอักษรสำรอง

คุณป้องกัน CLS ได้โดยการปรับขนาดของแบบอักษรสำรองให้ตรงกับแบบอักษรหลัก พร็อพเพอร์ตี้ เช่น size-adjust, ascent-override, descent-override และ line-gap-override ในกฎ @font-face จะช่วยลบล้างเมตริกของแบบอักษรสำรอง ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ควบคุมวิธีแสดงแบบอักษรได้มากขึ้น อ่านข้อมูลเพิ่มเติมเกี่ยวกับ font-fallbacks และพร็อพเพอร์ตี้การลบล้างได้ในโพสต์นี้ นอกจากนี้ คุณยังดูการใช้งานเทคนิคนี้ที่ใช้งานได้จริงในเดโมนี้ได้ด้วย

บทความนี้จะอธิบายวิธีใช้การปรับขนาดแบบอักษรในเฟรมเวิร์ก Next.js และ Nuxt.js เพื่อสร้าง CSS ของแบบอักษรสำรองและลด CLS รวมถึงสาธิตวิธีสร้างแบบอักษรสำรองโดยใช้เครื่องมือข้ามส่วนต่างๆ เช่น Fontaine และ Capsize

ข้อมูลเบื้องต้น

โดยทั่วไปแล้ว font-display: Swap จะใช้เพื่อป้องกัน FOIT (Flash ของข้อความที่มองไม่เห็น) และเพื่อแสดงเนื้อหาบนหน้าจอได้เร็วขึ้น ค่าของ swap จะบอกเบราว์เซอร์ว่าระบบควรแสดงข้อความที่ใช้แบบอักษรทันทีโดยใช้แบบอักษรของระบบ และจะแทนที่แบบอักษรของระบบเมื่อแบบอักษรที่กำหนดเองพร้อมใช้งานเท่านั้น

ปัญหาที่ใหญ่ที่สุดของ swap คือผลกระทบที่น่าสะเทือนใจ ซึ่งความแตกต่างของขนาดตัวอักษรของแบบอักษรทั้ง 2 แบบส่งผลให้เนื้อหาบนหน้าจอเปลี่ยนไปมา ซึ่งส่งผลให้คะแนน CLS ต่ำ โดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์ที่มีข้อความมาก

รูปภาพต่อไปนี้แสดงตัวอย่างปัญหา ภาพแรกใช้ font-display: swap โดยไม่ต้องพยายามปรับขนาดของแบบอักษรสำรอง ส่วนที่ 2 แสดงให้เห็นว่าการปรับขนาดโดยใช้กฎ @font-face ของ CSS ช่วยปรับปรุงประสบการณ์การโหลดได้อย่างไร

โดยไม่ปรับขนาดแบบอักษร

body {
  font-family: Inter, serif;
}

ข้อความที่เปลี่ยนแบบอักษรและขนาดกะทันหัน ซึ่งทําให้เกิดเอฟเฟกต์ที่น่าสะพรึงกลัว

หลังจากปรับขนาดแบบอักษร

body {
  font-family: Inter, fallback-inter, serif;
  }

@font-face {
  font-family: "fallback-inter";
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%;
  src: local("Arial");
}

ข้อความที่เปลี่ยนเป็นแบบอักษรอื่นอย่างราบรื่น

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

วิธีเพิ่มประสิทธิภาพแบบอักษรสำรองด้วย Next.js

Next.js มีวิธีเปิดใช้การเพิ่มประสิทธิภาพแบบอักษรสำรองในตัว ฟีเจอร์นี้จะเปิดใช้โดยค่าเริ่มต้นเมื่อคุณโหลดแบบอักษรโดยใช้คอมโพเนนต์ @next/font

คอมโพเนนต์ @next/font เปิดตัวใน Next.js เวอร์ชัน 13 คอมโพเนนต์นี้มี API เพื่อนําเข้า Google Fonts หรือแบบอักษรที่กําหนดเองลงในหน้าเว็บ รวมถึงการโฮสต์ไฟล์แบบอักษรด้วยตนเองโดยอัตโนมัติในตัว

เมื่อใช้ ระบบจะคำนวณและแทรกเมตริกแบบอักษรสำรองลงในไฟล์ CSS โดยอัตโนมัติ

ตัวอย่างเช่น หากใช้แบบอักษร Roboto โดยทั่วไปคุณจะต้องกำหนดแบบอักษรใน CSS ดังนี้

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}

body {
  font-family: Roboto;
}

วิธีย้ายข้อมูลไปยัง next/font

ย้ายการประกาศแบบอักษร Roboto ไปยัง JavaScript โดยการนําเข้าฟังก์ชัน "Roboto" จาก "next/font" ค่าที่แสดงผลของฟังก์ชันจะเป็นชื่อคลาสที่คุณใช้ประโยชน์ได้ในเทมเพลตคอมโพเนนต์ อย่าลืมเพิ่ม display: swap ลงในออบเจ็กต์การกําหนดค่าเพื่อเปิดใช้ฟีเจอร์
```
 import { Roboto } from '@next/font/google';

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap' // Using display swap automatically enables the feature
})
```
ใช้ชื่อคลาสที่สร้างขึ้นต่อไปนี้ในคอมโพเนนต์ javascript export default function RootLayout({ children }: { children: React.ReactNode; }) { return ( <html lang="en" className={roboto.className}> <body>{children}</body> </html> ); }

หมายเหตุ: คอมโพเนนต์ next/font ออกแบบมาเพื่อรองรับเฉพาะแบบอักษร "Arial" และ "Times New Roman" เป็นแบบอักษรสำรอง สาเหตุหลักที่เราเลือกแบบอักษรนี้มาใช้คือความหลากหลายของแพลตฟอร์มที่รองรับแบบอักษร Arial และ Times New Roman

ตัวเลือกการกําหนดค่า adjustFontFallback

สําหรับ @next/font/google: ค่าบูลีนที่กำหนดว่าควรใช้แบบอักษรสำรองอัตโนมัติเพื่อลด Cumulative Layout Shift หรือไม่ ค่าเริ่มต้นคือ True Next.js จะตั้งค่าแบบอักษรสำรองเป็น Arial หรือ Times New Roman โดยอัตโนมัติโดยขึ้นอยู่กับประเภทแบบอักษร (แบบ Serif กับแบบ Sans-serif ตามลำดับ)

สำหรับ @next/font/local: ค่าสตริงหรือบูลีนเท็จที่กำหนดว่าควรใช้แบบอักษรสำรองอัตโนมัติเพื่อลดการเปลี่ยนเลย์เอาต์สะสมหรือไม่ ค่าที่เป็นไปได้คือ Arial, Times New Roman หรือ false ค่าเริ่มต้นคือ Arial หากคุณต้องการใช้แบบอักษร Serif ให้พิจารณาตั้งค่านี้เป็น Times New Roman

อีกทางเลือกสำหรับแบบอักษร Google

หากใช้คอมโพเนนต์ next/font ไม่ได้ อีกวิธีในการใช้ฟีเจอร์นี้กับ Google Fonts คือการใช้ Flag optimizeFonts Next.js เปิดใช้ฟีเจอร์ optimizeFonts ไว้โดยค่าเริ่มต้นแล้ว ฟีเจอร์นี้จะแทรก CSS ของ Google Font ไว้ในคำตอบ HTML นอกจากนี้ คุณยังเปิดใช้ฟีเจอร์การปรับแบบอักษรสำรองได้โดยการตั้งค่า Flag experimental.adjustFontFallbacksWithSizeAdjust ใน next.config.js ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

// In next.config.js
module.exports = {
 experimental: {
   adjustFontFallbacksWithSizeAdjust: true,
 },
}

หมายเหตุ: เรายังไม่มีแผนที่จะรองรับฟีเจอร์นี้กับไดเรกทอรี app ที่เพิ่งแนะนำ ในระยะยาว คุณควรใช้ next/font

วิธีปรับแบบอักษรสำรองด้วย Nuxt

@nuxtjs/fontaine เป็นโมดูลสําหรับเฟรมเวิร์ก Nuxt.js ที่คํานวณค่าเมตริกแบบฟอนต์สำรองโดยอัตโนมัติและสร้าง @font-face CSS สำรอง

เปิดใช้โมดูลโดยเพิ่ม @nuxtjs/fontaine ลงในการกําหนดค่าโมดูล

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
})

หากใช้ Google Fonts หรือไม่มีการประกาศ @font-face สำหรับแบบอักษร คุณสามารถประกาศแบบอักษรเป็นตัวเลือกเพิ่มเติมได้

ในกรณีส่วนใหญ่ โมดูลจะอ่านกฎ @font-face จาก CSS และอนุมานรายละเอียดต่างๆ เช่น font-family, ชุดแบบอักษรสำรอง และประเภทการแสดงผลโดยอัตโนมัติ

หากโมดูลตรวจไม่พบแบบอักษรที่กําหนดไว้ คุณสามารถส่งข้อมูลเมตริกตามที่แสดงในข้อมูลโค้ดต่อไปนี้

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
  fontMetrics: {
  fonts: ['Inter', { family: 'Some Custom Font', src: '/path/to/custom/font.woff2' }],
},
})

โมดูลจะสแกน CSS โดยอัตโนมัติเพื่ออ่านการประกาศ @font-face และสร้างกฎ @font-face สำรอง

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}
/* This will be generated. */
@font-face {
  font-family: 'Roboto override';
  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'),
    local('Arial'), local('Noto Sans');
  ascent-override: 92.7734375%;
  descent-override: 24.4140625%;
  line-gap-override: 0%;
}

ตอนนี้คุณใช้ Roboto override เป็นแบบอักษรสำรองใน CSS ได้แล้ว ดังที่แสดงในตัวอย่างต่อไปนี้

:root {
  font-family: 'Roboto';
  /* This becomes */
  font-family: 'Roboto', 'Roboto override';
}

การสร้าง CSS ด้วยตนเอง

ไลบรารีแบบสแตนด์อโลนยังช่วยสร้าง CSS สําหรับการปรับขนาดแบบอักษรสำรองได้ด้วย

การใช้ไลบรารี Fontaine

หากไม่ได้ใช้ Nuxt หรือ Next.js คุณสามารถใช้ Fontaine ได้ Fontaine เป็นไลบรารีพื้นฐานที่ขับเคลื่อน @nuxtjs/fontaine คุณสามารถใช้ไลบรารีนี้ในโปรเจ็กต์เพื่อแทรก CSS แบบอักษรสำรองโดยอัตโนมัติโดยใช้ปลั๊กอิน Vite หรือ Webpack

สมมติว่าคุณมีแบบอักษร Roboto ที่กำหนดไว้ในไฟล์ CSS

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}

Fontaine มีเครื่องมือเปลี่ยนรูปแบบ Vite และ Webpack เพื่อเสียบเข้ากับเชนการบิลด์ได้อย่างง่ายดาย เปิดใช้ปลั๊กอินตามที่แสดงใน JavaScript ต่อไปนี้

import { FontaineTransform } from 'fontaine'

const options = {
  fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial', 'Noto Sans'],
  // You may need to resolve assets like `/fonts/Roboto.woff2` to a particular directory
  resolvePath: (id) => 'file:///path/to/public/dir' + id,
  // overrideName: (originalName) => `${name} override`
  // sourcemap: false
}

หากคุณใช้ Vite ให้เพิ่มปลั๊กอินดังนี้ javascript // Vite export default { plugins: [FontaineTransform.vite(options)] }

หากใช้ Webpack ให้เปิดใช้ดังนี้

// Webpack
export default {
  plugins: [FontaineTransform.webpack(options)]
}

โมดูลจะสแกนไฟล์โดยอัตโนมัติเพื่อแก้ไขกฎ @font-face ดังนี้ css @font-face { font-family: 'Roboto'; font-display: swap; src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff'); font-weight: 700; } /* This will be generated. */ @font-face { font-family: 'Roboto override'; src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial'), local('Noto Sans'); ascent-override: 92.7734375%; descent-override: 24.4140625%; line-gap-override: 0%; }

ตอนนี้คุณใช้ Roboto override เป็นแบบอักษรสำรองใน CSS ได้แล้ว css :root { font-family: 'Roboto'; /* This becomes */ font-family: 'Roboto', 'Roboto override'; }

การใช้ไลบรารี Capsize

หากไม่ได้ใช้ Next.js, Nuxt, Webpack หรือ Vite ตัวเลือกอื่นคือการใช้ไลบรารี Capsize เพื่อสร้าง CSS สำรอง

API createFontStack ใหม่

API เป็นส่วนหนึ่งของแพ็กเกจ @capsize/core ที่ชื่อ createFontStack ซึ่งยอมรับอาร์เรย์ของเมตริกแบบอักษรตามลำดับเดียวกับที่คุณระบุสแต็กแบบอักษร (พร็อพเพอร์ตี้ font-family)

คุณสามารถดูเอกสารประกอบเกี่ยวกับการใช้ Capsize ที่นี่

ตัวอย่าง

พิจารณาตัวอย่างต่อไปนี้ เว็บแบบอักษรที่ต้องการคือ Lobster ซึ่งจะใช้ Helvetica Neue เป็นค่าเริ่มต้นแทน และจะใช้ Arial เป็นค่าเริ่มต้นแทน Helvetica Neue ใน CSS font-family: Lobster, 'Helvetica Neue', Arial

นำเข้า createFontStack จากแพ็กเกจหลัก:
```
import { createFontStack } from '@capsizecss/core';
```
นําเข้าเมตริกแบบอักษรสําหรับแบบอักษรที่ต้องการแต่ละแบบ (ดูเมตริกแบบอักษรด้านบน) javascript import lobster from '@capsizecss/metrics/lobster'; import helveticaNeue from '@capsizecss/metrics/helveticaNeue'; import arial from '@capsizecss/metrics/arial';`
สร้างกองแบบอักษรโดยส่งเมตริกเป็นอาร์เรย์โดยใช้ลําดับเดียวกับที่คุณใช้ผ่านพร็อพเพอร์ตี้ CSS font-family javascript const { fontFamily, fontFaces } = createFontStack([ lobster, helveticaNeue, arial, ]);

ซึ่งจะแสดงผลดังนี้

{
  fontFamily: Lobster, 'Lobster Fallback: Helvetica Neue', 'Lobster Fallback: Arial',
  fontFaces: [
    {
      '@font-face' {
      'font-family': '"Lobster Fallback: Helvetica Neue"';
      src: local('Helvetica Neue');
      'ascent-override': '115.1741%';
      'descent-override': '28.7935%';
      'size-adjust': '86.8251%';
      }
     '@font-face' {
       'font-family': '"Lobster Fallback: Arial"';
       src: local('Arial');
       'ascent-override': 113.5679%;
       'descent-override': 28.392%;
       'size-adjust': 88.053%;
     }
   }
 ]
}

คุณต้องเพิ่มโค้ด fontFamily และ fontFaces ลงใน CSS โค้ดต่อไปนี้แสดงวิธีติดตั้งใช้งานในสไตล์ชีต CSS หรือภายในบล็อก <style>

<style type="text/css">
  .heading {
    font-family: 
  }

  
</style>

ซึ่งจะสร้าง CSS ต่อไปนี้

.heading {
  font-family: Lobster, 'Lobster Fallback: Helvetica Neue',
    'Lobster Fallback: Arial';
}

@font-face {
  font-family: 'Lobster Fallback: Helvetica Neue';
  src: local('Helvetica Neue');
  ascent-override: 115.1741%;
  descent-override: 28.7935%;
  size-adjust: 86.8251%;
}
@font-face {
  font-family: 'Lobster Fallback: Arial';
  src: local('Arial');
  ascent-override: 113.5679%;
  descent-override: 28.392%;
  size-adjust: 88.053%;
}

นอกจากนี้ คุณยังใช้แพ็กเกจ @capsize/metrics เพื่อคํานวณค่าการลบล้าง และใช้กับ CSS ด้วยตนเองได้

const fontMetrics = require(`@capsizecss/metrics/inter`);
const fallbackFontMetrics = require(`@capsizecss/metrics/arial`);
const mainFontAvgWidth = fontMetrics.xAvgWidth / fontMetrics.unitsPerEm;
const fallbackFontAvgWidth = fallbackFontMetrics.xAvgWidth / fallbackFontMetrics.unitsPerEm;
let sizeAdjust = mainFontAvgWidth / fallbackFontAvgWidth;
let ascent = fontMetrics.ascent / (unitsPerEm * fontMetrics.sizeAdjust));
let descent = fontMetrics.descent / (unitsPerEm * fontMetrics.sizeAdjust));
let lineGap = fontMetrics.lineGap / (unitsPerEm * fontMetrics.sizeAdjust));