สร้างแพ็กเกจเว็บฟอนต์
เลือกฟอนต์ TTF, OTF, WOFF หรือ WOFF2 เพื่อสร้างไฟล์ WOFF2, CSS และ HTML สำหรับดูตัวอย่าง ก่อนนำไปใช้ในเว็บไซต์ ให้ตรวจสอบข้อความตัวอย่างและชื่อ น้ำหนัก สไตล์ รวมถึงการแสดงผลระหว่างโหลดใน CSS จากนั้นบันทึกแพ็กเกจเป็น ZIP เครื่องมือนี้ไม่ได้ทำการตัดชุดอักขระ
คุณทำอะไรได้
รวมไฟล์สำหรับเว็บ
สร้าง WOFF2, CSS และ HTML ตัวอย่างจาก TTF, OTF, WOFF หรือ WOFF2 คุณสามารถเลือกหลายฟอนต์พร้อมกันได้
ตรวจสอบอักขระและการตั้งค่า CSS
ตรวจสอบรูปลักษณ์ของฟอนต์ที่แปลงแล้ว คุณสามารถเปลี่ยนชื่อ น้ำหนัก สไตล์ที่ใช้บนเว็บ และการแสดงผลระหว่างโหลดได้ตามต้องการ
แชร์ชุดนี้เป็น ZIP
บันทึกโฟลเดอร์ฟอนต์, fonts.css และ preview.html เป็นชุดเดียวกัน โดยคงตำแหน่งสัมพัทธ์ไว้
วิธีใช้งาน
เลือกฟอนต์พร้อมกัน
เลือกฟอนต์ที่คุณสามารถใช้บนเว็บได้ หากใช้หลายฟอนต์ ให้เลือกพร้อมกัน
ตรวจสอบรูปลักษณ์และการตั้งค่าเว็บ
ป้อนข้อความเพื่อดูตัวอย่างและตรวจสอบแต่ละฟอนต์ หากต้องปรับชื่อ น้ำหนัก หรือตัวเลือกอื่นของฟอนต์นั้น ให้เปิดการตั้งค่า CSS ของฟอนต์
สร้างแพ็กเกจและบันทึก ZIP
คลิก “สร้างแพ็กเกจเว็บฟอนต์” แล้วบันทึก webfont-kit.zip ที่สร้างได้
แตกและเพิ่มลงหน้าเว็บ
แตกไฟล์โดยคงตำแหน่งของโฟลเดอร์ฟอนต์, fonts.css และ preview.html ไว้ โหลด CSS ในหน้าที่จะใช้ฟอนต์ และใช้ชื่อฟอนต์ที่ระบุ
มีประโยชน์เมื่อ
เตรียมเว็บไซต์เพื่อเผยแพร่
รวมฟอนต์ของคุณเป็นรูปแบบเว็บและ CSS เพื่อเตรียมไฟล์ที่จำเป็นสำหรับการนำไปใช้
ส่งมอบชุดที่สมบูรณ์ให้ทีมผลิต
รวมหลายฟอนต์ เช่น ปกติและตัวหนา พร้อมส่งมอบพร้อม HTML ที่มีข้อความสำหรับตรวจสอบ
ความสัมพันธ์ระหว่างฟอนต์กับ CSS
WOFF2 คือรูปแบบฟอนต์สำหรับเว็บ
เตรียม WOFF2 ที่มีตัวอักษรเดิม ไม่มีการตัดเฉพาะตัวอักษร ขนาดไฟล์จึงแตกต่างกันไปตามฟอนต์
ลงทะเบียนชื่อ น้ำหนัก และสไตล์ใน CSS
การตั้งค่าเหล่านี้กำหนดว่าสไตล์ใดที่ถูกขอจะใช้ฟอนต์นี้บนเว็บ ไม่ได้แปลงอักขระในฟอนต์ให้เป็นตัวหนาหรือตัวเอียง
แยกชื่อเดียวกันด้วยน้ำหนักและสไตล์
สไตล์ปกติและตัวหนาสามารถใช้ชื่อเดียวกันได้ แต่ชุดของชื่อ น้ำหนัก และสไตล์จะซ้ำกันไม่ได้
เลือกการแสดงผลระหว่างโหลด
โดยค่าเริ่มต้น ฟอนต์สำรองจะแสดงก่อนและจะสลับเมื่อฟอนต์พร้อมใช้งาน หากต้องการ คุณสามารถเปลี่ยนพฤติกรรมการรอและการสลับได้ในการตั้งค่า CSS
คงตำแหน่งสัมพัทธ์ของไฟล์ไว้
fonts.css อ้างอิงไฟล์เช่น fonts/font-1.woff2 หากคุณย้ายโฟลเดอร์หรือไฟล์ CSS ให้ปรับพาธการอ้างอิงให้ตรงกัน
คำถามที่พบบ่อย
ควรวางไฟล์ที่สร้างไว้ที่ใด
แตก ZIP แล้ววางโฟลเดอร์ฟอนต์, fonts.css และ preview.html โดยคงตำแหน่งสัมพัทธ์ไว้ โหลด fonts.css ในหน้าของคุณและใช้ชื่อฟอนต์ที่ระบุใน CSS
ต่างจากการแปลงรูปแบบเพียงอย่างไร
หน้าจอนี้รวม WOFF2 พร้อม CSS และ HTML ตัวอย่าง หากต้องการเปลี่ยนเฉพาะรูปแบบฟอนต์ ให้ใช้ “ตัวแปลงรูปแบบฟอนต์”
เก็บเฉพาะตัวอักษรที่ใช้ได้หรือไม่
หน้าจอนี้ไม่ได้ทำการตัดเฉพาะตัวอักษร แต่จะเตรียมฟอนต์ที่ยังคงตัวอักษรเดิมไว้
การเปลี่ยนน้ำหนักทำให้ตัวอักษรหนาขึ้นหรือไม่
การตั้งค่านี้ระบุค่าน้ำหนักที่ใช้ใน CSS ไม่ได้แก้ไขอักขระในไฟล์ฟอนต์ หากต้องการตัวหนาหรือตัวเอียง ให้ให้ไฟล์ที่มีอักขระเหล่านั้นอยู่
ใช้ไฟล์หลายไฟล์ที่มีชื่อฟอนต์เดียวกันได้หรือไม่
คุณสามารถลงทะเบียนไฟล์ที่มีน้ำหนักหรือสไตล์ต่างกันได้ หากชุดของชื่อ น้ำหนัก และสไตล์เดียวกันซ้ำกัน ให้ตรวจสอบการตั้งค่าที่เกี่ยวข้อง
จะเกิดอะไรขึ้นเมื่อฉันเลือกฟอนต์อีกครั้ง
ชุดฟอนต์ปัจจุบันและ ZIP ที่สร้างไว้จะถูกนำออก และจะโหลดชุดที่เลือกใหม่ เลือกไฟล์ใดก็ได้ที่ต้องการใช้ต่อคู่กับไฟล์ใหม่
จะเป็นอย่างไรหากตัวอักษรตัวอย่างแสดงไม่ครบ
ตัวอักษรที่ไม่มีในฟอนต์อาจแสดงด้วยฟอนต์อื่น ตรวจสอบตัวอักษรที่รองรับและรูปลักษณ์ของมันในตำแหน่งที่จะใช้ฟอนต์
จะเป็นอย่างไรหากโหลดฟอนต์ไม่ได้
เลือกฟอนต์ในรูปแบบที่รองรับอีกครั้ง หากมีไฟล์ใดในชุดที่แปลงหรือโหลดไม่ได้ ชุดที่สำเร็จเพียงบางส่วนจะไม่ถูกบันทึก
อินพุตและผลลัพธ์
- อินพุต
- TTF, OTF, WOFF และ WOFF2 คุณสามารถเลือกหลายไฟล์พร้อมกันได้
- เงื่อนไข
- ตรวจสอบเงื่อนไขการใช้งานของฟอนต์ที่ป้อนเข้า รวมถึงการฝังบนเว็บ
- การตั้งค่า
- ชื่อ น้ำหนัก สไตล์ และการแสดงผลระหว่างโหลดที่ใช้ใน CSS
- เอาต์พุต
- webfont-kit.zip รวม WOFF2, fonts.css และ preview.html