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

المكونات على غرار Fontface

مكتبة لإنشاء خطوط بتنسيقات TTF و EOT و WOFF و WOFF2 ، إلى جانب تعليمات @font-face بتنسيق المكونات المصممة. مستوحاة من fontface-loader.

تهدف هذه المكتبة إلى تبسيط استخدام أتمتة Fontface لمشاريع styled-components ، نظرًا لأن معظم الأدوات الموجودة هناك تقوم بإنشاء SCSS أو CSS. كما يوفر خيارات التكوين الأساسية لأدلة الإدخال والمخرجات ، والتي تنسى بعض البرامج النصية الأخرى تقديمها.

تُستخدم وظيفة مساعد CreateGlobalStyle المصممة styled-components للسماح لك باستيراد الخطوط في DOM حيث تحتاج إليها. تتم إضافة دعامة للسماح لك بالتحكم في خاصية CSS Font-Display of @font-face ، بحيث يمكنك تحسين ترتيب التحميل لخطوطك برمجيًا (على الأقل في سياقات SSR).

لمزيد من الراحة ، يمكن لهذه المكتبة أيضًا إنشاء ملفات CSS الفردية التي تقوم بتحميل موقع @font-face ، بالإضافة إلى ملفات SCSS التي تقوم بتحميل موقع @font-face واحد والتي يمكن التحكم في خاصية CSS Font-Display عبر @use with at-rule.

التثبيت

NPM 

 npm install --save-dev fontface-styled-components

غزل 

 yarn add -D fontface-styled-components

تبعيات اختيارية

  • fontforge

دعم تنسيق الإدخال

truetype

مدعومة بشكل افتراضي.

Opentype

يجب عليك تثبيت fontforge والحصول على ثنائي fontforge في $PATH الخاص بك. إذا تم تثبيته ، فسيقوم برنامج التحويل بتحويل خطوط Opentype إلى TrueType كجزء من عملية الإنشاء.

الاستخدام:

لإنشاء ملفات الخطوط و CSS-in-JS ، استخدم الكود التالي وتكييفه: 

 import fontface from 'fontface-styled-components' ;

fontface . run ( {
  sourceDir : 'assets/fonts' ,
  fontOutputDir : 'dist/fonts' ,
  fontsPublicDir : 'https://my.cdn.com/my-project/public/fonts' ,
  styledOutputDir : 'dist/src/assets/fontfaces/' ,
  forceRefresh : process . env . NODE_ENV === 'production' ,
} )

لتحميل خط في دوم من صفحاتك ، استخدم الكود التالي وتكييفه: 

 import CatamaranBoldFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'
import CatamaranRegularFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'

< MyPageRoot >
  < CatamaranBoldFontFace />
  < CatamaranFontFace fontDisplay = "fallback" />
  < MyContent />
</ MyPageRoot >

الإخراج النموذجي:

عادة ما يؤدي استيراد ملف Catamaran-bold.ttf إلى إنشاء ملف CSS-in-JS التالي: 

 import { createGlobalStyle } from 'styled-components'

export const CatamaranBoldFontFace = createGlobalStyle `
  @font-face {
    font-display: ${ props => props . fontDisplay || 'auto' } ;
    font-family: 'Catamaran';
    font-weight: 700;
    font-style: normal;
    src: local('Catamaran'),
        url('/public/fonts/Catamaran-Bold.eot?#iefix') format('embedded-opentype'),
        url('/public/fonts/Catamaran-Bold.woff2') format('woff2'),
        url('/public/fonts/Catamaran-Bold.ttf')  format('truetype'),
        url('/public/fonts/Catamaran-Bold.woff') format('woff');
  }
`

export default { CatamaranBoldFontFace }

خيارات:

Sourcedir:

مسار إلى المجلد الذي يحتوي على خطوط TTF المصدر.

الافتراضي : 'assets/fonts/'

fontoutputdir:

المسار إلى مجلد الوجهة للخطوط المحولة التي سيتم وضعها. سيتم أيضًا نسخ خط TTF الأصلي في هذا المجلد.

الافتراضي : 'dist/fonts/'

fontspublicdir:

مسار الخطوط في خادم الإنتاج الخاص بك ، والذي سيتم استخدامه في عناوين URL الخاصة بالإعلان عن @font-face .

الافتراضي : '/public/fonts/'

مواكبة الصدفة:

ما إذا كان يجب إنشاء ملفات fontface للمؤسسات المصممة.

الافتراضي : true

styledoutputdir:

المسار إلى مجلد الوجهة حيث تكتب ملفات CSS-in-JS. سيكون لكل ملف خط خط ملف CSS-in-JS.

الافتراضي : 'dist/src/fontfaces/'

withcss:

ما إذا كان لإنشاء ملفات الفانيليا cssfontface.

الافتراضي : false

CSSOUTPUTDIR:

المسار إلى مجلد الوجهة حيث تكتب ملفات إعلان Fontface CSS. سيكون لكل ملف خط FONT ملف CSS الخاص به.

الافتراضي : 'dist/src/fontfaces/'

withscss:

ما إذا كان لإنشاء ملفات Mixin SCSS لكل خط.

الافتراضي : false

SCSSOUTPUTDIR:

الطريق إلى مجلد الوجهة حيث تكتب SCSS Mixins ل. سيكون لكل ملف خط FONT ملف SCSS الخاص به.

الافتراضي : 'dist/src/fontfaces/'

Withlocal:

علامة لإضافة مصدر محلي لإعلانات fontface. الموصى به فقط عندما يتم نشر مشروعك على بيئات B2B أو أجهزة بيع نقطة البيع حيث يمكنك التأكد من أن الخط المحلي متطابق مع الخط الذي تنوي خدمته ، حيث تختلف في كثير من الأحيان على الأجهزة الاستهلاكية.

الافتراضي : true للتوافق المتخلف ، لكننا نوصيك بتعيينه على false

fontdisplay:

إذا تم تعيينه ، فطبق خاصية Font-Display على جميع ملفات fontface بشكل عشوائي. هذا المقصود في المقام الأول إذا كنت ترغب في تعيين نمط ستبدله ببناء المنطق الخاص بك ، أو إذا كنت ترغب في تعيين ملفات افتراضية وتحرير ملفات fontface محددة يدويًا.

إذا كانت غير مستقرة ، فسيتم استخدام 'auto' افتراضيًا لملفات CSS. بالنسبة لملفات CSS-in-JS ، سيتم حقن المعلمة الحرفية القالب ، والتي تقرأ أولاً props.fontDisplay ، والتي تُرجع 'auto' إذا كان هذا الدعامة غير محدد.

الافتراضي : null

السماح:

علامة للسماح دليل إدخال فارغ. مفيد عندما تستخدم fontface-styled-components في بيئة برمجية. إذا كان false ، فسيتم طرح خطأ عند عدم العثور على خطوط في دليل الإدخال.

الافتراضي : false

forcerefresh:

علامة لإجبار تجديد جميع خطوط المدخلات ، حتى عندما تكون موجودة بالفعل في دليل الإخراج. يتم تعطيل ذلك بشكل افتراضي لأن توليد خطوط لمشاريع الويب الكبيرة يمكن أن يؤثر بشكل كبير على أوقات البناء. نوصيك دائمًا بتمكين هذه العلم لبناء الإنتاج.

الافتراضي : false

هادئ:

علم لمنع الإخراج المعلومات والتحذيرات.

الافتراضي : false

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل