นำเข้า SVG ใน FontForge: เปลี่ยนรูปวาดเป็นเส้นขอบอักขระ

หากต้องการนำเข้า SVG ใน FontForge ให้เปิดช่องอักขระที่ต้องการ เลือก File → Import เปลี่ยนรูปแบบเป็น SVG แล้วเลือกไฟล์ ผลลัพธ์คือเรขาคณิตเส้นขอบในหน้าต่างแก้ไขอักขระนั้น คุณยังต้องตรวจตำแหน่ง ขนาด เส้นขอบ และระยะห่างก่อนสร้างฟอนต์ที่ใช้งานได้

ความแตกต่างนี้สำคัญเมื่อต้นฉบับเป็นภาพวาด การลากเส้นกู้คืนรูปทรงจากพิกเซลได้ แต่กำหนดเส้นฐาน ความกว้างเดินหน้า หรือจังหวะระยะห่างของแบบอักษรที่ตั้งใจไว้ไม่ได้ เริ่มด้วยอักขระหนึ่งตัวและตรวจให้เสร็จก่อนนำเข้าทั้งชุดตัวอักษร

นำเข้าในช่องอักขระ ไม่ใช่เพียงหน้าต่างฟอนต์ที่เปิดอยู่

สร้างเอกสาร FontForge ใหม่หรือเปิดฟอนต์ที่กำลังทำงาน แล้วดับเบิลคลิกช่องอักขระที่ต้องการแก้ไข นำเข้า SVG จาก File → Import ภายในหน้าต่างเส้นขอบนั้น หากหน้าต่างเลือกไฟล์แสดงรูปแบบบิตแมปก่อน ให้เปลี่ยนตัวกรองเป็น SVG นี่คือลำดับใน บทสอนนำเข้าเส้นขอบของ FontForge

ตรวจปลายทางก่อน หากกำลังเพิ่ม g ตัวพิมพ์เล็กที่ออกแบบเอง ให้ยืนยันว่ากำลังแก้ช่อง g ที่ต้องการ ชื่อไฟล์ g.svg ใช้แทนการตรวจอักขระและการจับคู่รหัสไม่ได้ บันทึกสำเนาฟอนต์ที่มีอยู่ก่อนแทนที่เส้นขอบใด ๆ

หลังนำเข้า ให้เลือกจุดหนึ่งและยืนยันว่ามีเส้นขอบที่แก้ไขได้ หากมีเพียงภาพที่ใช้เป็นต้นฉบับอ้างอิงสำหรับลากเส้น ยังไม่ใช่ผลลัพธ์เดียวกัน เอกสารเมนู File ของ FontForge แยกการนำเข้าภาพ เส้นขอบอักขระ และการดำเนินการกับไฟล์ฟอนต์

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

ใช้เวกเตอร์ต้นฉบับเมื่อมี

หากวาดอักขระในตัวแก้ไขเวกเตอร์ ให้เตรียมงานนั้นโดยตรง เก็บเส้นขอบเดิม สร้างสำเนาสำหรับนำเข้าแยก และลดความซับซ้อนของคุณสมบัติการแสดงผลที่ไม่รองรับในสำเนานั้น การลากเส้นจากภาพของเวกเตอร์ที่มีอยู่ใหม่อาจเปลี่ยนรูปทรงที่คุณควบคุมได้อยู่แล้ว

หากต้นฉบับเป็นภาพวาดแรสเตอร์หรือสัญลักษณ์ที่สร้างขึ้น ให้ แปลงภาพเป็นพาธเวกเตอร์ ด้วย PerfectVector แล้วตรวจ SVG ซึ่งให้เส้นขอบเริ่มต้นสำหรับแก้ไข ส่วน FontForge ยังคงเป็นที่สร้างเมตริก ระยะห่าง และพฤติกรรมฟอนต์ของอักขระ

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

ตัวอักษรที่ลากเส้นยังเป็นเรขาคณิตงานกราฟิก

เราเตรียมภาพแรสเตอร์ g ตัวพิมพ์เล็กที่ออกแบบขึ้นใหม่ มีช่องภายในกว้างหนึ่งช่องและส่วนหางใต้เส้นฐานชัดเจน แล้วแปลงผ่าน PerfectVector SVG ดิบมีพาธปิดสามพาธ ได้แก่ พื้นหลังผืนภาพเกือบขาว รูปร่างตัวอักษรสีดำ และรูปทรงช่องภายในเกือบขาว ไม่มีภาพฝังอยู่

ช่องสีขาวถูกวาดทับบนรูปร่างสีดำ ยังไม่ได้เป็นเส้นขอบภายในของอักขระฟอนต์สำเร็จ การลบรูปทรงขาวเพียงอย่างเดียวจะเผยสีดำทึบด้านล่าง ในสำเนาสำหรับนำเข้า ให้ลบพื้นหลังที่ตรวจยืนยันแล้วและทำช่องภายในให้เป็นช่องเปิดจริงก่อนประเมินสีเติมของอักขระ

ภาพเปรียบเทียบแสดงหลักฐานเส้นขอบที่เราตรวจ ไม่ใช่การทดสอบ FontForge เราไม่ได้กำหนดเส้นฐาน ขนาด em ความกว้างเดินหน้า หรือเคอร์นิงให้ผลลัพธ์นี้ ส่วนหางที่ดูสะอาดบอกว่าภาพวาดยื่นไปถึงไหน แต่ไม่ได้บอกฟอนต์ว่าควรวางเส้นฐานตรงไหน

เตรียมเส้นขอบชัดเจนก่อนปรับเมตริก

เก็บ SVG ที่ยังไม่แก้ไขและสำเนาสำหรับทำงานแยกกัน ในสำเนา ให้ลบรูปทรงพื้นหลังที่ไม่เกี่ยวข้อง ขยายเส้นขีดเป็นรูปทรงเมื่อความหนาที่มองเห็นเป็นตัวกำหนดอักขระ และแปลงมาสก์หรือเอฟเฟกต์ที่ตัดภาพให้เป็นรูปทรงที่ตั้งใจเก็บ FontForge นำเข้า SVG ได้บางส่วนตามที่ เอกสารอ้างอิงการนำเข้า อธิบาย

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

หลังนำเข้ากราฟิกที่เตรียมแล้ว ให้ตรวจปลายเปิด ส่วนซ้อนทับโดยไม่ตั้งใจ และเส้นขอบที่ตัดกันเอง Element → Correct Direction กำหนดทิศทางสลับกันให้เส้นขอบนอกและเส้นขอบซ้อนภายใน แต่อาจให้ผลผิดคาดเมื่อเส้นโค้งตัดกัน แก้จุดตัดก่อนเชื่อผลคำสั่ง FontForge ระบุข้อจำกัดนี้ไว้ใน เอกสารอ้างอิงเมนู Element

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

จัดเส้นฐานก่อนตัดสินความสูง

กราฟิกที่นำเข้าอาจเล็กเกิน ใหญ่เกิน หรือเยื้องจากจุดกำเนิดที่ต้องการ เลือกจุดทั้งหมดของอักขระแล้วย้ายหรือปรับขนาดพร้อมกัน บทสอนนำเข้าของ FontForge อธิบายการย้ายเส้นขอบเข้าตำแหน่งและใช้ Element → Transform → Transform ปรับขนาดเท่ากันทุกทิศทาง

สำหรับ g ตัวพิมพ์เล็ก อย่าจัดจุดต่ำสุดให้ตรงเส้นฐาน เพราะจุดนั้นเป็นส่วนหางใต้เส้นฐาน จัดลำตัวอักษรสัมพันธ์กับเส้นฐานและความสูง x ที่ต้องการ โดยให้หางอยู่ด้านล่าง เปรียบเทียบกับอักขระพิมพ์เล็กข้างเคียงในแบบเดียวกันหากมีแล้ว

ใช้ระบบพิกัดต้นฉบับที่สอดคล้องกันเมื่อเตรียมตัวอักษรเพิ่ม บทสอน FontForge ยกขั้นตอนที่ใช้ 1,000 หน่วย ส่วน คู่มือนำเข้าของ Design With FontForge อธิบายความสัมพันธ์ระหว่างพิกัดแนวตั้งของ SVG กับระยะเหนือและใต้เส้นฐาน ให้ถือว่าเป็นคำแนะนำการตั้งค่าร่วมกัน ไม่ใช่กฎให้ยืด SVG ทุกไฟล์ที่มีอยู่ให้เป็นสี่เหลี่ยมจัตุรัส

ฟอนต์ที่มีจำนวนหน่วยต่อ em ต่างกันต้องมีแผนที่ตรงกัน เช่นเดียวกัน การครอปแต่ละตัวอักษรชิดขอบลงหน้า SVG ที่สูงต่างกันอาจทิ้งจุดอ้างอิงร่วมที่ต้องใช้จัดตำแหน่งให้สม่ำเสมอ กำหนดจุดอ้างอิงนั้นด้วยอักขระหนึ่งหรือสองตัวก่อนทำส่วนที่เหลือ

กำหนดระยะห่างในบริบท

ความกว้างตัวอักษรที่เห็นกับความกว้างเดินหน้าเป็นคนละค่า ความกว้างเดินหน้าบอกตัวอักษรถัดไปว่าต้องเริ่มตรงไหน ส่วนพื้นที่ว่างรอบเส้นขอบมีส่วนกำหนดจังหวะของคำ

เปิดหน้าต่าง Metrics จากเมนู Window แล้วตรวจอักขระข้างตัวอักษรอื่น บทสอนเมตริกของ FontForge อธิบายการเปลี่ยนระยะขอบด้านซ้ายด้วยการย้ายเส้นขอบ และระยะขอบด้านขวาผ่านเส้นความกว้างเดินหน้า

สำหรับ g ตัวแรก ให้เปรียบเทียบตัวซ้ำและชุดสั้นร่วมกับอักขระที่วาดแล้ว เช่น gg, ng และ go ดูช่องว่างแทนที่จะดูเฉพาะเส้นขอบ อย่าใช้เคอร์นิงชดเชยระยะขอบเริ่มต้นที่เลือกไม่เหมาะทุกกรณี ให้กำหนดระยะที่สมเหตุสมผลสำหรับตัวข้างเคียงทั่วไปก่อน แล้วจึงจัดการคู่พิเศษ

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

ตรวจสอบและสร้างฟอนต์ทดลอง

บันทึกโครงการ FontForge ที่แก้ไขได้ก่อนสร้างไฟล์ฟอนต์ Save เก็บต้นฉบับสำหรับทำงาน ส่วน Generate Fonts สร้างรูปแบบฟอนต์ เช่น TrueType หรือ OpenType บทสอนการตรวจและสร้างฟอนต์ อธิบายความแยกกันนี้

ใช้ Element → Find Problems กับอักขระที่เตรียมแล้ว ตรวจปัญหาที่รายงานแทนการยอมรับทุกการเปลี่ยนแปลงที่แนะนำอัตโนมัติ เพราะ FontForge ระบุว่าบางสิ่งที่พบอาจเป็นการออกแบบที่ตั้งใจไว้ จากนั้นตรวจอักขระด้วยสายตาอีกครั้ง

สร้างฟอนต์ทดลองแล้วลองในโปรแกรมที่ตั้งใจใช้ ตรวจการจับคู่รหัสอักขระ ช่องภายใน เส้นฐาน ระยะเผื่อส่วนหาง และระยะห่างทั้งขนาดข้อความเล็กและใหญ่ หากฟอนต์ยังเป็นต้นแบบเล็ก ให้ระบุขอบเขตการทดสอบนั้นชัดเจน การนำเข้าเส้นขอบหนึ่งตัวสำเร็จไม่ได้ยืนยันว่าแบบอักษรทั้งชุดเสร็จแล้ว

คำถามที่พบบ่อย

ทำไม SVG มีขนาดหรือตำแหน่งผิดใน FontForge? พิกัดต้นฉบับและมิติหน้าอาจไม่ตรงกับการตั้งค่า em และเส้นฐานของฟอนต์ ย้ายและปรับขนาดเส้นขอบที่นำเข้าอย่างสม่ำเสมอ แล้วกำหนดแผนพิกัดร่วมก่อนเตรียมอักขระเพิ่ม

PerfectVector เปลี่ยนภาพวาดเป็นฟอนต์สำเร็จได้หรือไม่? PerfectVector แปลงกราฟิกแรสเตอร์เป็นพาธเวกเตอร์ คุณยังต้องใช้ตัวแก้ไขฟอนต์เตรียมเส้นขอบอักขระ การจับคู่รหัส เมตริก ระยะห่าง และไฟล์ฟอนต์ที่สร้าง

ทำไมช่องภายในตัวอักษรถูกเติมเต็ม? ตรวจว่าช่องที่เห็นเป็นวัตถุสีขาวซ้อนทับหรือไม่ มีเส้นขอบด้านในหรือไม่ และทิศทางเส้นขอบหรือจุดตัดต้องแก้หรือไม่ ตรวจสีเติมของอักขระที่เตรียมแล้ว แทนการอาศัยรูปลักษณ์ SVG ต้นฉบับบนหน้าสีขาว

ควรนำเข้าตัวอักษร SVG ทั้งหมดพร้อมกันหรือไม่? ทำอักขระตัวแทนหนึ่งตัวให้เสร็จก่อน ยืนยันขนาด เส้นฐาน เส้นขอบ และระยะห่าง แล้วใช้วิธีเตรียมที่สอดคล้องกันกับตัวที่เหลือ การนำเข้าเป็นชุดกำหนดค่าการออกแบบเหล่านั้นแทนคุณไม่ได้

แหล่งข้อมูล

1. บทสอนนำเข้าเส้นขอบของ FontForge — การนำเข้าในช่องอักขระ ตำแหน่ง การปรับขนาดเท่ากัน และมิติต้นฉบับที่ตั้งค่าร่วมกัน
2. เมนู File ของ FontForge — ประเภทนำเข้า การรองรับ SVG และการดำเนินการกับไฟล์ต้นฉบับเทียบกับไฟล์ฟอนต์
3. เมนู Element ของ FontForge — การแก้ทิศทางเส้นขอบและข้อจำกัดเมื่อมีจุดตัด
4. Design With FontForge: การนำเข้าอักขระ — การตั้งค่าพิกัด SVG และระยะเหนือกับใต้เส้นฐาน
5. บทสอนเมตริกของ FontForge — ระยะขอบ ความกว้างเดินหน้า ระยะห่างในบริบท และเคอร์นิง
6. บทสอนการตรวจและสร้างฟอนต์ของ FontForge — การตรวจปัญหาและสร้างรูปแบบฟอนต์ที่ใช้งานได้

หากอักขระตัวแรกมีเพียงพิกเซล ให้ แปลงภาพวาดเป็นเวกเตอร์ที่แก้ไขได้ ตรวจช่องภายในและเส้นขอบนอก แล้วทำอักขระตัวนั้นให้เสร็จใน FontForge เส้นขอบที่วางถูกตำแหน่ง มีระยะห่างเหมาะสม และผ่านการทดสอบเป็นจุดเริ่มต้นที่มีประโยชน์สำหรับฟอนต์ส่วนที่เหลือ