fylgja fontface

fylgja fontface

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

v2.1

Скачать

Fylgja - Fontface

Filgja Font-Face Mixin позволяет легко загружать шрифты.

Он автоматически установит все необходимые настройки для хорошего шрифта. Которые все еще настраиваются при необходимости.

Оглавление

Установка
Как использовать
Конфигурация
Советы
- Петля
- Значки
Часто задаваемые вопросы

Установка

npm i -D @fylgja/fontface

Как использовать

Включите пакет Font-Face в свой код через;

Включите пакет Utilkit в свой код через;

 @import " @fylgja/fontface " ; // (DartSass, LibSass 3.6)
@import " @fylgja/fontface/index " ; // old way

Загрузить шрифт. Позвоните в Mixin Font-Face. Добавьте свое имя шрифта + суффикс шрифта.

Все остальные шаги будут созданы MixIn автоматически (см. Config).

Вход:

 @include font-face ( " Roboto " , " Bold Italic " );

Выход:

 @font-face {
  font-family : "Roboto" ;
  src :
    local ( "Roboto Bold Italic" ) ,
    local ( "Roboto-BoldItalic" ) ,
    url ( "../fonts/Roboto-BoldItalic.woff2" ) format ( "woff2" ) ,
    url ( "../fonts/Roboto-BoldItalic.woff" ) format ( "woff" );
  unicode-range : "U+0000—00FF" ;
  font-weight : 700 ;
  font-style : italic;
  font-display : swap;
}

Конфигурация

Нет реальной конфигурации, кроме параметров микшина, которые вы можете пройти за шрифт.

Большинство вариантов заполнены. Если оставлено до значения по умолчанию.

По этой причине лучше вызвать конкретный вариант. Вместо этого изменение полных вариантов микшина. Пока вы не достигнете опции, вам нужно изменить.

Примеры;

Плохой путь:

 @include font-face ( " Roboto " , " Regular " , 400 , " U+0-10FFFF " , " ../assets " );

Хороший путь:

 @include font-face ( " Roboto " , " Regular " , $path : " ../assets " );

Параметры	Значение по умолчанию	Описание
`$name`		Имя семьи шрифтов
`$suffix`	нулевой	Суффикс (например, обычный или жирный)
`$styles`	$ Суффикс	Стили (например, 700i или 700 курсив)
`$unicode`	$ u-latin	Диапазон Unicode лица шрифта.
`$path`	'../fonts'	Путь к файлу шрифта
`$file-name`	нулевой	Имя файла шрифта
`$formats`	Местный, Woff2, Woff	Форматы файлов шрифта.
`$load`	менять	Вариант загрузки шрифта

Если вариант нулевой, он будет заполнен по умолчанию шрифта

Если вариант отсутствует. Пожалуйста, оставьте запрос на функцию.

Советы

Петля

Вы можете загрузить весь стек шрифтов Roboto через петлю Foreach.

 $fonts-roboto : (
    " Light " ,
    " Light Italic " ,
    " Regular " ,
    " Italic " ,
    " Bold "
);

@each $styles in $fonts-roboto {
    @include font-face ( " Roboto " , $styles );
}

Значки

Вы можете использовать этот Mixin, чтобы также загрузить библиотеки значков шрифтов. Просто назовите микшин, как описано выше. Но оставьте поле суффикса до значения по умолчанию NULL .

 @include font-face ( " FontAwesome " , $unicode : " U+0-10FFFF " );

Или используйте значение суффикса 'Regular'

 @include font-face ( " Material Icons " , " Regular " , $unicode : " U+0-10FFFF " );

Это будет установлено по умолчанию:

шрифт до 400
в стиле шрифта до нормального

Вы все равно должны установить $unicode , поскольку библиотеки значков имеют разное, чем просто латынь. По умолчанию для Unicode- U+0-10FFFF который все однозначные.