fontface styled components

フォントフェイススタイルのコンポーネント

TTF、EOT、WOFF、およびWOFF2形式でフォントを生成するライブラリと、スタイルのコンポーネント形式の@font-face命令。 Fontface-Roaderに触発されました。

このライブラリは、SCSSまたはCSS出力を生成するため、 styled-componentsプロジェクトにFontface Automationの使用を簡素化することを目的としています。また、入力および出力ディレクトリの基本的な構成オプションも提供します。これは、他のスクリプトが提供することを忘れています。

styled-components CreateGlobalStyleヘルパー関数は、必要な場所にフォントをDOMにインポートできるようにします。プロップを追加して、 @font-faceのフォントディスプレイCSSプロパティを制御できるようにして、プログラムで（少なくともSSRコンテキストで）フォントの読み込み順序を最適化できるようにします。

利便性を高めるために、このライブラリは、単一の@font-faceをロードする個々 @use with CSSファイルと、単一の@font-faceをロードするSCSSファイルを生成することもできます。

インストール

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' ,
} )

ページの1つの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 } 

オプション：

Sourcedir：

ソースTTFフォントを含むフォルダーへのパス。

デフォルト： 'assets/fonts/'

fontoutputdir：

配置する変換されたフォントの宛先フォルダーへのパス。元のTTFフォントもこのフォルダーにコピーされます。

デフォルト： 'dist/fonts/'

fontspublicdir：

生産サーバーのフォントのパス。これは@font-face宣言URLで使用されます。

デフォルト： '/public/fonts/'

耐久性：

スタイルのコンポーネント用の@Fontfaceファイルを生成するかどうか。

デフォルト： true

styledoutputdir：

宛先フォルダーへのパスCSS-in-JSファイルを書く場所。各ソースフォントファイルには、独自のCSS-in-jsファイルがあります。

デフォルト： 'dist/src/fontfaces/'

withcss：

Vanilla CSS @fontfaceファイルを生成するかどうか。

デフォルト： false

cssoutputdir：

宛先フォルダーへのパスCSS @fontface宣言ファイルを書き込む場所。各ソースフォントファイルには、独自のCSSファイルがあります。

デフォルト： 'dist/src/fontfaces/'

withscss：

各フォントのSCSSミックスファイルを生成するかどうか。

デフォルト： false

scssoutputdir：

SCSSミキシンを書く場所へのパスフォルダーへ。各ソースフォントファイルには、独自のSCSSファイルがあります。

デフォルト： 'dist/src/fontfaces/'

withlocal：

@fontface宣言にローカルソースを追加するフラグ。プロジェクトをB2B環境または販売ポイントデバイスに展開する場合にのみ推奨されます。ここでは、消費者デバイスがしばしば異なるため、ローカルフォントが提供するものと同一であることを確認できます。

デフォルト：後方互換性にはtrueが、 falseに設定することをお勧めします

fontdisplay：

設定されている場合は、Font-displayプロパティをすべての@fontfaceファイルに無差別に適用します。これは主に、独自のロジック後のビルドに置き換えるパターンを設定する場合、またはデフォルトを設定して特定の@fontfaceファイルを手動で編集する場合に意図されています。

Unsetの場合、 'auto'はデフォルトでCSSファイルに使用されます。 CSS-in-JSファイルの場合、テンプレートのリテラルパラメーターが挿入され、最初にprops.fontDisplayを読み取り、その小道具が設定されていない場合は'auto'を返します。

デフォルト： null

許可：

空の入力ディレクトリを許可するフラグ。プログラム環境でfontface-styled-componentsを使用する場合に役立ちます。 falseの場合、入力ディレクトリにフォントが見つからないとエラーがスローされます。

デフォルト： false

Forcerefresh：

出力ディレクトリに既に存在している場合でも、すべての入力フォントの再生を強制するフラグ。大規模なWebプロジェクト用のフォントを生成すると、ビルド時間に大きな影響を与える可能性があるため、これはデフォルトで無効になります。生産ビルドのためにこのフラグを常に有効にすることをお勧めします。

デフォルト： false

静かな：

情報と警告の出力を防ぐためのフラグ。

デフォルト： false