react content font
v1.0.1
Erstellen Sie benutzerdefinierte Google -Schriftarten aus Seiteninhalten!
npm install react-content-font
Wenn Sie React-Anwendungen für Sprachen wie Japanisch entwickeln und nicht-System-Schriftarten verwenden möchten, finden Sie dieses Paket möglicherweise interessant.
Schriftarten für Sprachen wie Japanisch sind sehr groß. Ein einzelnes Schriftgewicht für Noto Sans Japaner beispielsweise beträgt 5,7 MB. Auf keinen Fall ideal, damit Ihre Benutzer eine so große Datei herunterladen. Ganz zu schweigen davon, ob Sie mehr als ein Schriftgewicht wollen ...
Dieses Paket überprüft eine Seite, erhält eine Liste der eindeutigen Zeichen auf dieser Seite und fordert dann eine Schriftart von Google -Schriftarten an, wobei nur die Zeichen mit einer optimierten Anfrage enthalten sind!
Beim ersten Render verwendet es CreateTreewalker, um den DOM effizient zu laufen und alle Charaktere zu erhalten. Nach dem ersten Rendern verwendet es MutationObserver und überprüft nur die aktualisierten Knoten für neue Text, die dynamisch hinzugefügt werden.
Es ist so einfach wie das Hinzufügen des Kontextanbieters irgendwo in Ihrer Anwendung.
Wenn Sie beispielsweise eine Next.js -App mit dem App -Router haben, können Sie Ihre app/layout.tsx -Datei wie SO aktualisieren:
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 >
) ;
} Geben Sie einfach die gewünschte Schriftart mit der fontName -Requisite an, und standardmäßig fordert sie nur eine normale Gewichtsschrift (dh 400).
Das Anfordern zusätzlicher Schriftgewichte ist so einfach wie das Hinzufügen der fontWeights wie folgt:
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 >
) ;
} Ich bin mir nicht sicher, ob japanische Schriftarten kursive Varianten haben, aber vielleicht die Schriftart, die Sie verwenden möchten? Wenn ja, können Sie kursive Varianten nach dem gewünschten Gewicht anfordern:
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 >
) ;
}In diesem Beispiel erhalten wir zusätzlich zu den regulären 400- und 600 -Gewichts -Schriftarten auch 400 und 900 kursiv.
In der API -Dokumentation von Google Fonts erwähnt sie, dass die Angabe eines anderen Werts als das Standardauto in der Regel angemessen ist ". Wenn Sie standardmäßig ein Link -Tag für eine Google -Schriftart generieren, wird display=swap festgelegt. Dieses Paket wird also dasselbe tun.
Aber wenn Sie etwas anderes wollen, müssen Sie lediglich die display -Requisite festlegen, wie so:
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 >
) ;
} Gültige Werte für display sind 'auto' | 'block' | 'swap' | 'fallback' | 'optional' .
Zum Glück für Sie exportiert dieses Paket auch einen Haken für den Kontext mit einem Flag, mit dem Sie wissen, ob die Schriftart geladen ist.
Hier ist ein Beispiel für eine PageText -Komponente, die die display von hidden zu visible anhand des Kontextes ändert.
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontLoaded ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}Es ist wichtig zu beachten, dass Sie den Text rendern müssen , sonst werden die Zeichen nicht entdeckt und werden nicht in die angeforderte Schriftart enthalten.
Machen Sie dies zum Beispiel nicht :
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< >
{ isFontLoaded && (
< p >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) }
</ >
) ;
} Zum Glück für Sie gibt es eine weitere Flagge im Kontext, mit der Sie wissen, ob die Schriftart aktualisiert wird.
Ähnlich wie beim vorherigen Beispiel können Sie die Anzeige von Inhalten zum Update wie SO verschieben:
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontUpdating } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontUpdating ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}Es ist wichtig zu beachten, dass Sie den Text rendern müssen , sonst werden die Zeichen nicht entdeckt und werden nicht in die angeforderte Schriftart enthalten.
Ja, bitte!
