다양한 글꼴 가중치를 사용하여 Nuxt에서 Google 글꼴을 효율적으로 로드하는 방법은 무엇입니까?

Nuxt에서 효율적으로 Google 글꼴 로드

문제:

NuxtJS 프로젝트에서 사용자는 두 가지 다른 구성 요소에 대해 서로 다른 글꼴 두께(600 및 800)를 가진 Saira Semi Condensed 글꼴을 사용하려고 합니다. 그러나 가중치가 다른 동일한 글꼴에 대해 두 개의 Google 글꼴 링크를 가져오면 중복이 발생하고 글꼴 가중치 적용 시 문제가 발생할 수 있습니다.

해결책:

권장되는 접근 방식은 다음과 같습니다. CDN을 사용하는 대신 페이지 원본을 통해 Google 글꼴 파일을 자체 호스팅하거나 프록시합니다. Nuxt는 Google Fonts의 효율적이고 맞춤설정 가능한 로딩을 가능하게 하는 @nuxtjs/google-fonts 모듈을 제공합니다. 사용 방법은 다음과 같습니다.

nuxt.config.js:

export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        // Other options here...
      },
    ],
  ],
}

Layout.vue(헤드 섹션):

<link rel="preload" href="/fonts/SairaSemiCondensed-wght@600.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/fonts/SairaSemiCondensed-wght@800.woff2" as="font" type="font/woff2" crossorigin="anonymous">

참고: /fonts를 다운로드한 글꼴 파일의 올바른 경로로 바꾸세요.

ComponentA.vue 또는 ComponentB.vue(스타일 섹션):

footer {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 600; /* or 800 for ComponentB */
}

이 접근 방식을 사용하면 특정 글꼴 가중치가 다운로드되어 각 구성 요소에 적용되므로 여러 CDN 링크가 필요하지 않습니다.

위 내용은 다양한 글꼴 가중치를 사용하여 Nuxt에서 Google 글꼴을 효율적으로 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!