fontface styled components
1.0.0
Styled Components 형식의 @font-face 지침과 함께 TTF, EOT, Woff 및 Woff2 형식에서 글꼴을 생성하는 라이브러리. Fontface-Loader에서 영감을 얻었습니다.
이 라이브러리는 styled-components 프로젝트에 Fontface 자동화 사용을 단순화하는 것을 목표로합니다. 대부분의 도구는 SCSS 또는 CSS 출력을 생성하기 때문입니다. 또한 입력 및 출력 디렉토리에 대한 기본 구성 옵션을 제공하며, 일부 다른 스크립트는 제공하는 것을 잊어 버립니다.
styled-components CreateGlobalstyle 도우미 기능은 필요한 곳에서 DOM에서 글꼴을 가져올 수있는 데 사용됩니다. @font-face 의 font-display CSS 속성을 제어 할 수 있도록 소품이 추가되어 프로그래밍 방식으로 (적어도 SSR 컨텍스트에서) 글꼴의로드 순서를 최적화 할 수 있습니다.
편의성을 위해이 라이브러리는 단일 @font-face 로드하는 개별 CSS 파일과 단일 @font-face 로드하고 font-display css 속성을 at-rule @use with 통해 제어 할 수있는 SCSS 파일을 생성 할 수 있습니다.
NPM
npm install --save-dev fontface-styled-components
방사
yarn add -D fontface-styled-components
기본적으로 지원됩니다.
Fontforge를 설치하고 fontforge Binary를 $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/'
변환 된 글꼴을 배치 할 대상 폴더로가는 경로. 원래 TTF 글꼴 도이 폴더에 복사됩니다.
기본값 : 'dist/fonts/'
생산 서버의 글꼴 경로는 @font-face 선언 URL에 사용됩니다.
기본값 : '/public/fonts/'
스타일링 컴포넌트에 대한 @fontface 파일을 생성할지 여부.
기본값 : true
CSS-in-JS 파일을 작성할 대상 폴더로가는 경로. 각 소스 글꼴 파일에는 고유 한 CSS-in-JS 파일이 있습니다.
기본값 : 'dist/src/fontfaces/'
바닐라 css @fontface 파일 생성 여부.
기본값 : false
css @fontface 선언 파일을 작성하는 곳에 대상 폴더로가는 경로. 각 소스 글꼴 파일에는 자체 CSS 파일이 있습니다.
기본값 : 'dist/src/fontfaces/'
각 글꼴에 대해 SCSS Mixin 파일을 생성할지 여부.
기본값 : false
SCSS Mixins를 작성할 수있는 대상 폴더로가는 경로. 각 소스 글꼴 파일에는 자체 SCSS 파일이 있습니다.
기본값 : 'dist/src/fontfaces/'
@fontface 선언에 로컬 소스를 추가하는 깃발. 프로젝트가 B2B 환경 또는 판매 지점 장치에 배치 될 때만 권장되는 경우 로컬 글꼴이 소비자 장치마다 다르기 때문에 로컬 글꼴과 동일 할 수 있습니다.
Default : Backward 호환성은 true 이지만 false 로 설정하는 것이 좋습니다.
설정된 경우 모든 @fontface 파일에 Font-Display 속성을 무차별 적으로 적용합니다. 이것은 주로 자신의 논리 사후 구축으로 교체 할 패턴을 설정하거나 기본값을 설정하고 특정 @fontface 파일을 수동으로 편집하려는 경우의 용도입니다.
UNSET 인 경우 CSS 파일의 경우 'auto' 기본적으로 사용됩니다. CSS-in-JS 파일의 경우 템플릿 리터럴 매개 변수가 주입되며, 이는 처음에 props.fontDisplay 'auto' 습니다.
기본값 : null
빈 입력 디렉토리를 허용하는 플래그. 프로그래밍 방식 환경에서 fontface-styled-components 사용할 때 유용합니다. false 경우 입력 디렉토리에 글꼴이없는 경우 오류가 발생합니다.
기본값 : false
출력 디렉토리에 이미 존재하는 경우에도 모든 입력 글꼴의 재생을 강요하는 플래그. 대규모 웹 프로젝트에 대한 글꼴을 생성하면 빌드 시간에 크게 영향을 줄 수 있으므로 기본적으로 비활성화됩니다. 생산 빌드에 항상이 플래그를 활성화하는 것이 좋습니다.
기본값 : false
출력 정보 및 경고를 방지하는 깃발.
기본값 : false
