react content font
v1.0.1
Создайте пользовательские шрифты Google из контента страницы!
npm install react-content-font
Если вы разрабатываете приложения React для таких языков, как японский, и хотите использовать несистемные шрифты, вы можете найти этот пакет интересным.
Шрифты для таких языков, как японский, очень большие. Например, единственный вес шрифта для японцев - 5,7 МБ. Определенно не идеально, чтобы ваши пользователи загружали такой большой файл. Не говоря уже о том, хотите ли вы более одного веса шрифта ...
Этот пакет проверит страницу, получит список уникальных символов на этой странице, а затем запрашивает шрифт от шрифтов Google с использованием только этих символов с использованием оптимизированного запроса!
При начальном рендере он использует CreatetReeWalker, чтобы эффективно ходить по DOM и получить всех персонажей. После начального рендера он использует MutationObserver и проверяет только обновленные узлы для нового текста, которые добавляются динамически.
Это так же просто, как добавление поставщика контекста где -то высоко в вашем приложении.
Например, если у вас есть приложение Next.js с использованием маршрутизатора приложений, вы можете обновить файл app/layout.tsx так:
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 >
) ;
} Просто предоставьте шрифт, который вы хотите, с помощью fontName Prop, и по умолчанию он запрашивает только нормальный (значение 400) шрифт веса.
Запрашивать дополнительные веса шрифта так же просто, как добавить опору fontWeights , как и так:
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 >
) ;
} Я не уверен, что у каких -либо японских шрифтов есть курсивные варианты, но, может быть, у шрифта, который вы хотите использовать? Если это так, вы можете запросить курсивные варианты для любого веса, который вы пожелаете, например:
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 >
) ;
}В этом примере, в дополнение к обычным шрифтам в 400 и 600 веса, мы также получим 400 и 900 курсиков.
В документации Google Fonts API в ней упоминается «указание значения, отличного от автоматического по умолчанию, обычно подходит». По умолчанию, когда вы генерируете тег ссылки для шрифта Google, он устанавливает display=swap . Так что этот пакет сделает то же самое.
Но если вы хотите что -то еще, все, что вам нужно сделать, это установить опору display , например, так:
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 >
) ;
} Допустимые значения для display - 'auto' | 'block' | 'swap' | 'fallback' | 'optional' .
К счастью для вас, этот пакет также экспортирует крючок для контекста с флагом, который сообщит вам, загружен ли шрифт.
Вот пример компонента PageText , который меняет display с hidden на visible на основе контекста.
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontLoaded ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}Важно отметить, что вы должны отображать текст , иначе символы не будут обнаружены и не будут включены в запрошенный шрифт.
Например, не делайте этого :
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontLoaded } = useFontContext ( ) ;
return (
< >
{ isFontLoaded && (
< p >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) }
</ >
) ;
} К счастью для вас, в контексте есть еще один флаг, который позволяет вам узнать, обновляется ли шрифт.
Подобно предыдущему примеру, вы можете отложить отображение контента на обновлении, например, SO:
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontUpdating } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontUpdating ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}Важно отметить, что вы должны отображать текст , иначе символы не будут обнаружены и не будут включены в запрошенный шрифт.
Да, пожалуйста!
