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

Nuxt에서 Google 글꼴을 효율적으로 로드하는 방법

문제 설명

NuxtJS 애플리케이션에서 글꼴 두께가 다른 Google 글꼴을 로드하는 데 어려움을 겪고 있습니다. . 가중치가 다른 동일한 글꼴에 대한 여러 링크를 가져왔지만 기본 글꼴만 적용되어 원하는 글꼴 가중치 맞춤설정이 부족합니다.

해결책

Google 로드에 권장되는 접근 방식 Nuxt의 글꼴은 CDN 사용을 피하고 대신 글꼴을 자체 호스팅하거나 페이지 원본을 통해 프록시하는 것입니다. 이를 달성하려면 자체 호스팅 Google Fonts에 대한 번거로움 없는 솔루션을 제공하는 @nuxtjs/google-fonts 모듈을 활용하는 것이 좋습니다.

Nuxt 모듈 구성(nuxt.config.js)

<code class="javascript">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        subsets: ['latin'],
        display: 'swap',
        download: true,
      },
    ],
  ],
}</code>

이 구성은 'Saira Semi Condensed' 글꼴 계열의 600 및 800 글꼴 가중치를 다운로드하여 애플리케이션에서 사용할 수 있도록 합니다.

CSS 사용법

글꼴이 일단 다운로드된 경우 @font-face 규칙을 사용하여 CSS에서 참조할 수 있습니다.

<code class="css">@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Regular.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Regular.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Regular.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Bold.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Bold.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Bold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}</code>

/fonts를 글꼴 파일을 다운로드한 디렉터리로 바꾸세요.

구성 요소에서의 사용

Vue 구성 요소에서 글꼴 모음 및 글꼴 가중치 속성을 설정하여 원하는 글꼴을 적용할 수 있습니다.

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 600;">I am Component A</h1>
</template></code>

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 800;">I am Component B</h1>
</template></code>

다음 단계를 따르면 효율적으로 로드하고 NuxtJS 애플리케이션에서 다양한 글꼴 두께로 Google 글꼴을 맞춤설정하세요.

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