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

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

Janicklas Ralph James

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

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

บทความนี้จะสำรวจวิธีใช้การปรับขนาดแบบอักษรในเฟรมเวิร์ก 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;
}

วิธีย้ายข้อมูลไปยังแบบอักษรถัดไป/แบบอักษร

ย้ายการประกาศแบบอักษร 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 ออกแบบมาให้รองรับแบบอักษรสำรองเป็น "รูปแบบใหม่" และ "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 Fonts

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

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

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

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

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

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

import { defineNuxtConfig } from 'nuxt'

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

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

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

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

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 ใน 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 ชุดแบบอักษร 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));

กิตติกรรมประกาศ

ภาพหลักโดย Alexander Andrews ใน Unsplash