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