Скачать fontface styled components - Скачать исходный код fontface styled components

fontface styled components

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

1.0.0

Скачать

Компоненты в стиле Fontface

Библиотека для генерации шрифтов в форматах TTF, EOT, WOFF и WOFF2, а также инструкции @font-face в формате стиля-компонентов. Вдохновленный Fontface-Loader.

Эта библиотека направлена на то, чтобы упростить использование автоматизации Fontface для проектов styled-components , поскольку большинство инструментов генерируют вывод SCSS или CSS. Он также предоставляет базовые параметры конфигурации для каталогов ввода и вывода, которые некоторые другие сценарии забывают предоставить.

styled-components вспомогательная функция CreateGlobalStyle используется для того, чтобы позволить вам импортировать шрифты в вашем DOM, где они вам нужны. Добавляется опора, чтобы позволить вам управлять свойством CSS-Font-Display CSS @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' ,
} )

Чтобы загрузить шрифт в DOM одной из ваших страниц, используйте и адаптируйте следующий код:

 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 }

Параметры:

Источника:

Путь к папке, содержащей исходные шрифты TTF.

По умолчанию : 'assets/fonts/'

fontoutputdir:

Путь к папке назначения для преобразованных шрифтов, которые будут размещены. Оригинальный шрифт TTF также будет скопирован в этой папке.

По умолчанию : 'dist/fonts/'

fontspublicdir:

Путь шрифтов на вашем производственном сервере, который будет использоваться в ваших URL-адресах объявления @font-face .

По умолчанию : '/public/fonts/'

ShowstyledComponents:

Сгенерировать ли файлы @fontface для стилизовых компонентов.

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

styledOutputDir:

Путь к папке назначения, где написать файлы CSS-In-JS. Каждый файл шрифта источника будет иметь свой собственный файл CSS-In-JS.

По умолчанию : 'dist/src/fontfaces/'

withcss:

Создать ли ванильные файлы css @fontface.

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

cssoutputdir:

Путь к папке назначения, где написать файлы объявлений CSS @Fontface. Каждый файл шрифта источника будет иметь свой собственный файл CSS.

По умолчанию : 'dist/src/fontfaces/'

WithScss:

Создавать ли SCSS -файлы Mixin для каждого шрифта.

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

scssoutputdir:

Путь к папке назначения, где написать SCSS Mixins. Каждый файл шрифта источника будет иметь свой собственный файл SCSS.

По умолчанию : 'dist/src/fontfaces/'

withlocal:

Флаг, чтобы добавить локальный источник в объявления @fontface. Рекомендуется только тогда, когда ваш проект будет развернут в средах B2B или устройствах для продажи, где вы можете обеспечить, чтобы локальный шрифт идентичен тому, который вы собираетесь обслуживать, поскольку они часто различаются на потребительских устройствах.

По умолчанию : true для обратной совместимости, но мы рекомендуем вам установить его на false

fontdisplay:

Если установлено, применяет свойство Font-Display ко всем файлам @Fontface без разбора. Это в первую очередь предназначено, если вы хотите установить шаблон, который вы замените своей собственной логикой после сборки, или если вы хотите установить по умолчанию и вручную редактировать конкретные файлы @Fontface.

Если вы не установлены, 'auto' будет использоваться по умолчанию для файлов CSS. Для файлов CSS-In-JS будет введен буквальный параметр, который сначала читает props.fontDisplay , и который возвращает 'auto' если эта опора не является.

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

AllowEmpty:

Флаг, чтобы разрешить пустой входной каталог. Полезно, когда вы используете fontface-styled-components в программной среде. Если false , ошибка будет выброшена, когда в каталоге ввода не будет обнаружено.

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

FORCEREFRESH:

Флаг, чтобы вызвать регенерацию всех входных шрифтов, даже если они уже присутствуют в выходном каталоге. Это отключено по умолчанию, потому что генерирование шрифтов для крупных веб -проектов может значительно повлиять на время сборки. Мы рекомендуем вам всегда включать этот флаг для производства.

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