react content font

Réaction de la police de contenu

Créez des polices Google personnalisées à partir du contenu de la page!

Langues

Anglais
日本語
中文

Comment installer?

npm install react-content-font

Pourquoi devrais-je me soucier de ce package?

Si vous développez des applications React pour des langues comme le japonais et que vous souhaitez utiliser des polices sans système, vous pourriez trouver ce package intéressant.

Les polices pour les langues comme le japonais sont très grandes. Un seul poids de police pour Noto sans japonais par exemple est de 5,7 Mo. Certainement pas idéal pour faire en sorte que vos utilisateurs téléchargent un si gros fichier. Sans oublier si vous voulez plus d'un poids de police ...

Que fait cette chose?

Ce package vérifiera une page, obtiendra une liste de caractères uniques sur cette page, puis demandera une police à Google Fonts avec uniquement les caractères inclus en utilisant une demande optimisée!

Lors du rendu initial, il utilise CreateTreeWalker pour promener efficacement le DOM et obtenir tous les caractères. Après le rendu initial, il utilise MutationObserver et vérifie uniquement les nœuds mis à jour pour un nouveau texte qui sont ajoutés dynamiquement.

Comment l'utiliser?

C'est aussi simple que d'ajouter le fournisseur de contexte quelque part dans votre application.

Par exemple, si vous avez une application Next.js à l'aide du routeur d'application, vous pouvez mettre à jour votre fichier app/layout.tsx comme ça:

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

Fournissez simplement la police que vous souhaitez avec le fontName Prop, et par défaut, il ne demandera que la police de poids normale (signifiant 400).

Et si je veux plus d'un poids de police?

Demander des poids de police supplémentaires est aussi simple que d'ajouter l'hélice de poids fontWeights , comme ainsi:

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

Et si je veux aussi l'italique pour des poids de police?

Je ne suis pas sûr que des polices japonaises aient des variantes italiques, mais peut-être que la police que vous voulez utiliser fait? Si c'est le cas, vous pouvez demander des variantes italiques pour tout le poids que vous désirez, comme ainsi:

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

Dans cet exemple, en plus des polices de poids régulières de 400 et 600, nous obtiendrons également 400 et 900 italiques.

Et si je veux choisir le Display de police?

Dans la documentation de l'API Google Fontts, il mentionne "la spécification d'une valeur autre que l'auto par défaut est généralement appropriée". Par défaut, lorsque vous générez une balise de lien pour une police Google, il définit display=swap . Donc, ce package fera la même chose.

Mais si vous voulez autre chose, tout ce que vous avez à faire est de définir l' display , comme ainsi:

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

Les valeurs valides pour display sont 'auto' | 'block' | 'swap' | 'fallback' | 'optional' .

Et si je veux attendre que la police soit chargée avant d'afficher du contenu ou d'afficher un état de chargement ou quelque chose?

Heureusement pour vous, ce package exporte également un crochet pour le contexte avec un drapeau qui vous fera savoir si la police est chargée.

Voici un exemple de composant PageText , qui change l' display de hidden à visible en fonction du contexte.

 'use client' ;

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

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

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

Il est important de noter que vous devez rendre le texte , sinon les caractères ne seront pas découverts et ne seront pas inclus dans la police demandée.

Par exemple, ne faites pas ceci :

 'use client' ;

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

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

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

Et si je veux faire quelque chose de similaire à cette dernière chose, mais après le rendu initial?

Heureusement pour vous, il y a un autre drapeau dans le contexte qui vous permet de savoir si la police est mise à jour.

Semblable à l'exemple précédent, vous pouvez différer le contenu de la mise à jour, comme ainsi:

 'use client' ;

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

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

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

Il est important de noter que vous devez rendre le texte , sinon les caractères ne seront pas découverts et ne seront pas inclus dans la police demandée.