fontface styled components Download - Unduh Kode Sumber fontface styled components

fontface styled components

Pengunduhan font

1.0.0

Unduh

Komponen gaya fontface

Perpustakaan untuk menghasilkan font dalam format TTF, EOT, WOFF dan WOFF2, bersama dengan instruksi @font-face dalam format gaya-komponen. Terinspirasi oleh fontface-loader.

Perpustakaan ini bertujuan untuk menyederhanakan penggunaan otomatisasi fontface untuk proyek-proyek styled-components , karena sebagian besar alat di luar sana menghasilkan output SCS atau CSS. Ini juga menyediakan opsi konfigurasi dasar untuk direktori input dan output, yang beberapa skrip lain lupa sediakan.

Fungsi pembantu createGlobalStyle styled-components digunakan untuk memungkinkan Anda mengimpor font di DOM Anda di mana Anda membutuhkannya. Prop ditambahkan untuk memungkinkan Anda mengontrol properti Font-Display CSS dari @font-face , sehingga Anda dapat mengoptimalkan urutan pemuatan font Anda secara terprogram (setidaknya dalam konteks SSR).

Untuk kenyamanan tambahan, perpustakaan ini juga dapat menghasilkan file CSS individual yang memuat satu @font-face , serta file SCSS yang memuat satu @font-face dan yang untuknya properti CSS font-display dapat dikontrol melalui @use with at-rule.

Menginstal

NPM

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

benang

 yarn add -D fontface-styled-components

Dependensi opsional

FontForge

Dukungan format input

Truetype

Didukung secara default.

OpenType

Anda harus menginstal FontForge dan memiliki biner fontforge di $PATH Anda. Jika diinstal, skrip konversi akan mengonversi font openType menjadi truetype sebagai bagian dari proses pembuatan.

Penggunaan:

Untuk menghasilkan file font dan css-in-js Anda, gunakan dan mengadaptasi kode berikut:

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

Untuk memuat font di DOM dari salah satu halaman Anda, gunakan dan beradaptasi kode berikut:

 import CatamaranBoldFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'
import CatamaranRegularFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'

< MyPageRoot >
  < CatamaranBoldFontFace />
  < CatamaranFontFace fontDisplay = "fallback" />
  < MyContent />
</ MyPageRoot >

Output Khas:

Mengimpor file Catamaran-bold.ttf biasanya akan menghasilkan file CSS-in-Js berikut yang dihasilkan:

 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 }

Opsi:

Sourcedir:

Jalur ke folder yang berisi sumber font TTF.

Default : 'assets/fonts/'

FontoutputDir:

Jalur ke folder tujuan agar font yang dikonversi ditempatkan. Font TTF asli juga akan disalin dalam folder ini.

Default : 'dist/fonts/'

FontSpublicdir:

Jalur font di server produksi Anda, yang akan digunakan dalam URL deklarasi @font-face Anda.

Default : '/public/fonts/'

Komponen yang ditahan:

Apakah akan menghasilkan file @FontFace untuk komponen gaya.

Default : true

StyledOutputDir:

Jalur ke folder tujuan tempat menulis file css-in-js. Setiap file font sumber akan memiliki file css-in-js sendiri.

Default : 'dist/src/fontfaces/'

WithCSS:

Apakah akan menghasilkan file vanilla CSS @FontFace.

Default : false

cssoutputdir:

Jalur ke folder tujuan tempat menulis file deklarasi CSS @FontFace. Setiap file font sumber akan memiliki file CSS sendiri.

Default : 'dist/src/fontfaces/'

WithSCSS:

Apakah akan menghasilkan file mixin SCSS untuk setiap font.

Default : false

scssoutputdir:

Jalur ke folder tujuan tempat menulis scss mixins. Setiap file font sumber akan memiliki file SCSS sendiri.

Default : 'dist/src/fontfaces/'

Withlocal:

Bendera untuk menambahkan sumber lokal ke deklarasi @FontFace. Hanya direkomendasikan ketika proyek Anda harus digunakan di lingkungan B2B atau perangkat titik penjualan di mana Anda dapat memastikan font lokal identik dengan yang ingin Anda layani, karena sering bervariasi pada perangkat konsumen.

Default : true untuk kompatibilitas ke belakang, tetapi kami sarankan Anda mengaturnya ke false

fontdisplay:

Jika diatur, terapkan properti font-display ke semua file @FontFace tanpa pandang bulu. Ini terutama dimaksudkan jika Anda ingin menetapkan pola yang akan Anda ganti dengan logika Anda sendiri pasca-membangun, atau jika Anda ingin mengatur default dan untuk mengedit file @FontFace tertentu secara manual.

Jika tidak ada, 'auto' akan digunakan secara default untuk file CSS. Untuk file CSS-in-JS, parameter literal template akan disuntikkan, yang pertama kali 'auto' props.fontDisplay .

Default : null

Allowempty:

Bendera untuk memungkinkan direktori input kosong. Berguna untuk saat Anda menggunakan fontface-styled-components di lingkungan terprogram. Jika false , kesalahan akan dilemparkan ketika tidak ada font yang ditemukan di direktori input.

Default : false

Forcerefresh:

Bendera untuk memaksa regenerasi semua font input, bahkan ketika mereka sudah ada di direktori output. Ini dinonaktifkan secara default karena menghasilkan font untuk proyek web besar dapat secara signifikan memengaruhi waktu pembangunan. Kami menyarankan Anda selalu mengaktifkan bendera ini untuk pembangunan produksi.

Default : false