woff2base64

woff2base64

يولد Font-Font Font-Font مع خطوط Woff2 و Woff مضمنة على أنها BASE64.

تثبيت

 npm install --save woff2base64

الاستخدام

يبحث Woff2Base64 تلقائيًا عن أسلوب الخط والخط في اسم ملف الخط المعطى (غير حساس للحالة). يتم دعم جميع قيم CSS الممكنة.

إذا كان اسم ملف الخط الخاص بك يحتوي على كلمة منتظمة ، فسيتم ضبط وزن الخط على normal .

ومع ذلك ، إذا لم تتمكن من تغيير اسم ملف الخط ، فيمكنك تمرير الوزن والأناقة لكل خط عبر معلمة font (انظر أدناه).

 import fs from 'fs' ;
import woff2base64 from 'woff2base64' ;
const fonts = {
    'Roboto-Bold.woff2' : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
    'Roboto-Bold.woff' :  fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff' ) ,
	// ...
} ;
const options = {
    fontFamily : 'Roboto'
} ;
const css = woff2base64 ( fonts , options ) ;
// css.woff2 = '@font-face{font-family:"Roboto";src:url(data:application/font-woff2;charset=utf-8;base64,...'
// css.woff  = '@font-face{font-family:"Roboto";src:url(data:application/font-woff;charset=utf-8;base64,...'

fs . writeFileSync ( 'build/roboto.woff2.css' , css . woff2 ) ;
fs . writeFileSync ( 'build/roboto.woff.css' , css . woff ) ; 

حدود

يقبل Woff2Base64 كائنين: fonts options .

الخطوط (مطلوبة)

استخدم أسماء الملفات Woff2 و Woff كمفاتيح.

يمكن أن تكون القيمة إما String تحتوي على محتوى الملف ، أو Buffer الذي يحتوي على محتوى الملف أو Object ، مما يتيح لك تمرير خيارات خاصة بالخط:

 const fonts = {
    'Roboto-BoldItalic.woff2' : {
        content : fs . readFileSync ( 'fonts/Roboto/Roboto-BoldItalic.woff2' ) ,
        weight : 'bold' ,
        style : 'italic'
    } ,
    'Roboto-Bold.woff2' : {
        content : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
        weight : 'bold' ,
        style : 'normal'
    } ,
    'Roboto-Regular.woff2' : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
} ;

خيارات

Fontfamily (مطلوب)

اسم عائلة الخط المستخدمة في CSS.

اكتب: String

fontfaceTemplate

القالب المستخدم لإنشاء CSS. تستخدم مع Lodash's _.template.

اكتب: String

تقصير:

 @font-face{ font-family:"<%=family%>";src:url(<%=uri%>) format("<%=format%>");font-weight:<%=weight%>;font-style:<%=style%>;}

fonturitemplate

القالب المستخدم لإنشاء BASE64 المشفرة URI. تستخدم مع Lodash's _.template.

اكتب: String

تقصير:

 data:<%=mime%>;charset=utf-8;base64,<%=base64%>

لافتة

لافتة يحصل مسبقًا على ملفات CSS التي تم إنشاؤها. تعيين إلى '' لتعطيل لافتة.

اكتب: String

موارد

• قم بتحويل خطوط TTF الخاصة بك إلى Woff2 و Woff مع Font Squirrel's WebFont Generator.

• راجع دعم المتصفح الحالي لـ Woff2 و Woff Fonts على Canisue.com.

• لماذا تحتاج هذا؟ اقرأ أفضل تحميل WebFont باستخدام LocalStorage وتوفير دعم Woff2 من قبل Adam Beres-Deak.

• تعتمد هذه الحزمة على Fontoptim بواسطة Artem Sapegin مع تحسينات على التعرف على الطراز والخطوط.

رخصة

صدر تحت رخصة معهد ماساتشوستس للتكنولوجيا.

حقوق الطبع والنشر (ج) 2017 مارسيل فيتن. جميع الحقوق محفوظة.