react content fontダウンロード - react content fontソースコードのダウンロード

反応コンテンツフォント

ページコンテンツからカスタムグーグルフォントを作成してください！

言語

英語
日本語
中文

インストール方法は？

npm install react-content-font

なぜこのパッケージを気にする必要があるのですか？

日本語のような言語のReactアプリケーションを開発していて、非システムフォントを使用したい場合は、このパッケージが興味深いと感じるかもしれません。

日本語のような言語のフォントは非常に大きいです。たとえば、日本語のNoto Sansの単一のフォント重量は5.7 MBです。ユーザーにこのような大きなファイルをダウンロードさせるのに理想的ではありません。あなたが複数のフォントの重みを望むかどうかは言うまでもありません...

これは何をしますか？

このパッケージは、ページをチェックし、そのページに一意の文字のリストを取得し、最適化されたリクエストを使用してそれらの文字のみを使用してGoogleフォントからフォントをリクエストします！

最初のレンダリングでは、CreateTreeWalkerを使用してDOMを効率的に歩き、すべてのキャラクターを取得します。最初のレンダリングの後、MutationObserverを使用し、動的に追加される新しいテキストの更新されたノードのみをチェックします。

それを使用する方法は？

コンテキストプロバイダーをどこかに追加するアプリケーションのどこかに追加するのと同じくらい簡単です。

たとえば、アプリルーターを使用して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小道具を追加するのと同じくらい簡単です。

 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を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 >
  ) ;
}