หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

ตอบสนอง Fontpicker

ส่วนประกอบตัวเลือกแบบอักษรของ Google สำหรับ React

  • ไม่มีการพึ่งพา (นอกเหนือจาก React)
  • ไม่จำเป็นต้องมีคีย์ Google API
  • แบบอักษร Google มากกว่า 1,600 แบบ ปรับแต่งได้
  • การแสดงตัวอย่างแบบอักษรคุณภาพสูงที่รวดเร็วจากรูปภาพ SVG ที่สร้างไว้ล่วงหน้า
  • สามารถเลือกโหลดแบบอักษรอัตโนมัติได้

แยกจาก 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'

จัดแต่งทรงผม

ดูชื่อคลาส CSS ใน: packages/fontpicker/src/components/FontPicker.css

ตัวอย่างการปรับแต่งตัวเลือกแบบอักษร

ตัวอย่างการรวมตัวเลือกแบบอักษรเข้ากับแอปจริง: ae9is/uimix

โครงสร้างโครงการ

โปรเจ็กต์ตัวเลือกแบบอักษรอยู่ใน Turborepo monorepo นี้ที่ packages/fontpicker/

การสาธิตสดคือแอป Vite ที่คุณสามารถรันด้วยตัวเองผ่าน npm run dev และ build ให้กับ /docs ใช้ tsconfig.json

องค์ประกอบตัวเลือกแบบอักษรนั้นสร้างผ่าน tsup (เช่น esbuild ) ถึง /dist ด้วยคำจำกัดความประเภทที่สร้างผ่าน tsc ตาม tsconfig.types.json

สคริปต์สร้างตัวอย่างแบบอักษรดาวน์โหลดไฟล์แบบอักษรไปที่ /font-cache และสร้างตัวอย่างรูปภาพแบบอักษรเป็น /font-preview

ผลงาน

การแสดงตัวอย่างตัวเลือกแบบอักษรทำงานโดยการโหลดไฟล์ภาพตัวอย่างแบบอักษรใน CSS แบบอักษรจะถูกแบ่งออกเป็นไฟล์รูปภาพจำนวนมากเพื่อการดูตัวอย่างเบื้องต้นที่รวดเร็วยิ่งขึ้น

เมื่อเปิดการเลือกแบบเลื่อนลง ไฟล์ภาพตัวอย่างทั้งหมดจะถูกดึงข้อมูล ทำให้สามารถเลื่อนและค้นหาได้อย่างราบรื่น

ไม่มีการร้องขอใด ๆ กับ Google Fonts API เว้นแต่จะตั้งค่าตัวเลือกแบบอักษรเป็นการโหลดอัตโนมัติ ซึ่งในกรณีนี้แบบอักษรที่เลือกในปัจจุบันจะถูกต่อท้ายที่ส่วนหัวของหน้า (ลิงก์แบบอักษรที่เลือกไว้ก่อนหน้านี้จะ ไม่ ถูกลบออก)

ตัวอย่างเช่น: 

 < head >
  ...
  < link
    rel =" stylesheet "
    id =" google-font-rock_salt-all "
    href =" https://fonts.googleapis.com/css2?family=Rock Salt:ital,wght@0,400&amp;display=swap "
  />
</ head >

ข้อดีข้อเสียที่สำคัญของแนวทางนี้คือชุดส่วนประกอบมีขนาดค่อนข้างใหญ่เนื่องจากมีการแสดงตัวอย่างรูปภาพแบบอักษรทั้งหมด: 8 MB ในรูปแบบ SVG ที่ถูกบีบอัดสำหรับแบบอักษร 1633 ตรวจสอบให้แน่ใจว่าคุณให้บริการ SVG ที่ถูกบีบอัด! ดูตัวอย่าง Vite ที่นี่

หากคุณกำลังมองหาตัวเลือกที่มีน้ำหนักเบากว่า คุณสามารถใช้ react-fontpicker-ts-lite แทนซึ่งมีขนาดประมาณ 180 KB

หรือสำหรับตัวเลือกแบบอักษรอื่นที่ปฏิบัติตามแนวทางตามความต้องการ โปรดดูที่: https://github.com/samuelmeuli/font-picker-react

font-picker-react ต้องใช้คีย์ Google API และทำงานได้ดีที่สุดที่ขีดจำกัดแบบอักษรเริ่มต้นที่ 50 (แบบอักษรให้เลือก)

การสร้างตัวอย่างแบบอักษร

หมายเหตุ: ผู้ใช้ส่วนใหญ่ไม่จำเป็นต้องสร้างตัวอย่างแบบอักษรใหม่ แต่ส่วนนี้จะรวมไว้เพื่อความสะดวกหากคุณต้องการคว้าแบบอักษรล่าสุดหรือแก้ไขตัวอย่าง

1. คีย์ Google API

รับคีย์ Google API ที่นี่ https://developers.google.com/fonts/docs/developer_api#APIKey และสร้างไฟล์ใหม่ชื่อ GOOGLE_API_KEY ใน react-fontpicker/packages/fontpicker/scripts ในไดเรกทอรีเดียวกันกับ scripts/buildFontPreviews.ts สคริปต์ . scripts/buildFontPreviews.ts

2. สคริปต์แสดงตัวอย่างแบบอักษร

แบบอักษร Google ทั้งหมด

เพื่อสร้างตัวอย่างแบบอักษรสำหรับแบบอักษร Google ที่มีอยู่ในปัจจุบันทั้งหมด (ตระกูลแบบอักษรละตินเท่านั้น ลบ Kumar One ) 

 cd react-fontpicker/packages/fontpicker
npm run build-font-previews

หมายเหตุ: สำหรับฟอนต์ 1600 ฟอนต์ ใช้เวลา 20-30 นาที และ 800 MB เพื่อดาวน์โหลดฟอนต์ทั้งหมด การรวบรวมภาพตัวอย่างควรใช้เวลาไม่ถึงหนึ่งนาที เมื่อเรียกใช้ใหม่ สคริปต์จะดึงข้อมูลแบบอักษรใหม่เฉพาะเมื่อเก่ากว่า 1 สัปดาห์ และข้ามการดาวน์โหลดแบบอักษรที่แคชไว้

แบบอักษรที่กำหนดเอง

หากต้องการสร้างตัวอย่างแบบอักษรสำหรับแบบอักษรที่กำหนดเอง คุณจะต้องมีข้อมูลบางอย่างเกี่ยวกับแบบอักษรและเส้นทางไปยังไฟล์แบบอักษรที่ดาวน์โหลดในรูปแบบ TTF 

buildFontPreviews.ts output-dir " font-name|font-category|font-variants-info|font-file " " font-name-2... "

โดยที่ font-variants-info คืออาร์เรย์ของค่า เช่น 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 "

ดูสคริปต์รัน build-font-previews-manual ใน: packages/fontpicker/package.json

การพัฒนา

การติดตั้ง

monorepo นี้ใช้ 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
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด