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

Google-Font-Splitter

เครื่องมือในการดาวน์โหลดไฟล์แบบอักษรออนไลน์ที่จัดทำโดย Google-Font ไปยังเว็บไซต์ในพื้นที่ของคุณ

แบบอักษรออนไลน์ที่จัดทำโดย Google-Font ใช้ unicode-range สำหรับการแบ่งส่วนแพ็คเกจแบบอักษรซึ่งสามารถปรับปรุงความเร็วในการโหลดแบบอักษรได้อย่างมีประสิทธิภาพ

อย่างไรก็ตามเนื่องจากเครือข่ายสภาพแวดล้อมและปัญหาอื่น ๆ บางโครงการไม่สามารถอ้างอิงแบบอักษรของ Google ได้ตามปกติดังนั้นเครื่องมือนี้จะดาวน์โหลด Google Online ที่ระบุไว้ในพื้นที่เพื่ออำนวยความสะดวกให้โครงการอ้างอิงโดยตรงในเครื่อง

ติดตั้ง

ข้อกำหนด: node 12+ 

npm install -g google-font-splitter

วิธีใช้

การใช้เครื่องมือนี้แบ่งออกเป็นสองขั้นตอนโดยได้รับลิงก์แบบอักษรออนไลน์และดาวน์โหลดไฟล์ตัวอักษร

ขั้นตอนที่ 1: รับลิงค์แบบอักษรออนไลน์

เปิด Google Fonts และค้นหาเพื่อเลือกแบบอักษรที่คุณต้องการดาวน์โหลด

เลื่อนลงบนหน้ารายละเอียดตัวอักษรเพื่อค้นหาสไตล์และคลิกปุ่ม เลือกสไตล์นี้ ทางด้านขวาของแบบอักษรที่คุณต้องการใช้

ค้นหาลิงค์ตัวอักษรออนไลน์ด้านล่างแผง ครอบครัวที่เลือก ทางด้านขวาและคัดลอกออก (เพียงลิงค์ ไม่จำเป็น ต้องคัดลอกแท็กลิงค์ทั้งหมด):

ขั้นตอนที่ 2: ดาวน์โหลดไฟล์ตัวอักษร

ค้นหาโฟลเดอร์ที่ว่างเปล่าและดำเนินการคำสั่งต่อไปนี้: 

google-font-splitter " https://你复制出的在线字体链接"
# 例如 google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap"

หลังจากป้อนเครื่องมือจะพิมพ์เอาต์พุตต่อไปนี้: 

 downloading entry css file...
recast entry file and generating font download tasks...
save entry css file...
downloading font source ======================================== 100% 291/291
download complate, save to D:projectgoogle-font-splitterfont-resultnoto-sans-sc

จากนั้นคุณสามารถค้นหาโฟลเดอร์ตัวอักษรที่ดาวน์โหลดได้ในโฟลเดอร์ในบรรทัดสุดท้ายของบันทึกไดเรกทอรีมีดังนี้: 

 noto-sans-sc
├── s/notosanssc/xxx/...
└── noto-sans-sc.css

มีโฟลเดอร์ที่เก็บไฟล์แบบอักษรแยกและไฟล์ CSS ที่มีชื่อเดียวกับไดเรกทอรี ไฟล์ CSS นี้เป็นไฟล์รายการ เพียงคัดลอกโฟลเดอร์ลงในโครงการของคุณและอ้างอิงโดยใช้แท็ก <Link />

พารามิเตอร์บรรทัดคำสั่งและรายการการกำหนดค่า

คุณสามารถใช้พารามิเตอร์ --help เพื่อดูข้อมูลความช่วยเหลือได้ตลอดเวลา

  • url พารามิเตอร์

    เครื่องมือยอมรับพารามิเตอร์เดียวเท่านั้นเช่นลิงก์แบบอักษรออนไลน์ของ Google Fonts ตรวจสอบให้แน่ใจว่าลิงก์ชี้ไปยังไฟล์ CSS

  • รายการการกำหนดค่า -r, --root <path>

    ไฟล์ CSS รายการแบบอักษรแนะนำคำนำหน้าพา ธ ของไฟล์ต้นฉบับตัวอักษรซึ่งค่าเริ่มต้นไปยังเส้นทางสัมพัทธ์ระดับเดียวกัน ( ดังนั้นโดยค่าเริ่มต้นคุณต้องวางไฟล์ CSS และไฟล์ต้นฉบับ FONT ในไดเรกทอรีระดับเดียวกัน )

    คุณสามารถใช้พารามิเตอร์นี้เพื่อระบุตำแหน่งที่เก็บข้อมูลของไฟล์ต้นฉบับตัวอักษร ตัวอย่างเช่นจัดเก็บแบบอักษรบนเครือข่าย CDN แยกต่างหาก: 

     google-font-splitter "https://fonts.googleapis.com/..." -r https://your-custom-cdn/public/fonts/

  • รายการการกำหนดค่า -d, --dist <savePath>

    ตำแหน่งเริ่มต้นที่จะดาวน์โหลดไฟล์ตัวอักษรคือ ./font-result font-result

  • รายการการกำหนดค่า -n, --name <fileName>

    ชื่อของไฟล์รายการตัวอักษรนั่นคือชื่อของโฟลเดอร์ในไดเรกทอรีดาวน์โหลดและชื่อของไฟล์ CSS รายการภายใน

    โดยค่าเริ่มต้นมันจะถูกแยกวิเคราะห์จากลิงค์ Google Fonts ที่ให้มาและการประทับเวลามิลลิวินาทีในปัจจุบันจะถูกใช้เมื่อความละเอียดล้มเหลว

  • รายการการกำหนดค่า -c, --concurrent <number>

    จำนวนการเกิดขึ้นพร้อมกันเมื่อดาวน์โหลดไฟล์ต้นฉบับแบบฟอนต์แบบแยกเป็นค่าเริ่มต้นเป็น 30

การอ้างถึงในโครงการ

วิธีการใช้งานนั้นง่ายมากคุณเพียงแค่ใช้ <link href="xxx.css" rel="stylesheet"> เพื่อแนะนำไฟล์รายการตัวอักษรที่ดาวน์โหลดมา

นี่คือการอ้างอิงเฟรมเวิร์กทั่วไป (สมมติว่าไฟล์ตัวอักษรที่ดาวน์โหลดถูกเก็บไว้ในโฟลเดอร์ NOTO-SANS-SC และไฟล์รายการคือ noto-sans-sc/noto-sans-sc.css ):

Vue2 (Vue-cli)

คัดลอกโฟลเดอร์แบบอักษรที่ดาวน์โหลดเข้าสู่ /public ของโครงการ Vue2

อ้างถึงไฟล์รายการตัวอักษรใน /public/index.html : 

 < link href =" <%= BASE_URL %>noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

จากนั้นตั้งค่าตัวอักษรครอบครัวที่คุณต้องการ: 

 # app {
  font-family : 'Noto Sans SC' , sans-serif;
}

Vue3 (Vite)

คัดลอกโฟลเดอร์ฟอนต์ที่ดาวน์โหลดเข้าสู่ /public ของโครงการ Vite

อ้างถึงไฟล์รายการแบบอักษรใน /index.html : 

 <!-- 注意 vite 项目直接从根目录引用 public 中的文件即可 -->
< link href =" /noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

ในที่สุดตั้งค่าตัวอักษรครอบครัวตามที่ต้องการ

React (Create-React-App)

สำเนาแรกโฟลเดอร์ตัวอักษรที่ดาวน์โหลดเข้าสู่ /public ของโครงการ React

จากนั้นอ้างถึงไฟล์รายการตัวอักษรใน /public/index.html : 

 < link href =" %PUBLIC_URL%/noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

ในที่สุดตั้งค่าตัวอักษรครอบครัวตามที่ต้องการ

ใบอนุญาต

ดูรายละเอียดใบอนุญาตของ Google Fonts

อ้างถึง

เครื่องมือนี้ใช้การพัฒนาการพึ่งพาต่อไปนี้: FS-Extra Chalk Node-Fetch CSS-Tree

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด