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

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

Nuxt 프로젝트에서 Google 글꼴에 다른 글꼴 가중치를 적용하는 데 문제가 발생했습니다. 문제는 가중치가 다른 동일한 글꼴에 대해 여러 글꼴 링크를 가져올 때 발생하며 이로 인해 중복성이 발생합니다.

권장 사항:

최적의 솔루션은 CDN을 사용하지 않는 것입니다. 글꼴 로딩. 페이지 출처를 통해 Google 글꼴을 자체 호스팅하거나 프록시하는 것이 더 효율적인 접근 방식입니다. 이를 용이하게 하려면 @nuxtjs/google-fonts 모듈을 활용하는 것이 좋습니다.

모듈 구성:

nuxt.config.js 파일에 다음 코드를 추가하세요.

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

이 구성은 'Saira Semi Condensed' 글꼴 계열에 대해 두 글꼴 두께(600 및 800)를 모두 로드해야 함을 지정합니다.

CSS 구성:

Layout.vue에서 글꼴 모음을 한 번 가져옵니다.

<code class="css">@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed');</code>

각 구성 요소에 특정 글꼴 가중치를 적용하려면 CSS 규칙도 추가해야 합니다.

ComponentA.vue:

<code class="css">footer {
  font-weight: 600;
}</code>

ComponentB.vue:

<code class="css">footer {
  font-weight: 800;
}</code>

참고:

특정 글꼴 가중치를 다운로드하지 못하는 경우 @nuxtjs/google-fonts 패키지를 v3.0.0-1로 업데이트하거나 모듈 구성에서 overwriting: true를 설정하세요.

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