react fontpicker
1.0.0
React용 Google 글꼴 선택기 구성요소입니다.
https://github.com/Mikk3lRo/vue-fontpicker/에서 포크됨
사용법을 포함한 라이브 데모는 https://ae9is.github.io/react-fontpicker/에서 확인할 수 있습니다.
# npm
npm i react-fontpicker-ts
# yarn
yarn add react-fontpicker-ts
# much smaller package with fewer fonts
npm i react-fontpicker-ts-lite그런 다음 구성요소와 스타일시트를 가져옵니다.
import FontPicker from 'react-fontpicker-ts'
import 'react-fontpicker-ts/dist/index.css' packages/fontpicker/src/comComponents/FontPicker.css에서 CSS 클래스 이름을 확인하세요.
글꼴 선택기 스타일을 변경하는 예
글꼴 선택기를 실제 앱에 통합하는 예: ae9is/uimix
글꼴 선택기 프로젝트는 packages/fontpicker/의 Turborepo 모노레포에 있습니다.
라이브 데모는 npm run dev 통해 직접 실행할 수 있고 /docs 에 빌드되는 Vite 앱입니다. tsconfig.json 사용합니다.
글꼴 선택기 구성 요소 자체는 tsconfig.types.json 에 따라 tsc 통해 생성된 유형 정의를 사용하여 tsup (예: esbuild )을 통해 /dist 로 빌드됩니다.
글꼴 미리보기 생성 스크립트는 글꼴 파일을 /font-cache 에 다운로드하고 글꼴 이미지 미리보기를 /font-preview 에 빌드합니다.
글꼴 선택기 미리보기는 CSS에서 글꼴 미리보기 이미지 파일을 로드하여 작동합니다. 더 빠른 초기 미리보기를 위해 글꼴은 여러 이미지 파일로 분할됩니다.
드롭다운 선택이 열리면 모든 미리보기 이미지 파일이 검색되어 원활한 스크롤 및 검색이 가능합니다.
글꼴 선택기가 자동 로드로 설정되어 있지 않으면 Google 글꼴 API에 대한 요청이 이루어지지 않습니다. 이 경우 현재 선택한 글꼴이 페이지 헤더에 추가됩니다. (이전에 선택한 글꼴 링크는 제거되지 않습니다 .)
예를 들어:
< head >
...
< link
rel =" stylesheet "
id =" google-font-rock_salt-all "
href =" https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400&display=swap "
/>
</ head >이 접근 방식의 가장 큰 단점은 모든 글꼴 이미지 미리 보기로 인해 구성 요소 번들이 상당히 크다는 것입니다(1633 글꼴에 대한 압축된 SVG 이미지의 경우 8MB). 압축된 SVG를 제공하는지 확인하세요! Vite에 대한 예는 여기를 참조하세요.
더 가벼운 옵션을 찾고 있다면 대신 약 180KB인 react-fontpicker-ts-lite 사용할 수 있습니다.
또는 주문형 접근 방식을 따르는 다른 글꼴 선택기에 대해서는 https://github.com/samuelmeuli/font-picker-react를 확인하세요.
font-picker-react Google API 키가 필요하며 기본 글꼴 제한인 50개(선택할 글꼴)에서 가장 잘 작동합니다.
참고: 대부분의 사용자는 글꼴 미리 보기를 다시 작성할 필요가 없지만 최신 글꼴을 가져오거나 미리 보기를 편집해야 하는 경우 편의를 위해 이 섹션이 포함되었습니다.
https://developers.google.com/fonts/docs/developer_api#APIKey에서 Google API 키를 얻고 scripts/buildFontPreviews.ts 와 동일한 디렉토리에 있는 react-fontpicker/packages/fontpicker/scripts 에 GOOGLE_API_KEY 라는 새 파일을 만듭니다. scripts/buildFontPreviews.ts 스크립트.
현재 사용 가능한 모든 Google 글꼴에 대한 글꼴 미리보기를 생성합니다(라틴 글꼴 계열만 해당, Kumar One 제외).
cd react-fontpicker/packages/fontpicker
npm run build-font-previews참고: 1,600개 글꼴의 경우 모든 글꼴을 다운로드하는 데 20~30분, 800MB를 할당하세요. 이미지 미리보기 자체를 컴파일하는 데는 1분 미만이 소요됩니다. 다시 실행하면 스크립트는 1주일이 지난 경우에만 새 글꼴 정보를 검색하고 캐시된 글꼴 다운로드를 건너뜁니다.
사용자 정의 글꼴에 대한 글꼴 미리보기를 생성하려면 글꼴에 대한 정보와 TTF 형식으로 다운로드한 글꼴 파일의 경로가 필요합니다.
buildFontPreviews.ts output-dir " font-name|font-category|font-variants-info|font-file " " font-name-2... "여기서 글꼴 변형 정보는 +로 연결된 0,400 및 1,700과 같은 값의 배열입니다. 첫 번째 값은 일반(0) 또는 기울임꼴(1) 글꼴을 나타냅니다. 두 번째 값은 글꼴 두께입니다(예: 100 = 가늘음, 400 = 보통, 700 = 굵게, 900 = 무거움).
예를 들어:
buildFontPreviews.ts output-dir " FontName|sans-serif|0,400+0,700+1,400+1,700|/path/to/font.ttf " " Font2|serif|0,400|/path/to/font2.ttf " packages/fontpicker/package.json에서 build-font-previews-manual 실행 스크립트를 참조하세요.
이 모노레포는 Turborepo를 사용합니다.
이 앱은 테스트를 위해 Vitest와 Cypress를 사용합니다. 시스템에 Cypress에 대한 필수 구성 요소를 설정했는지 확인하세요.
우분투에서:
apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
