react content font
v1.0.1
Buat Google Font khusus dari konten halaman!
npm install react-content-font
Jika Anda mengembangkan aplikasi bereaksi untuk bahasa seperti bahasa Jepang, dan ingin menggunakan font non-sistem, Anda mungkin menemukan paket ini menarik.
Font untuk bahasa seperti bahasa Jepang, sangat besar. Bobot font tunggal untuk noto sans Jepang misalnya adalah 5,7 MB. Jelas tidak ideal untuk membuat pengguna Anda mengunduh file besar seperti itu. Belum lagi jika Anda ingin lebih dari satu berat font ...
Paket ini akan memeriksa halaman, mendapatkan daftar karakter unik di halaman itu, dan kemudian meminta font dari Google Fonts dengan hanya karakter yang termasuk menggunakan permintaan yang dioptimalkan!
Pada render awal, ia menggunakan CreateTreeWalker untuk secara efisien berjalan DOM dan mendapatkan semua karakter. Setelah render awal, ia menggunakan MutationObserver dan hanya memeriksa node yang diperbarui untuk teks baru yang ditambahkan secara dinamis.
Ini sesederhana menambahkan penyedia konteks di tempat yang tinggi di aplikasi Anda.
Misalnya, jika Anda memiliki aplikasi Next.js menggunakan router aplikasi, Anda dapat memperbarui file app/layout.tsx Anda seperti demikian:
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 >
) ;
} Cukup berikan font yang Anda inginkan dengan fontName prop, dan secara default hanya akan meminta font berat (artinya 400) normal.
Meminta bobot font tambahan sesederhana menambahkan prop fontWeights , seperti itu:
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 >
) ;
} Saya tidak yakin ada font Jepang yang memiliki varian miring, tapi mungkin font yang ingin Anda gunakan? Jika demikian, Anda dapat meminta varian miring untuk berat apa pun yang Anda inginkan, seperti itu:
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 >
) ;
}Dalam contoh ini, selain 400 dan 600 font berat, kami juga akan mendapatkan 400 dan 900 miring.
Dalam dokumentasi API Google Fonts, ia menyebutkan "menentukan nilai selain otomatis default biasanya sesuai". Secara default saat Anda membuat tag tautan untuk Google Font, itu mengatur display=swap . Jadi paket ini akan melakukan hal yang sama.
Tetapi jika Anda menginginkan sesuatu yang lain, yang perlu Anda lakukan adalah mengatur prop display , seperti itu:
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 >
) ;
} Nilai yang valid untuk display adalah 'auto' | 'block' | 'swap' | 'fallback' | 'optional' .
Beruntung bagi Anda, paket ini juga mengekspor kait untuk konteks dengan bendera yang akan memberi tahu Anda jika font dimuat.
Berikut adalah contoh komponen PageText , yang mengubah display dari hidden menjadi visible berdasarkan konteks.
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontLoaded ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}Penting untuk dicatat bahwa Anda harus membuat teks , atau karakter tidak akan ditemukan dan tidak akan dimasukkan dalam font yang diminta.
Misalnya, jangan lakukan ini :
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< >
{ isFontLoaded && (
< p >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) }
</ >
) ;
} Beruntung bagi Anda, ada bendera lain dalam konteks yang membuat Anda tahu jika font sedang diperbarui.
Mirip dengan contoh sebelumnya, Anda dapat menunda menampilkan konten pada pembaruan, seperti itu:
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontUpdating } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontUpdating ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}Penting untuk dicatat bahwa Anda harus membuat teks , atau karakter tidak akan ditemukan dan tidak akan dimasukkan dalam font yang diminta.
Ya tolong!
