คู่มือการส่งออก

คำแนะนำครบถ้วนเกี่ยวกับขั้นตอนการส่งออกของ Bobcorn — จากการเลือกไอคอนไปจนถึงการสร้างไฟล์ฟอนต์พร้อมใช้งานจริง

การเปิดกล่องโต้ตอบการส่งออก

คลิกปุ่ม Export ในเมนู sidebar ด้านซ้าย กล่องโต้ตอบการส่งออกจะเปิดเป็น modal ที่ให้คุณกำหนดค่า output directory เลือกกลุ่มไอคอนที่จะรวม และเลือกรูปแบบ output และไฟล์เพิ่มเติม การตั้งค่าทั้งหมดจะถูกจดจำระหว่าง sessions ดังนั้นเมื่อคุณกำหนดค่าการส่งออกที่ต้องการแล้ว การส่งออกครั้งถัดไปเป็นเพียงคลิกเดียว

การเลือก Output Directory

ขั้นตอนแรกคือการเลือกที่บันทึกไฟล์ที่ส่งออก ค่าเริ่มต้น Bobcorn ใช้ Desktop ของคุณ คลิกปุ่มโฟลเดอร์ข้างๆ path เพื่อเลือกตำแหน่งอื่น

เคล็ดลับ
ส่งออกโดยตรงไปยัง directory fonts/ หรือ assets/ ของโปรเจกต์เพื่อหลีกเลี่ยงการคัดลอกไฟล์หลังการส่งออกทุกครั้ง มีประโยชน์อย่างยิ่งระหว่างการพัฒนาเมื่อคุณกำลัง iterate กับชุดไอคอน

การเลือกกลุ่มไอคอน

คุณสามารถเลือกกลุ่มไอคอนที่จะรวมในการส่งออก ค่าเริ่มต้นเลือกทุกกลุ่ม ยกเลิกการเลือกกลุ่มใดๆ ที่คุณไม่ต้องการในฟอนต์ — ตัวอย่างเช่น คุณอาจยกเว้นกลุ่ม "drafts" ที่มีไอคอนที่ยังไม่เสร็จ

แต่ละกลุ่มแสดงจำนวนไอคอนข้างๆ ชื่อ จำนวนไอคอนรวมที่ด้านล่างของรายการอัปเดตแบบ real-time เมื่อคุณเปิด/ปิดกลุ่ม ดังนั้นคุณจะรู้เสมอว่าฟอนต์ที่ส่งออกจะมี glyphs กี่ตัว

รูปแบบฟอนต์

Bobcorn สร้างฟอนต์ได้ห้ารูปแบบ เลือกรูปแบบที่ตรงกับความต้องการการรองรับเบราว์เซอร์ของโปรเจกต์:

รูปแบบค่าเริ่มต้นเมื่อไรควรเปิดใช้เรียนรู้เพิ่มเติม
.woff2 เปิดเสมอ เสมอ — รูปแบบเว็บที่จำเป็น WOFF2 →
.woff ตัวเลือก ต้องรองรับ IE 11 WOFF →
.ttf ตัวเลือก แอปเดสก์ท็อป การติดตั้งฟอนต์ OS TTF →
.svg ตัวเลือก การดีบัก iOS รุ่นเก่า SVG Font →
.eot ตัวเลือก รองรับ IE 6-8 เท่านั้น EOT →

WOFF2 รวมเสมอเพราะเป็นรูปแบบ web font ที่จำเป็น — ไม่มีสถานการณ์ที่คุณจะต้องการการส่งออก web font โดยไม่มีมัน รูปแบบอื่นทั้งหมดเป็น opt-in ตามความต้องการเฉพาะของคุณ

ไฟล์เพิ่มเติม

นอกจากไฟล์ฟอนต์เอง Bobcorn สามารถสร้างไฟล์เพิ่มเติมหลายไฟล์ที่ทำให้การรวมและการทำงานร่วมกันง่ายขึ้น:

CSS (icons.css)

มีการประกาศ @font-face และ CSS classes .icon-* สำหรับทุกไอคอนในชุด วางไฟล์นี้ในโปรเจกต์ของคุณและคุณพร้อมใช้ไอคอนด้วยชื่อ class ง่ายๆ ดู คู่มือ CSS @font-face สำหรับรายละเอียดเกี่ยวกับวิธีที่ CSS ที่สร้างทำงาน

JS (icons-symbol.js)

SVG symbol sprite ที่ลงทะเบียนไอคอนทั้งหมดเป็น inline SVG symbols เมื่อ script โหลด ใช้สิ่งนี้เมื่อต้องการไอคอนหลายสีหรือคุณสมบัติเฉพาะ SVG ควบคู่กับ font icons ดู คู่มือ SVG Symbol สำหรับรูปแบบการใช้งาน

HTML (demo.html)

หน้าตัวอย่าง interactive ที่แสดงไอคอนที่ส่งออกทั้งหมดพร้อมชื่อ ชื่อ CSS class และ Unicode code points เปิดในเบราว์เซอร์เพื่อดูชุดไอคอนทั้งหมด มีประโยชน์สำหรับนักออกแบบที่ตรวจสอบ icon library และนักพัฒนาที่ค้นหาชื่อ class ระหว่างการรวม

ICP (project.icp)

ไฟล์โปรเจกต์ของ Bobcorn ส่งออกสิ่งนี้เพื่อแบ่งปันโปรเจกต์ไอคอนกับเพื่อนร่วมทีมหรือเป็นการสำรองข้อมูล การเปิดไฟล์ ICP ใน Bobcorn จะกู้คืนสถานะโปรเจกต์ทั้งหมด — ไอคอน กลุ่ม metadata และการตั้งค่า — ตรงตามที่เป็นเมื่อส่งออก

การบรรจุ ZIP

เปิดใช้งานตัวเลือก ZIP เพื่อรวมไฟล์ที่ส่งออกทั้งหมดเป็น archive .zip เดียว มีประโยชน์เมื่อแบ่งปัน icon font กับเพื่อนร่วมทีม อัปโหลดไปยัง CDN หรือแนบกับเอกสาร design handoff ZIP มีโครงสร้าง directory เดียวกับการส่งออกแบบ loose — ไม่มีการซ้อนหรือจัดระเบียบใหม่

การกำหนดค่าที่แนะนำ

ต่อไปนี้คือ preset ที่ใช้งานได้จริงสามแบบสำหรับประเภทโปรเจกต์ทั่วไป:

โปรเจกต์เว็บสมัยใหม่

  • WOFF2 (เปิดเสมอ) + CSS + HTML demo
  • Footprint น้อยที่สุด ครอบคลุมเบราว์เซอร์ 97%+

โปรเจกต์รองรับทุกกรณี

  • WOFF2 + WOFF + CSS + HTML demo
  • ครอบคลุม IE 11+ และเบราว์เซอร์สมัยใหม่ทั้งหมด

Design system / component library

  • WOFF2 + TTF + CSS + JS symbol + HTML demo + ICP
  • Fonts สำหรับการใช้ CSS, TTF สำหรับเครื่องมือเดสก์ท็อป, JS symbols สำหรับ multi-color variants, ICP สำหรับสำรองโปรเจกต์
เคล็ดลับ
เริ่มต้นด้วย preset "โปรเจกต์เว็บสมัยใหม่" — WOFF2 + CSS เพิ่มรูปแบบเพิ่มเติมเฉพาะเมื่อ analytics เบราว์เซอร์หรือความต้องการของ platform ต้องการ รูปแบบเพิ่มเติมเพิ่มน้ำหนัก build โดยไม่เป็นประโยชน์กับผู้ใช้ที่เบราว์เซอร์รองรับ WOFF2 อยู่แล้ว

โครงสร้างไฟล์ Output

เมื่อเปิดใช้งานตัวเลือกทั้งหมด Bobcorn จะสร้างโครงสร้างไฟล์ดังต่อไปนี้:

Output ที่ส่งออก 
output/
├── MyIcons.woff2        # ไฟล์ฟอนต์
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + icon classes
├── MyIcons-symbol.js    # SVG symbol sprite
├── demo.html            # ตัวอย่าง interactive
└── MyIcons.icp          # สำรองโปรเจกต์

ชื่อ font family (เช่น "MyIcons") มาจากชื่อโปรเจกต์ของคุณใน Bobcorn ไฟล์ที่สร้างทั้งหมดใช้ชื่อนี้เป็น prefix เพื่อความสอดคล้อง

หลังการส่งออก

เมื่อ Bobcorn สร้างไฟล์ของคุณแล้ว ทำตามขั้นตอนเหล่านี้เพื่อรวม icon font เข้าในโปรเจกต์:

  1. คัดลอกไฟล์ฟอนต์ + CSS ไปยัง assets หรือ fonts directory ของโปรเจกต์
  2. เชื่อมต่อ CSS ใน HTML ของคุณ: <link rel="stylesheet" href="MyIcons.css">
  3. ใช้ไอคอน ทุกที่ใน markup ของคุณ: <i class="icon icon-home"></i>
  4. ตัวเลือก preload ไฟล์ WOFF2 สำหรับการ render เริ่มต้นที่เร็วกว่า

ต่อไปนี้คือตัวอย่างการรวมที่สมบูรณ์:

การรวมที่สมบูรณ์ 
<head>
  <link rel="preload" href="MyIcons.woff2" as="font"
        type="font/woff2" crossorigin>
  <link rel="stylesheet" href="MyIcons.css">
</head>
<body>
  <button><i class="icon icon-save"></i> บันทึก</button>
</body>

คำใบ้ rel="preload" บอกให้เบราว์เซอร์เริ่มดาวน์โหลดไฟล์ฟอนต์ก่อนที่จะพบ rule @font-face ใน CSS ซึ่งขจัดความล่าช้าระหว่างการ parse CSS และการดาวน์โหลดฟอนต์ ส่งผลให้ first-paint เร็วขึ้นพร้อมไอคอนที่มองเห็นได้ Attribute crossorigin จำเป็นสำหรับ font preloads แม้ฟอนต์จะอยู่ใน same-origin

เคล็ดลับ
เปิด demo.html ที่สร้างขึ้นในเบราว์เซอร์เพื่อดูไอคอนที่ส่งออกทั้งหมด คุณสามารถคลิกไอคอนใดก็ได้เพื่อคัดลอกชื่อ CSS class — มีประโยชน์ระหว่างการพัฒนาเมื่อต้องค้นหา class ที่แน่นอนสำหรับไอคอนเฉพาะ
ใน Bobcorn
กล่องโต้ตอบการส่งออกจดจำการตั้งค่าครั้งสุดท้ายของคุณ เมื่อกำหนดค่ารูปแบบ ไฟล์เพิ่มเติม และ output directory สำหรับโปรเจกต์แล้ว การส่งออกครั้งถัดไปทุกครั้งเป็นเพียงคลิกเดียว ถ้าคุณ iterate บ่อย ชี้ output directory ไปที่โฟลเดอร์ assets ของโปรเจกต์เพื่อการอัปเดตที่ไม่มีแรงเสียดทาน