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

แบบอักษรง่าย

แบบอักษรง่ายให้คลาส CSS ที่จะใช้ใน HTML เป็น <div classs="font-open-sans"></div> สิ่งนี้ทำให้ใช้ Google Fonts ในโครงการของคุณได้ง่ายขึ้น แบบอักษรง่ายทำให้ Webfonts 2 ขั้นตอนง่ายขึ้นเนื่องจากคุณ ไม่จำเป็นต้องทำซ้ำขั้นตอนการทำซ้ำ ทุกครั้งที่คุณลองใช้ครอบครัวฟอนต์ใหม่:

  1. ไม่จำเป็นต้องสร้างสไตล์ฟอนต์ใหม่ทุกครั้งและ
  2. ไม่จำเป็นต้องแก้ไข CSS เพื่อใช้แบบอักษร

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

ทำไมแบบอักษรง่าย ๆ

แบบอักษรง่ายได้รับการพัฒนาเพื่อใช้ประโยชน์จากเทคนิคการรวมโฮสต์ที่ใช้โดย pagecdn ไปยังเว็บไซต์เร่งความเร็ว เป้าหมายเริ่มต้นของเราคือการอนุญาตให้เว็บไซต์ที่ใช้ PageCDN สำหรับการส่งเนื้อหาของพวกเขาไปยังตัวเลือกส่งแบบอักษรผ่านโฮสต์ CDN เดียวกันเพื่อลดการค้นหา DNS พิเศษ 2 รายการที่ต้องการโดย Google Fonts ต่อมาฟอนต์ง่าย ๆ พิสูจน์แล้วว่าเป็นห้องสมุดที่มีประโยชน์มากสำหรับการสร้างต้นแบบอย่างรวดเร็ว ดังนั้นเราจึงย้ายไปที่ GitHub สำหรับทุกคนที่สนใจในการโฮสต์ห้องสมุดนี้หรือใช้ร่วมกับ fonts.google.com

ใช้แบบอักษรง่ายๆ

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

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

<!-- Or load specific font files
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/roboto.css" rel="stylesheet" />
-->

< div class =" font-roboto " >
    < div class =" font-open-sans w600i " >
        Stuff here appears in Open Sans, bold and italic
    </ div >
    < div class =" w600 " >
        Stuff here appears in Roboto, bold
    </ div >
    < div >
        Stuff here appears in Roboto and uses inherited weight and style
    </ div >
</ div >

:)

หากคุณใช้ fonts.css เบราว์เซอร์จะดาวน์โหลดเพียงไฟล์ตัวอักษรที่คุณใช้ใน HTML ของคุณและจะไม่เสียแบนด์วิดท์ของผู้ใช้โดยการโหลดแบบอักษรทั้งหมด ไฟล์ fonts.css นั้นมีเพียง 25 kb เมื่อโหลดจาก pagecdn Pagecdn ใช้ Brotli: 11 การบีบอัดเพื่อบีบอัดไฟล์อย่างแน่นหนาเพื่อให้ขนาดอยู่ในขีด จำกัด ที่ยอมรับได้

การนำเข้าแบบอักษร

ไดเรกทอรี dist มีไฟล์ CSS สำหรับแต่ละตระกูลตัวอักษรแต่ละตัวที่คุณสามารถเชื่อมโยงไปยังจาก HTML ของคุณ คุณสามารถดาวน์โหลดไลบรารีเพื่อเล่นกับตระกูลตัวอักษรแต่ละตัวหรือลิงก์ไปยังไฟล์ CSS โดยตรงจาก CDN ด้านล่างนี้เป็นลิงค์ไปยังครอบครัวแบบอักษร open sans สำหรับครอบครัวฟอนต์อื่น ๆ นี่คือเครื่องมือค้นหาที่มีประโยชน์ 

 < link href =" https://pagecdn.io/lib/easyfonts/open-sans.css " rel =" stylesheet " />

การนำเข้าฟอนต์ทั้งหมด

ในการทดสอบแบบอักษรที่แตกต่างกันอย่างรวดเร็วแบบอักษรง่ายทำให้ง่ายต่อการนำเข้าตระกูลฟอนต์ทั้งหมดในครั้งเดียว สำหรับสิ่งนี้คุณต้องใช้ไฟล์ dist/fonts.css หรือใช้ลิงก์ CDN ด้านล่าง 

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

ใช้กับ Google Fonts

เป็นไปได้ที่จะใช้แบบอักษรง่ายและ Google Fonts เข้าด้วยกัน นี่คือวิธีการทำ 

 < link href =" https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap " rel =" stylesheet " > 
< link href =" https://pagecdn.io/lib/easyfonts/classes.css " rel =" stylesheet " />

การนำเข้าแบบอักษรแบบไดนามิก

แบบอักษรง่ายให้ข้อมูลแบบอักษรในรูปแบบ JSON สำหรับครอบครัวแบบอักษรแต่ละตัว สิ่งนี้จะช่วยให้คุณสร้างอินเทอร์เฟซการเลือกแบบอักษรสำหรับธีมและผู้สร้างเว็บไซต์ JSON ตั้งอยู่ในไดเรกทอรี dist/info คุณสามารถโหลดข้อมูลสำหรับแบบอักษรแต่ละตัวหรือใช้ไฟล์ JSON แบบรวมทุกอย่างสำหรับคอลเลกชันฟอนต์ทั้งหมด

โหลดข้อมูลของแบบอักษรทั้งหมด 

 https://pagecdn.io/lib/easyfonts/info/fonts.json

โหลดข้อมูลของตระกูลตัวอักษรเดี่ยว 

 https://pagecdn.io/lib/easyfonts/info/open-sans.json

ใบอนุญาต

ไฟล์ FONT TTF ภายใน dist/fonts เป็นสำเนาที่ไม่ได้แก้ไขของไฟล์ TTF ใน Google Fonts GitHub Repo ที่คุณสามารถอ่านข้อมูลการออกใบอนุญาต ครอบครัวฟอนต์แต่ละครอบครัวมีไฟล์ใบอนุญาตของตัวเองใน dist/license ไฟล์ใบอนุญาตที่เกี่ยวข้องเชื่อมโยงจากไฟล์ CSS ทุกไฟล์ด้วยเพื่อช่วยให้คุณดูข้อมูลใบอนุญาตได้อย่างง่ายดาย

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

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