react content font
v1.0.1
إنشاء خطوط Google مخصصة من محتوى الصفحة!
npm install react-content-font
إذا كنت تقوم بتطوير تطبيقات React للغات مثل اليابانية ، وتريد استخدام الخطوط غير النظامية ، فقد تجد هذه الحزمة مثيرة للاهتمام.
خطوط لغات مثل اليابانية ، كبيرة جدا. وزن خط واحد لـ noto sans اليابانية على سبيل المثال هو 5.7 ميغابايت. بالتأكيد ليست مثالية لجعل المستخدمين لديك يقومون بتنزيل مثل هذا الملف الكبير. ناهيك عما إذا كنت تريد أكثر من وزن خط واحد ...
ستتحقق هذه الحزمة من صفحة ، والحصول على قائمة بالأحرف الفريدة في تلك الصفحة ، ثم طلب خط من خطوط Google مع فقط تلك الأحرف المضمنة باستخدام طلب محسّن!
في العرض الأولي ، يستخدم CreateTreewalker للسير بكفاءة في DOM والحصول على جميع الشخصيات. بعد العرض الأولي ، يستخدم MutationObserver ويتحقق فقط من العقد المحدثة للنص الجديد الذي يتم إضافته ديناميكيًا.
الأمر بسيط مثل إضافة مزود السياق في مكان ما في تطبيقك.
على سبيل المثال ، إذا كان لديك تطبيق next.js باستخدام جهاز توجيه التطبيق ، فيمكنك تحديث ملف app/layout.tsx الخاص بك مثل 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" > { children } </ FontProvider >
</ body >
</ html >
) ;
} ما عليك سوى توفير الخط الذي تريده مع الدعامة fontName ، وسيطلب بشكل افتراضي خط الوزن العادي (بمعنى 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 ، يذكر "تحديد قيمة أخرى غير التلقائي الافتراضي عادة ما يكون مناسبًا". افتراضيًا عند إنشاء علامة ارتباط لخط 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 >
) }
</ >
) ;
} لحسن الحظ بالنسبة لك ، هناك علامة أخرى في السياق يتيح لك معرفة ما إذا كان الخط يتم تحديثه.
على غرار المثال السابق ، يمكنك تأجيل عرض المحتوى عند التحديث ، مثل ذلك:
'use client' ;
import { useFontContext } from 'react-content-font' ;
export default function PageText ( ) {
const { isFontUpdating } = useFontContext ( ) ;
return (
< p style = { { visibility : isFontUpdating ? 'visible' : 'hidden' } } >
よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
</ p >
) ;
}من المهم أن نلاحظ أنه يجب عليك تقديم النص ، وإلا فلن يتم اكتشاف الأحرف ولن يتم تضمينه في الخط المطلوب.
نعم من فضلك!
