react content font
v1.0.1
Crie fontes personalizadas do Google a partir do conteúdo da página!
npm install react-content-font
Se você estiver desenvolvendo aplicativos de reação para idiomas como japonês e desejar usar fontes que não sejam do sistema, poderá achar esse pacote interessante.
Fontes para idiomas como japoneses, são muito grandes. Um único peso de fonte para Noto sem japonês, por exemplo, é de 5,7 Mb. Definitivamente não é ideal para fazer seus usuários baixarem um arquivo tão grande. Sem mencionar se você quer mais de um peso de fonte ...
Este pacote verificará uma página, obterá uma lista de caracteres exclusivos nessa página e solicitará uma fonte do Google Fontes com apenas os caracteres incluídos usando uma solicitação otimizada!
Na renderização inicial, ele usa CreateTreewalker para caminhar com eficiência o DOM e obter todos os personagens. Após a renderização inicial, ele usa o mutationObserver e verifica apenas os nós atualizados para um novo texto que são adicionados dinamicamente.
É tão simples quanto adicionar o provedor de contexto em algum lugar no seu aplicativo.
Por exemplo, se você tiver um aplicativo Next.js usando o roteador de aplicativos, poderá atualizar seu arquivo app/layout.tsx como assim:
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 >
) ;
} Basta fornecer a fonte que você deseja com o fontName Prop e, por padrão, ele solicitará apenas uma fonte normal de peso (significando 400).
Solicitar pesos adicionais para fontes é tão simples quanto adicionar o suporte fontWeights , assim:
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 >
) ;
} Não tenho certeza se as fontes japonesas têm variantes itálicas, mas talvez a fonte que você deseja usar? Nesse caso, você pode solicitar variantes em itálico pelo peso que desejar, assim:
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 >
) ;
}Neste exemplo, além das fontes regulares de 400 e 600 peso, também teremos 400 e 900 itálico.
Na documentação da API do Google Fontes, ele menciona "especificando um valor diferente do AUTO padrão geralmente é apropriado". Por padrão, quando você gera uma tag de link para uma fonte do Google, ela define display=swap . Portanto, este pacote fará a mesma coisa.
Mas se você quiser outra coisa, tudo o que você precisa fazer é definir o suporte display , assim:
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 >
) ;
} Os valores válidos para display são 'auto' | 'block' | 'swap' | 'fallback' | 'optional' .
Felizmente para você, este pacote também exporta um gancho para o contexto com um sinalizador que informará se a fonte estiver carregada.
Aqui está um exemplo de um componente PageText , que altera a display de hidden para visible com base no contexto.
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontLoaded ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}É importante observar que você deve renderizar o texto , ou os caracteres não serão descobertos e não serão incluídos na fonte solicitada.
Por exemplo, não faça isso :
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< >
{ isFontLoaded && (
< p >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) }
</ >
) ;
} Felizmente para você, há outra bandeira no contexto que permite que você saiba se a fonte está sendo atualizada.
Semelhante ao exemplo anterior, você pode adiar mostrando o conteúdo na atualização, como assim:
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontUpdating } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontUpdating ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}É importante observar que você deve renderizar o texto , ou os caracteres não serão descobertos e não serão incluídos na fonte solicitada.
Sim, por favor!
