react content font

콘텐츠 글꼴에 반응합니다

페이지 컨텐츠에서 사용자 정의 Google 글꼴 생성!

언어

• 영어
• 日本語
• 中文

설치 방법?

npm install react-content-font

이 패키지에 관심을 가져야하는 이유는 무엇입니까?

일본어와 같은 언어에 대한 React 응용 프로그램을 개발하고 비 시스템 글꼴을 사용하려는 경우이 패키지가 흥미로울 수 있습니다.

일본어와 같은 언어의 글꼴은 매우 큽니다. 예를 들어 Noto Sans Japanese의 단일 글꼴 무게는 5.7MB입니다. 사용자가 큰 파일을 다운로드하도록하는 것은 확실히 이상적이지 않습니다. 둘 이상의 글꼴 체중을 원한다면 말할 것도 없습니다 ...

이 일은 무엇을합니까?

이 패키지는 페이지를 확인하고 해당 페이지에서 고유 한 문자 목록을 얻은 다음 최적화 된 요청을 사용하여 문자 만 포함하여 Google 글꼴에서 글꼴을 요청합니다!

초기 렌더링에서는 CreateTreeWalker를 사용하여 DOM을 효율적으로 걷고 모든 캐릭터를 얻습니다. 초기 렌더링 후 MutationObserver를 사용하고 동적으로 추가되는 새 텍스트에 대한 업데이트 된 노드 만 확인합니다.

그것을 사용하는 방법?

응용 프로그램의 컨텍스트 제공 업체를 추가하는 것만 큼 간단합니다.

예를 들어, App Router를 사용하는 Next.js 앱이있는 경우 app/layout.tsx 파일을 업데이트 할 수 있습니다.

 import FontProvider from 'react-content-font' ;

export default function RootLayout ( { children } : { children : React . ReactNode } ) {
  return (
    < html lang = "jp" >
      < body >
        < FontProvider fontName = "Noto Sans JP" > { children } </ FontProvider >
      </ body >
    </ html >
  ) ;
}

fontName Prop와 함께 원하는 글꼴을 제공하면 기본적으로 정상 (400) 중량 글꼴 만 요청합니다.

둘 이상의 글꼴 무게를 원한다면 어떻게해야합니까?

추가 글꼴 가중치를 요청하는 것은 fontWeights Prop을 추가하는 것만 큼 간단합니다.

 import FontProvider from 'react-content-font' ;

export default function RootLayout ( { children } : { children : React . ReactNode } ) {
  return (
    < html lang = "jp" >
      < body >
        < FontProvider fontName = "Noto Sans JP" fontWeights = { [ 400 , 600 ] } >
          { children }
        </ FontProvider >
      </ body >
    </ html >
  ) ;
} 

글꼴 무게에 대해 이탤릭체를 원한다면 어떻게해야합니까?

일본어 글꼴에 이탤릭체 변형이 있는지 확실하지 않지만 사용하려는 글꼴이 그렇습니까? 그렇다면 원하는 가중치에 대해 이탤릭체 변형을 요청할 수 있습니다.

 import FontProvider from 'react-content-font' ;

export default function RootLayout ( { children } : { children : React . ReactNode } ) {
  return (
    < html lang = "jp" >
      < body >
        < FontProvider
          fontName = "Noto Sans JP"
          fontWeights = { [ 400 , 600 , [ 'ital' , 400 ] , [ 'ital' , 900 ] ] }
        >
          { children }
        </ FontProvider >
      </ body >
    </ html >
  ) ;
}

이 예에서는 일반 400 및 600 무게 글꼴 외에도 400 및 900 이탤릭체를 얻을 수 있습니다.

글꼴 디스플레이를 선택하고 싶다면 어떻게해야합니까?

Google Fonts API 문서에서 "기본 자동 이외의 값을 지정하는 것이 일반적으로 적절하다"는 언급을 언급합니다. 기본적으로 Google 글꼴에 대한 링크 태그를 생성하면 display=swap 설정합니다. 따라서이 패키지도 똑같은 일을 할 것입니다.

그러나 다른 것을 원한다면, 당신이해야 할 일은 다음과 같이 display 소품을 설정하기 만하면됩니다.

 import FontProvider from 'react-content-font' ;

export default function RootLayout ( { children } : { children : React . ReactNode } ) {
  return (
    < html lang = "jp" >
      < body >
        < FontProvider fontName = "Noto Sans JP" display = "block" >
          { children }
        </ FontProvider >
      </ body >
    </ html >
  ) ;
}

display 에 대한 유효한 값은 'auto' | 'block' | 'swap' | 'fallback' | 'optional' 입니다 'auto' | 'block' | 'swap' | 'fallback' | 'optional' .

콘텐츠를 표시하기 전에 글꼴이로드되기를 기다리거나 로딩 상태 등을 표시하면 어떻게해야합니까?

운 좋게도이 패키지는 또한 글꼴이로드되었는지 알려주는 깃발로 컨텍스트에 대한 후크를 내보내고 있습니다.

다음은 컨텍스트에 따라 display hidden 것에서 visible 로 변경하는 PageText 구성 요소의 예입니다.

 'use client' ;

import { useFontContext } from 'react-content-font' ;

export default function PageText ( ) {
  const { isFontLoaded } = useFontContext ( ) ;

  return (
    < p style = { { visibility : isFontLoaded ? 'visible' : 'hidden' } } >
      よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
    </ p >
  ) ;
}

텍스트를 렌더링해야한다는 점에 유의해야합니다. 그렇지 않으면 문자가 발견되지 않으며 요청 된 글꼴에 포함되지 않습니다.

예를 들어, 이 작업을 수행하지 마십시오 .

 'use client' ;

import { useFontContext } from 'react-content-font' ;

export default function PageText ( ) {
  const { isFontLoaded } = useFontContext ( ) ;

  return (
    < >
      { isFontLoaded && (
        < p >
          よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
        </ p >
      ) }
    </ >
  ) ;
} 

마지막 렌더링 이후와 비슷한 일을하고 싶다면 어떻게해야합니까?

운 좋게도 문맥에는 글꼴이 업데이트되고 있는지 알려주는 또 다른 깃발이 있습니다.

이전 예와 마찬가지로 업데이트시 콘텐츠 표시를 연기 할 수 있습니다.

 'use client' ;

import { useFontContext } from 'react-content-font' ;

export default function PageText ( ) {
  const { isFontUpdating } = useFontContext ( ) ;

  return (
    < p style = { { visibility : isFontUpdating ? 'visible' : 'hidden' } } >
      よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
    </ p >
  ) ;
}

텍스트를 렌더링해야한다는 점에 유의해야합니다. 그렇지 않으면 문자가 발견되지 않으며 요청 된 글꼴에 포함되지 않습니다.

이것은 멋지다, 커피를 살 수 있나요?

네 제발!