react content font
v1.0.1
¡Crea fuentes de Google personalizadas a partir del contenido de la página!
npm install react-content-font
Si está desarrollando aplicaciones React para idiomas como japoneses y desea usar fuentes que no son del sistema, puede encontrar este paquete interesante.
Las fuentes para idiomas como japoneses son muy grandes. Un solo peso de fuente para Noto sin japonés, por ejemplo, es de 5.7 MB. Definitivamente no es ideal para que sus usuarios descarguen un archivo tan grande. Sin mencionar si quieres más de una fuente de peso ...
Este paquete verificará una página, obtendrá una lista de caracteres únicos en esa página y luego solicitará una fuente de Google Fonts con solo aquellos caracteres incluidos utilizando una solicitud optimizada.
En el render inicial, utiliza CreateTeRewalker para caminar eficientemente por el DOM y obtener todos los personajes. Después del render inicial, utiliza MutationObServer y verifica solo los nodos actualizados para el nuevo texto que se agregan dinámicamente.
Es tan simple como agregar el proveedor de contexto en algún lugar alto en su aplicación.
Por ejemplo, si tiene una aplicación Next.js usando el enrutador de aplicaciones, puede actualizar su archivo app/layout.tsx como así:
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 >
) ;
} Simplemente proporcione la fuente que desee con el fontName STOP, y de manera predeterminada solicitará solo una fuente de peso normal (es decir, 400).
Solicitar pesas de fuentes adicionales es tan simple como agregar el accesorio de pesos fontWeights , como así:
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 >
) ;
} No estoy seguro de que alguna fuente japonesa tenga variantes en cursiva, pero ¿tal vez la fuente que quieres usar? Si es así, puede solicitar variantes en cursiva para cualquier peso que desee, así:
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 >
) ;
}En este ejemplo, además de las fuentes de peso 400 y 600 regulares, también obtendremos 400 y 900 cursivas.
En la documentación de la API de Google Fonts, menciona que "especificar un valor que no sea el Auto predeterminado, generalmente es apropiado". Por defecto, cuando genera una etiqueta de enlace para una fuente de Google, establece display=swap . Entonces este paquete hará lo mismo.
Pero si desea algo más, todo lo que necesita hacer es establecer el accesorio display , así:
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 >
) ;
} Los valores válidos para display son 'auto' | 'block' | 'swap' | 'fallback' | 'optional' .
Afortunadamente para usted, este paquete también exporta un gancho para el contexto con una bandera que le informará si la fuente está cargada.
Aquí hay un ejemplo de un componente PageText , que cambia la display de hidden a visible en función del contexto.
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontLoaded ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}Es importante tener en cuenta que debe representar el texto , o de lo contrario, los caracteres no serán descubiertos y no se incluirán en la fuente solicitada.
Por ejemplo, no hagas esto :
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< >
{ isFontLoaded && (
< p >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) }
</ >
) ;
} Afortunadamente para ti, hay otra bandera en el contexto que te permite saber si la fuente se está actualizando.
Similar al ejemplo anterior, puede diferir la muestra de contenido en la actualización, como así:
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontUpdating } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontUpdating ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}Es importante tener en cuenta que debe representar el texto , o de lo contrario, los caracteres no serán descubiertos y no se incluirán en la fuente solicitada.
¡Sí, por favor!
