fontface styled components

Fontface风格的组件

一个库以ttf，eot，woff和woff2格式生成字体，以及@font-face指令的样式组件格式。受Fontface-Loader的启发。

该库旨在简化用于styled-components项目的Fontface Automation的使用，因为大多数工具都会生成SCSS或CSS输出。它还为输入和输出目录提供了基本的配置选项，其他一些脚本却忘记了。

styled-components CreateGlobalStyle辅助功能可允许您在需要的字体中导入字体。添加道具以使您可以控制@font-face的字体 - 播放CSS属性，以便您可以通过编程（至少在SSR上下文中）来优化字体的加载顺序。

为了增加方便，此库还可以生成加载单个@font-face单个CSS文件，以及加载单个@font-face SCSS文件，并为其@use with ATRULE来控制Font-display CSS属性。

安装

NPM

 npm install --save-dev fontface-styled-components

纱

 yarn add -D fontface-styled-components

可选依赖性

• fontforge

输入格式支持

trueType

默认情况下支持。

Opentype

您必须安装fontforge，并在$PATH中使用fontforge二进制。如果安装了它，则作为构建过程的一部分，转换脚本将将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船。

 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 } 

选项：

sourcedir：

通往包含源TTF字体的文件夹的路径。

默认： 'assets/fonts/'

fontoutputdir：

将要放入转换的字体的目标文件夹的路径。原始TTF字体也将在此文件夹中复制。

默认： 'dist/fonts/'

fontspublicdir：

生产服务器中字体的路径，将在您的@font-face声明URL中使用。

默认值： '/public/fonts/'

使用StypyledComponents：

是否为样式组件生成@fontface文件。

默认值： true

StyledEtOutputdir：

通往目标文件夹的路径在哪里写CSS-IN-JS文件。每个源字体文件将具有自己的CSS-IN-JS文件。

默认值： 'dist/src/fontfaces/'

使用CSS：

是否生成Vanilla CSS @fontface文件。

默认值： false

CSSOUTPUTDIR：

通往目标文件夹的路径在哪里写CSS @fontface声明文件。每个源字体文件将具有自己的CSS文件。

默认值： 'dist/src/fontfaces/'

使用SCSS：

是否为每种字体生成SCSS混合文件。

默认值： false

SCSSOUTPUTDIR：

通往目标文件夹的路径在哪里写入SCSS Mixins。每个源字体文件将具有其自己的SCSS文件。

默认值： 'dist/src/fontfaces/'

loslocal：

将本地源添加到@fontface声明中的标志。仅当您的项目被部署在B2B环境或销售点设备上时，您才建议您确保本地字体与您打算使用的字体相同，因为它们通常在消费者设备上有所不同。

默认值true向后兼容性，但我们建议您将其设置为false

fontdisplay：

如果设置，则将字体放置属性应用于所有@fontface文件。如果要设置您将用自己的逻辑后构建替换的模式，或者如果要设置默认值并手动编辑特定的@fontface文件，则主要打算。

如果未设置，则默认情况下将使用'auto'来用于CSS文件。对于CSS-IN-JS文件，将注入模板字面参数，首先读取props.fontDisplay ，如果该道具不设置，则会返回'auto' 。

默认值： null

允许empty：

标志以允许空输入目录。当您在程序化环境中使用fontface-styled-components时有用。如果是false ，则在输入目录中未发现字体时会丢弃错误。

默认值： false

Forcerefresh：

即使已经存在于输出目录中的标志，也可以强制所有输入字体的再生。默认情况下，这将被禁用，因为为大型Web项目生成字体会极大地影响构建时间。我们建议您始终启用此标志以进行生产。

默认值： false

安静的：

防止输出信息和警告的标志。

默认值： false