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

โครงการ Typefaces เลิกใช้แล้ว

@DecliningLotus สร้าง FontSource ซึ่งให้ฟังก์ชันการทำงานเช่นเดียวกับ typefaces แต่มีการเปิดตัวอัตโนมัติและการสนับสนุนที่สมบูรณ์ยิ่งขึ้นสำหรับการนำเข้าน้ำหนักสไตล์หรือชุดย่อยภาษาเฉพาะ

ในการเริ่มใช้ FontSource ให้แทนที่ใน package.json อินสแตนซ์ของ "typeface- " ด้วย "@fontsource/ "

จากนั้นเปลี่ยนการนำเข้าจาก "นำเข้า 'typeface-Roboto'" เป็น "นำเข้า '@fontsource/Roboto/Latin.css'"

แพ็คเกจแบบอักษรจะทำงานต่อไปอย่างไม่มีกำหนดดังนั้นจึงไม่จำเป็นต้องมีการเปลี่ยนแปลงทันที

รูปแบบ

แพ็คเกจ NPM สำหรับประเภทแบบโอเพนซอร์ส-ทำให้เว็บฟอนต์โฮสต์ตนเองง่ายขึ้น

https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/

ทำไม

  • การโฮสต์ตัวเอง เร็วขึ้นอย่างมาก การโหลดตัวอักษรจาก Google Fonts หรือบริการแบบอักษรโฮสต์อื่น ๆ เพิ่ม คำขอเครือข่ายพิเศษ (บล็อก) ในการทดสอบของฉันฉันพบว่าการแทนที่ Google Fonts ด้วยแบบอักษรโฮสต์ตัวเองสามารถปรับปรุง SpeedIndex ของไซต์ได้โดย ~ 300 Miliseconds บนเดสก์ท็อปและ 1+ วินาทีใน 3G นี่เป็นเรื่องใหญ่
  • แบบอักษรของคุณโหลดออฟไลน์ เป็นเรื่องน่ารำคาญที่จะเริ่มทำงานในโครงการเว็บบนรถไฟหรือเครื่องบินและดูอินเทอร์เฟซของคุณเพราะคุณไม่สามารถเข้าถึง Google Fonts ได้ ฉันจำได้ว่าเมื่ออยู่ในสถานการณ์นี้และทำทุกอย่างที่เป็นไปได้เพื่อหลีกเลี่ยงการโหลดโครงการอีกครั้งเพราะฉันรู้ว่าฉันจะสูญเสียแบบอักษรและถูกบังคับให้หยุดทำงาน
  • ไปไกลกว่า Google Fonts แบบอักษรที่ฉันชอบบางตัวไม่ได้อยู่ใน Google Fonts เช่น Clear Sans, Cooper Hewitt และ Aleo
  • เว็บทั้งหมด (ไซต์ | แอพ) ควรได้รับการจัดการผ่าน NPM เมื่อเป็นไปได้ เป็นวิธีที่ทันสมัย

อะไร

แต่ละแพ็คเกจตัวอักษรจะมีไฟล์ฟอนต์ที่จำเป็นทั้งหมดและ CSS เพื่อโฮสต์ตัวอักษรโอเพนซอร์ส

Google Fonts ทั้งหมดได้รับการเพิ่มเช่นเดียวกับรายการแบบอักษรโอเพ่นซอร์สอื่น ๆ แต่กำลังเติบโต เปิดปัญหาหากคุณต้องการเพิ่มแบบอักษร!

ยังไง

ไม่สามารถง่ายกว่านี้ นี่คือวิธีที่คุณจะเพิ่ม sans ที่เปิดอยู่ 

 npm install --save typeface-open-sans

จากนั้นในแอพหรือไฟล์รายการของไซต์ 

 require ( "typeface-open-sans" )

แล้วก็แค่ไหน! ตอนนี้คุณกำลังเปิดตัวเอง!

ควรใช้เวลา <5 นาทีในการแลกเปลี่ยน Google Fonts

TypeFace ถือว่าคุณใช้ webpack กับการตั้งค่า loaders สำหรับการโหลดไฟล์ CSS และ FONT (คุณสามารถใช้แบบอักษรกับการตั้งค่าอื่น ๆ ได้ แต่ WebPack ทำให้สิ่งต่าง ๆ ง่ายจริงๆ) สมมติว่าการกำหนดค่า webpack ของคุณมีการตั้งค่าอย่างถูกต้องคุณเพียงแค่ต้องใช้ตัวอักษรในไฟล์รายการสำหรับโครงการของคุณ

เครื่องมือมากมายที่สร้างขึ้นด้วย webpack เช่น Gatsby และสร้างแอป React ได้ตั้งค่าให้ทำงานกับ typefaces แล้ว Gatsby โดยค่าเริ่มต้นยังฝัง CSS ของคุณไว้ใน <head> สำหรับการโหลดที่เร็วขึ้น

หากคุณไม่ได้ใช้ webpack หรือเครื่องมือเทียบเท่าที่ช่วยให้คุณต้องการ CSS คุณจะต้องรวมไฟล์ index.css และตัวอักษรจากแพ็คเกจเข้ากับระบบบิลด์ของคุณด้วยตนเอง

ทางเลือกที่ไม่มี webpack

  • สำหรับผู้ใช้ Ember มี addon https://github.com/jeffjewiss/ember-typeface

เพิ่มแบบอักษรอื่น ๆ

วิธีที่ง่ายที่สุดในการตรวจสอบว่าแบบอักษรที่คุณชื่นชอบนั้นรองรับคือการค้นหา NPM หรือในไดเรกทอรีแพ็คเกจใน repo นี้หรือไม่

ฉันชอบที่จะเห็นแบบอักษรโอเพ่นซอร์สทุกตัวใน NPM! เปิดปัญหาหากตัวอักษรที่คุณชื่นชอบหายไป ฉันได้เผยแพร่แบบอักษรทั้งหมดจาก Google Fonts และกำลังวางแผนที่จะทำแบบเดียวกันกับ Fonts Hosts บน Fontsquirrel ผ่าน API ของพวกเขา

แนวคิดอื่น ๆ ในการสำรวจ

  • เพิ่มเวอร์ชันย่อยของแบบอักษรทุกตัว
  • ตอนแรกฉันเพิ่งเพิ่มการสนับสนุนสำหรับแบบอักษรละติน ชอบที่จะได้ยินความคิดสำหรับวิธีการสนับสนุนภาษาอื่น ๆ บางทีไฟล์ CSS เพิ่มเติมเช่น require('open-sans/greek.css') ?
  • ผู้ช่วย CSS ทางเลือกทางเลือก - การหา CSS ทางเลือกของคุณไม่ใช่เรื่องง่ายโดยเฉพาะ บางทีอาจมีวิธีการทำให้เป็นไปโดยอัตโนมัติ เช่นหากคุณใช้ Typeface X ที่ FontSize Y กับ Flack Back Back Font Z นี่คือฟังก์ชั่นในการสร้าง CSS ทางเลือก
  • สำรวจการเพิ่มประสิทธิภาพ futher สำหรับการโหลดแบบอักษร https://www.zachleat.com/web/comprehensive-webfonts/ มีรายการยาว ส่วนใหญ่ต้องการสคริปต์ที่เจ็บปวดต่อโครงการ จะเกิดอะไรขึ้นถ้ากลยุทธ์ที่ดีที่สุดสามารถเป็นไปโดยอัตโนมัติ?
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด