woff2base64 Скачать - woff2base64 Скачать исходный код

woff2base64

Загрузка шрифта

1.0.0

Скачать

WOFF2BASE64

Генерирует Font-Face CSS с Woff2 и Woff Fonts, встроенным в Base64.

Установка

 npm install --save woff2base64

Использование

WOFF2BASE64 автоматически смотрит на шрифт и стиль FONT в данном имени файла шрифта (нечувствительно к случаям). Все возможные значения 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

Шаблон, используемый для генерации URI кодированного BASE64. Используется с Lodash's _.template.

Тип: String

По умолчанию:

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

Баннер

Баннер, который готовят к сгенерированным файлам CSS. '' , чтобы отключить баннер.

Тип: String

Ресурсы

Преобразуйте свои шрифты TTF в WOFF2 и WOFF с генератором WebFont Font Squirrel.
Смотрите текущую поддержку браузера Woff2 и Woff Fonts на canisue.com.
Зачем вам это нужно? Читайте лучшую загрузку WebFont с использованием LocalStorage и предоставления поддержки WOFF2 Адамом Берсом-Диком.
Этот пакет основан на Fontoptim от Artem Sapegin с улучшениями для распознавания в стиле Font и Font.