الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

رد فعل Fontpicker

مكون منتقي الخطوط من Google لـ React.

  • لا توجد تبعيات (بخلاف React)
  • لا يوجد مفتاح Google API مطلوب
  • أكثر من 1600 خط جوجل قابلة للتخصيص
  • معاينات سريعة وعالية الجودة للخطوط من صور SVG التي تم إنشاؤها مسبقًا
  • اختياريًا، يقوم بتحميل الخطوط تلقائيًا

متشعب من https://github.com/Mikk3lRo/vue-fontpicker/

رسم متحرك يظهر منتقي الخطوط

التوثيق

يتوفر عرض توضيحي مباشر يتضمن الاستخدام على: https://ae9is.github.io/react-fontpicker/

التثبيت 

 # npm
npm i react-fontpicker-ts
# yarn
yarn add react-fontpicker-ts

# much smaller package with fewer fonts
npm i react-fontpicker-ts-lite

ثم قم باستيراد المكون وورقة الأنماط: 

 import FontPicker from 'react-fontpicker-ts'
import 'react-fontpicker-ts/dist/index.css'

التصميم

راجع أسماء فئات CSS في: packages/fontpicker/src/components/FontPicker.css

مثال على إعادة تصميم منتقي الخطوط

مثال على دمج منتقي الخطوط في تطبيق فعلي: ae9is/uimix

هيكل المشروع

يوجد مشروع منتقي الخطوط في Turborepo monorepo على packages/fontpicker/

العرض التوضيحي المباشر هو تطبيق Vite يمكنك تشغيله بنفسك عبر npm run dev والذي يتم إنشاؤه على /docs . يستخدم tsconfig.json .

يتم إنشاء مكون منتقي الخطوط نفسه عبر tsup (أي esbuild ) إلى /dist باستخدام تعريفات الأنواع التي تم إنشاؤها عبر tsc وفقًا لـ tsconfig.types.json .

يقوم البرنامج النصي لإنشاء معاينة الخط بتنزيل ملفات الخطوط إلى /font-cache وإنشاء معاينات لصورة الخط إلى /font-preview .

أداء

تعمل معاينات منتقي الخطوط عن طريق تحميل ملفات صور معاينة الخط في CSS. يتم تقسيم الخطوط عبر العديد من ملفات الصور لمعاينة أولية أسرع.

بمجرد فتح القائمة المنسدلة، يتم استرداد جميع ملفات صور المعاينة مما يتيح التمرير والبحث بسلاسة.

لا يتم تقديم أي طلبات إلى واجهة برمجة تطبيقات خطوط Google ما لم يتم تعيين منتقي الخطوط على التحميل التلقائي، وفي هذه الحالة يتم إلحاق الخط المحدد حاليًا برأس الصفحة. ( لا تتم إزالة رابط الخط المحدد مسبقًا.)

على سبيل المثال: 

 < head >
  ...
  < link
    rel =" stylesheet "
    id =" google-font-rock_salt-all "
    href =" https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400&amp;display=swap "
  />
</ head >

تتمثل المفاضلة الكبيرة في هذا الأسلوب في أن حزمة المكون كبيرة جدًا نظرًا لجميع معاينات صور الخط: 8 ميجابايت في صور SVG المضغوطة لـ 1633 خطًا. تأكد من تقديم ملفات SVG مضغوطة! انظر هنا للحصول على مثال لVite.

إذا كنت تبحث عن خيار أخف وزنًا، فيمكنك استخدام react-fontpicker-ts-lite بدلاً من ذلك والذي يبلغ حجمه حوالي 180 كيلوبايت.

أو، بالنسبة لمنتقي الخطوط المختلف الذي يتبع نهجًا حسب الطلب، راجع: https://github.com/samuelmeuli/font-picker-react

يتطلب font-picker-react مفتاح Google API، ويعمل بشكل أفضل عند الحد الافتراضي للخط وهو 50 (الخطوط للاختيار من بينها).

بناء معاينات الخطوط

ملاحظة: لا ينبغي أن يحتاج معظم المستخدمين إلى إعادة إنشاء معاينات الخطوط، ولكن تم تضمين هذا القسم للراحة إذا كنت بحاجة إلى الحصول على أحدث الخطوط أو تحرير المعاينات.

1. مفتاح Google API

احصل على مفتاح Google API هنا https://developers.google.com/fonts/docs/developer_api#APIKey وقم بإنشاء ملف جديد يسمى GOOGLE_API_KEY في react-fontpicker/packages/fontpicker/scripts ، في نفس الدليل مثل scripts/buildFontPreviews.ts البرنامج النصي scripts/buildFontPreviews.ts .

2. البرنامج النصي لمعاينة الخط

جميع خطوط جوجل

لإنشاء معاينات الخطوط لجميع خطوط Google المتوفرة حاليًا (عائلات الخطوط اللاتينية فقط، باستثناء Kumar One ). 

 cd react-fontpicker/packages/fontpicker
npm run build-font-previews

ملحوظة: بالنسبة لـ 1600 خط، الميزانية تتراوح بين 20-30 دقيقة و800 ميجابايت لتنزيل جميع الخطوط. يجب أن يستغرق تجميع معاينات الصور نفسها أقل من دقيقة. عند إعادة التشغيل، لا يسترد البرنامج النصي معلومات الخط الجديدة إلا إذا مر عليها أكثر من أسبوع واحد ويتخطى تنزيل الخطوط المخزنة مؤقتًا.

الخطوط المخصصة

لإنشاء معاينات الخطوط للخطوط المخصصة، ستحتاج إلى بعض المعلومات حول الخطوط والمسارات إلى ملف الخط الذي تم تنزيله بتنسيق TTF. 

buildFontPreviews.ts output-dir " font-name|font-category|font-variants-info|font-file " " font-name-2... "

حيث تكون Font-variants-info عبارة عن مجموعة من القيم مثل 0,400 و1,700 مرتبطة بـ +. تشير القيمة الأولى إلى خط عادي (0) أو مائل (1). القيمة الثانية هي وزن الخط (أي 100 = رفيع، 400 = عادي، 700 = غامق، 900 = ثقيل).

على سبيل المثال: 

buildFontPreviews.ts output-dir " FontName|sans-serif|0,400+0,700+1,400+1,700|/path/to/font.ttf " " Font2|serif|0,400|/path/to/font2.ttf "

راجع البرنامج النصي للتشغيل build-font-previews-manual في: packages/fontpicker/package.json

تطوير

تثبيت

يستخدم هذا monorepo Turborepo.

اختبار

يستخدم التطبيق Vitest وCypress للاختبار. تأكد من إعداد المتطلبات الأساسية لـ Cypress على نظامك.

على أوبونتو: 

apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل