ดาวน์โหลด woff2base64 - woff2base64 Source Source Download

woff2base64

ดาวน์โหลดแบบอักษร

1.0.0

ดาวน์โหลด

woff2base64

สร้าง CSS font-face พร้อมตัวอักษร WOFF2 และ WOFF ที่ฝังเป็น BASE64

การติดตั้ง

 npm install --save woff2base64

การใช้งาน

WOFF2BASE64 จะค้นหาแบบอักษรน้ำหนักและแบบอักษรโดยอัตโนมัติในชื่อ FONT FIDENAME (ตัวพิมพ์ใหญ่) รองรับค่า 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 ใช้กับ _.template ของ Lodash

ประเภท: String

ค่าเริ่มต้น:

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

Fonturitemplate

เทมเพลตที่ใช้ในการสร้าง URI ข้อมูลที่เข้ารหัส Base64 ใช้กับ _.template ของ Lodash

ประเภท: String

ค่าเริ่มต้น:

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

แบนเนอร์

แบนเนอร์ที่ได้รับการเติมเต็มเพื่อสร้างไฟล์ CSS ตั้งค่าเป็น '' เพื่อปิดการใช้งานแบนเนอร์

ประเภท: String

ทรัพยากร

แปลงฟอนต์ TTF ของคุณเป็น WOFF2 และ WOFF ด้วยเครื่องกำเนิดเว็บฟอนต์ของ FONT Squirrel
ดูการสนับสนุนเบราว์เซอร์ปัจจุบันสำหรับ WOFF2 และ WOFF FONTS บน canisue.com
ทำไมคุณถึงต้องการสิ่งนี้? อ่านเว็บฟอนท์ที่ดีขึ้นด้วยการใช้ LocalStorage และให้การสนับสนุน WOFF2 โดย Adam Beres-Deak
แพ็คเกจนี้ใช้ Fontoptim โดย Artem Sapegin พร้อมการปรับปรุงสำหรับการรับรู้แบบอักษรและน้ำหนักแบบอักษร