font template
1.0.0
เทมเพลตแบบอักษร Adobe Illustrator ที่อนุญาตให้คุณแก้ไขรูปร่างของ glyphs (อักขระ) ทั้งหมดในไฟล์ .ai หนึ่งไฟล์ (หรือในไฟล์ .ai แยกต่างหากหากคุณต้องการ) จาก .otf ส่งออกไฟล์ .svg ซึ่งสามารถนำ .ttf ไฟล์แบบอักษร .woff .woff2
บทช่วยสอนเวอร์ชันที่สวยงามบนเว็บไซต์ของฉัน
font_template.ai (ดาวน์โหลด): Adobe Illustrator Font แม่แบบสำหรับสัญลักษณ์พื้นฐานและเพิ่มเติมและตัวอักษรละติน (การครอบคลุม CP1252 ที่สำคัญ) แต่ละสัญลักษณ์นั้นมี artboard แยกต่างหากเพื่อให้คุณสามารถส่งออกแต่ละไฟล์เป็นไฟล์ Glyph SVG ของแต่ละบุคคลได้อย่างง่ายดายfont_template_single.ai (ดาวน์โหลด): Adobe Illustrator Font Template สำหรับ Glyph เดียว หากคุณต้องการคุณสามารถใช้ไฟล์นี้แทน (หรือพร้อม) font_template.aibatch_import_svg.py (เปิดจาก .otf ctrl + s / cmd + s เพื่อบันทึก): สคริปต์ python ที่สามารถนำเข้าไฟล์ glyph แต่ละตัว SVG หลายตัวลงในไฟล์ตัว .ttf .woff2 .sfd .woff Fontforge (แทนที่จะดาวน์โหลดไฟล์คุณอาจ git clone https://github.com/tomchen/font-template.git หรือดาวน์โหลดที่เก็บทั้งหมด)
( ตรวจสอบให้แน่ใจว่าคุณใช้ Fontforge เวอร์ชันล่าสุดซึ่งเป็นรุ่นครบรอบ 20 ปี (2020-11-07) (หน้าปล่อย GitHub หรือหน้าดาวน์โหลด fontforge.org) Old Windows เวอร์ชัน 20200314 ล่มเมื่อนำเข้าไฟล์ SVG )
เปิด font_template.ai วาดร่ายมนตร์ของคุณในเลเยอร์ "Artwork Glyph"
(ไม่สำคัญว่าร่ายมนตร์ของคุณจะอยู่นอกศิลปะบางส่วนและเล็กน้อย) หรือไม่)
หลังจากเสร็จสิ้นการวาดร่ายมนตร์ให้ซ่อนเลเยอร์ "ตัวอย่าง glyph" คลิก "ไฟล์" -> "ส่งออก" -> "ส่งออกสำหรับหน้าจอ"
เลือกสัญลักษณ์ที่คุณต้องการส่งออก (อย่าเลือกรูปแบบที่ว่างเปล่า) เลือกรูปแบบ "SVG" คลิก "Export Artboard"
ไฟล์ Glyph SVG ที่ส่งออกแต่ละรายการอยู่ในโฟลเดอร์ "SVG" ใส่ไว้ในโฟลเดอร์ที่มีไฟล์สคริปต์ batch_import_svg.py
สำหรับผู้ใช้ Windows Run C:Program Files (x86)FontForgeBuildsfontforge-console.bat ,* นำทางไปยังโฟลเดอร์โดยใช้ cd <FOLDER_PATH> และเรียกใช้สคริปต์ Python โดยใช้ ffpython batch_import_svg.py ไฟล์ตัวอักษร output.sfd จะถูกสร้างขึ้น
สำหรับผู้ใช้ Mac หรือ Linux, cd <FOLDER_PATH> และดำเนินการ fontforge -lang=py -script batch_import_svg.py
(*: สำหรับ 64 บิต windows Program Files (x86) สำหรับ 32 บิต windows Program Files )
เปิดไฟล์ output.sfd ด้วย FontForge ปรับความกว้างของ Glyphs (ใช้ปุ่ม Shift เพื่อเลือกร่ายมนตร์ทั้งหมดที่คุณต้องการปรับความกว้างจากนั้นในเมนูให้เลือก "ตัวชี้วัด" -> "ความกว้างอัตโนมัติ" หรือดับเบิลคลิก Glyph และลากเส้นขอบด้วยตนเอง)
ในเมนูเลือก "ไฟล์" -> "สร้างแบบอักษร ... "
พิมพ์ชื่อตัวอักษรเลือกรูปแบบตัวอักษร (โดยทั่วไปจะเป็น truetype หรือ opentype) คลิกปุ่ม "สร้าง" จากนั้นคุณมีแบบอักษรคอมพิวเตอร์ที่ทำเอง!
คุณสามารถหยุดที่นี่และไม่จำเป็นต้องอ่านส่วนต่อไปนี้
เทมเพลตตัวอักษรนี้สามารถใช้ในการวาด glyph เดี่ยวและผลิต Glyph SVG เดี่ยว
ภาพต่อไปนี้แสดงให้เห็นถึงมัคคุเทศก์ของสัญลักษณ์เดียว
ใน Fontforge เลือก Glyph หรือเปิด Glyph จากนั้นคลิก "ไฟล์" -> "นำเข้า ... " เลือก "SVG" เป็น "รูปแบบ" เลือกไฟล์ Glyph SVG เดียวของคุณและนำเข้า
แก้ไขไฟล์ batch_import_svg.py หากคุณต้องการเปิดไฟล์ FONT .sfd ที่มีอยู่หรือสร้าง .otf , .ttf , .woff , .woff2 โดยตรงแทนที่จะทำเช่นนั้นกับ FontForge GUI
ในเมนู FontForge คลิก "ไฟล์" -> "เรียกใช้สคริปต์"
คัดลอกและวาง: SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
เลือกปุ่มเรเดียล "FF"
คลิกปุ่ม "ตกลง"
หากรูปร่างของ Glyph มีเส้นทางที่ทับซ้อนกันหลายเส้นทางมันจะเป็นการดีกว่าที่จะเข้าร่วม (การสอน YouTube ที่ดี) แทนที่จะจัดกลุ่มหรือทำให้พวกเขาเป็นเส้นทางผสม ขั้นตอนนี้ช่วยหลีกเลี่ยงปัญหาการแสดงผลแบบอักษรสำหรับเส้นทางที่ทับซ้อนกัน อย่างไรก็ตามสำหรับเส้นทางแยก (ไม่ทับซ้อน) อย่าลังเลที่จะใช้ "กลุ่ม" ( Ctrl + G ) หรือ "เส้นทางผสม" ("วัตถุ" -> "เส้นทางผสม" -> "Make")
แทนที่จะสร้างไฟล์ฟอนต์ที่มี Fontforge จาก Scrach บางครั้งก็เป็นความคิดที่ดีที่จะใช้ไฟล์ตัวอักษรฟรีและโอเพนซอร์ซที่มีอยู่เป็นแบบอักษรฐานและทางเลือก แบบอักษรโอเพ่นซอร์สทั่วไปที่มีการครอบคลุม Glyph ที่ดีคือแหล่งที่มาของ Adobe Sans Pro และ Source Serif Pro เลือกน้ำหนักเช่น "ปกติ" ขึ้นอยู่กับความต้องการของคุณ เปิดไฟล์ Font ด้วย FontForge แก้ไขเพื่อสร้างแบบอักษรของคุณ อย่างไรก็ตามหากคุณใช้แบบอักษรที่มีอยู่คุณอาจต้องแก้ไขไม่เพียง แต่ AZ, AZ แต่ยังรวมถึง ligatures เช่น "FF" และ "FI"
เมื่อคุณเลือกร่ายมนตร์ในหน้าต่าง "ส่งออกสำหรับหน้าจอ" ของ Illustrator คุณไม่ควรเลือกร่ายมนตร์ว่างเปล่ามิฉะนั้นคุณจะเห็น "ฉันขอโทษไฟล์นี้ซับซ้อนเกินไปที่ฉันจะเข้าใจ (หรือผิดพลาด)" คำเตือนเมื่อคุณเรียกใช้ batch_import_svg.py อย่างไรก็ตามมันจะไม่หยุดและจะยังคงสร้างไฟล์ output.sfd
เมื่อวันที่ 19 สิงหาคม 2563 ไฟล์ font_template.ai ของโครงการได้รับการอัปเดต (มีการเปลี่ยนชื่อ artboard จำนวนมากเช่น 44 , เปลี่ยนเป็น 44 comma ) เพื่อแก้ไขปัญหาชื่อไฟล์ Unicode หากคุณดาวน์โหลด font_template.ai ก่อนปี 2020-08-19 และสร้างไฟล์ .ai ของคุณตามเวอร์ชันเก่าคุณอาจเลือก ** อัปเดตชื่อ artboard ใน font_template.ai โดยใช้วิธี ใดวิธีหนึ่ง ต่อไปนี้:
.ai เก่าของคุณไปยัง font_template.ai ล่าสุด/other_files/update_artboard_names.js ใน Illustrator: เปิดไฟล์ .ai ของคุณใน Adobe Illustrator ในเมนูคลิก "ไฟล์" -> "สคริปต์" -> "สคริปต์อื่น ๆ ... " ค้นหาและเลือกไฟล์ update_artboard_names.js ที่ดาวน์โหลด หลังจากการอัปเดตให้ลบและสร้างไฟล์ Glyph SVG ของคุณในโฟลเดอร์ SVG
(**: หากคุณใช้เวอร์ชันเก่า แต่ร่ายมนตร์ของคุณถูก จำกัด ไว้ที่อักขระ ASCII พื้นฐานดังนั้นจะไม่พบปัญหาที่เกี่ยวข้องกับชื่อไฟล์ SVG Unicode ใด ๆ คุณอาจเลือกที่จะไม่อัปเดตไฟล์ .ai ของคุณ)
เมื่อคุณมีแบบอักษรของคุณเองคุณสามารถใช้มันบนหน้าเว็บของคุณ (รวมถึงเว็บไซต์แอปพลิเคชันเว็บแอปพลิเคชันเดสก์ท็อปแบบข้ามแผ่นอิเล็กตรอนที่รวบรวมได้
แบบอักษรของคุณอาจเป็นแบบอักษรตัวอักษรหรือแบบอักษรโมโนโครมไอคอน หากคุณต้องการแสดงไอคอนสีให้ใช้ SVG หรือ PNG
ใส่ไฟล์ .woff2 และ .woff font ของคุณ ( my_font.woff2 และ my_font.woff ในตัวอย่าง) ในโฟลเดอร์ CSS ของคุณและแทรกรหัสต่อไปนี้ในไฟล์ CSS ของคุณ (รองรับ IE9+):
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} (หากคุณไม่ต้องการสนับสนุน IE ใด ๆ คุณสามารถลบไฟล์ .woff และใช้เท่านั้น .woff2 (รูปแบบที่เล็กที่สุดและล่าสุด))
จากนั้นใช้ชื่อ font-family ที่คุณกำหนดเอง ('myFont' ในตัวอย่าง):
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}html:
< span class =" my-special-font " > B </ span > หากเป็นแบบอักษรไอคอนโมโนโครมตัวอักษร B ในรหัส HTML จะแสดงเป็นการทำแผนที่ไอคอนโมโนโครมกับตัวอักษร B แม้ว่านักพัฒนาเว็บมักจะใช้ตัวละครในพื้นที่ใช้งานส่วนตัวของ Unicode เช่น U+EEA0 และ U+F2BB แทนตัวอักษรละติน เพื่อแก้ไขข้อกังวลเหล่านั้นคุณอาจระบุไอคอนแบบอักษรโดยการเพิ่ม role และแอตทริบิวต์ aria-label ลงในองค์ประกอบ HTML ของคุณ:
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > ใบอนุญาต MIT สำหรับทุกสิ่งในที่เก็บนี้
