แปลงฟอนต์ TTF เป็น SVG

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

หรือลากไฟล์ TTF, OTF, WOFF … มาวางที่นี่ ·

สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที

ผลลัพธ์

แปลงเป็น

ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที

อักขระ

อักขระที่เก็บไว้

การลบชุดอักษรที่ไม่ได้ใช้สามารถลดเว็บฟอนต์จากหลายร้อย KB ให้เหลือต่ำกว่า 30 KB สำหรับฟอนต์ที่ติดตั้งบนคอมพิวเตอร์ควรเก็บอักขระไว้ทั้งหมด

การแสดงผลและเว็บ

ชื่อฟอนต์

ชื่อตระกูลฟอนต์

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

ชื่อสไตล์

เช่น Regular, Bold, Italic เว้นว่างไว้เพื่อคงชื่อสไตล์เดิม

วิธีใช้เครื่องมือนี้

1
อัปโหลดไฟล์ TTF
เพิ่มไฟล์ .ttf ตั้งแต่หนึ่งไฟล์ขึ้นไป สูงสุด 20 ไฟล์ต่อชุด และไฟล์ละไม่เกิน 95 MB รองรับทั้งฟอนต์ไอคอนและฟอนต์ข้อความ
2
เลือกเอาต์พุตเป็นฟอนต์ SVG ตามเดิม
แปลงเป็น ตั้งไว้ที่ SVG font ฮินติงใช้กับเอาต์พุต SVG ไม่ได้ ตัวเลือกนี้จึงหายไป ส่วน ชื่อตระกูลฟอนต์ ใน การตั้งค่าขั้นสูง ยังใช้เปลี่ยนชื่อฟอนต์ได้
3
แปลงเป็น SVG
กด แปลงเป็น SVG แล้วดาวน์โหลดไฟล์ .svg เปิดด้วยโปรแกรมแก้ไขข้อความ Inkscape หรือ FontForge เพื่อเข้าถึงเส้นพาธของกลีฟ

แปลง TTF เป็น SVG แล้วจะได้อะไร

ไฟล์ฟอนต์ SVG ที่เก็บเส้นขอบของแต่ละตัวอักษรเป็นข้อมูลพาธ SVG เลือกแบบนี้เมื่อต้องการ:

1เส้นขอบกลีฟสำหรับนำเข้าเครื่องมือฟอนต์ไอคอนหรือ SVG Font Editor ของ Inkscape
2ไฟล์ .svg ในชุดเว็บฟอนต์รุ่นเก่าสำหรับเบราว์เซอร์ iPhone รุ่นแรก ๆ
3ข้อมูลเวกเตอร์ที่อ่านได้ของทุกตัวอักษร เช่น เพื่อดึงไอคอนเดียว

ฟอนต์ SVG กับรูปภาพ SVG ของข้อความต่างกันอย่างไร

เมื่อค้นหา TTF เป็น SVG จะพบเป้าหมายสองแบบปะปนกัน แบบแรกคือฟอนต์ SVG ซึ่งเป็นฟอร์แมตฟอนต์ที่กำหนดไว้ใน SVG 1.0 Recommendation ของ W3C ปี 2001 โดยองค์ประกอบ <font> มี <glyph> ต่อหนึ่งตัวอักษร พร้อมค่ายูนิโค้ด ความกว้างเลื่อน และเส้นขอบเป็นพาธ อีกแบบคือภาพ SVG ของข้อความ เช่นตัวอักษรของโลโก้หรือชื่อที่จัดเรียงเป็นบรรทัดแล้วบันทึกเป็นรูปร่าง ตัวแปลงนี้สร้างแบบแรก หากสิ่งที่คุณมีคือภาพโลโก้ ไม่ใช่ฟอนต์ ให้ใช้ PNG เป็น SVG เพื่อแปลงเป็นพาธ

การแปลงเส้นขอบ TrueType เป็นข้อมูลพาธ SVG ไม่ทำให้รูปทรงสูญเสีย เพราะพาธ SVG รองรับเส้นโค้งกำลังสองแบบเดียวกับที่ TrueType ใช้ แต่ละคอนทัวร์จึงถูกเขียนตามเดิม สิ่งที่ไม่คงอยู่คือทุกอย่างรอบเส้นขอบ ได้แก่คำสั่งฮินติง ฟีเจอร์ OpenType ที่เกินกว่าเคิร์นนิงพื้นฐาน และตารางไบนารีที่ระบบปฏิบัติการต้องใช้เพื่อติดตั้งฟอนต์ ฟอนต์ SVG ติดตั้งบน Windows หรือ macOS ไม่ได้

ไฟล์ฟอนต์ SVG มีหน้าตาอย่างไร

ตัวอย่างโค้ดในฟอนต์ SVG แบบย่อ

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- ฟอนต์ SVG เก็บรูปอักขระแต่ละตัวเป็นพาธ -->
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="Brand Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

สิ่งที่หน้านี้สร้าง: หนึ่งไฟล์ หนึ่ง <glyph> ต่อตัวอักษร ในหน่วยฟอนต์ โดยแกน y ชี้ขึ้น

เปิดได้ใน FontForge, Inkscape และเครื่องมือฟอนต์ไอคอน
ติดตั้งบนคอมพิวเตอร์ไม่ได้
Chrome, Edge และ Firefox ปัจจุบันไม่โหลด

OTF หรือ TTF ปกติที่มีตาราง SVG เพิ่มเติม เก็บกลีฟสีแบบหลายชั้น

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

ฟอนต์ SVG มีที่มาอย่างไรและเหตุใดจึงเลิกใช้

SVG 1.0 กำหนดองค์ประกอบ font: 2001
Safari บน iPhone รุ่นสุดท้ายที่ต้องใช้เว็บฟอนต์ SVG: iOS 4.1
ถอดฟอนต์ SVG ออกในปี 2014: Chrome 38
ตัดบทว่าด้วยฟอนต์ออก: SVG 2

TTF

ฟอนต์ TrueType

TTF เป็นรูปแบบฟอนต์ TrueType ที่ Apple พัฒนาขึ้นในช่วงปลายทศวรรษ 1980 และเปิดตัวในปี 1991 จากนั้นจึงให้สิทธิ์แก่ Microsoft นิยามโครงร่างของตัวอักษรด้วยเส้นโค้งกำลังสอง (quadratic) และมีคำสั่ง hinting ที่ช่วยให้ข้อความดูคมชัดบนหน้าจอ TrueType ได้รับการรองรับในทุกระบบปฏิบัติการเดสก์ท็อป โปรแกรมประมวลผลคำ และแอปออกแบบ แต่ขาดฟีเจอร์ตัวอักษรขั้นสูงบางอย่างของ OpenType และมีขนาดใหญ่กว่ารูปแบบเว็บฟอนต์

การบีบอัด: แบบไม่สูญเสียข้อมูล
พื้นหลังโปร่งใส: –
ภาพเคลื่อนไหว: –
เปิดตัว: 1991 · Apple

ตัวแปลงไฟล์ TTF

SVG

Scalable Vector Graphics

SVG เป็นรูปแบบเวกเตอร์ที่อิงกับ XML ซึ่ง W3C กำหนดเป็นมาตรฐานในปี 2001 แทนที่จะใช้พิกเซล จะอธิบายรูปทรง เส้นพาธ และข้อความ จึงคมชัดในทุกขนาด และมักมีขนาดเล็กมากสำหรับโลโก้และไอคอน รองรับพื้นหลังโปร่งใส การจัดสไตล์ด้วย CSS สคริปต์ และภาพเคลื่อนไหว และเบราว์เซอร์ทุกตัวแสดงผลได้โดยตรง SVG ไม่เหมาะกับภาพถ่าย และภาพประกอบที่ซับซ้อนอาจแสดงผลช้า Illustrator, Inkscape, Figma และเบราว์เซอร์เปิดและแก้ไขไฟล์นี้ได้

การบีบอัด: –
พื้นหลังโปร่งใส: ได้
ภาพเคลื่อนไหว: ได้
เปิดตัว: 2001 · W3C

ตัวแปลงไฟล์ SVG

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

คำถามที่พบบ่อยเกี่ยวกับการแปลง TTF เป็น SVG

ปัจจุบันยังใช้ฟอนต์ SVG ใน CSS @font-face ได้หรือไม่

ไม่ได้ในเบราว์เซอร์ส่วนใหญ่ Chrome ถอดการรองรับฟอนต์ SVG ออกตั้งแต่เวอร์ชัน 38 เมื่อปี 2014 ส่วน Firefox และ Internet Explorer ไม่เคยรองรับ สำหรับเว็บไซต์ให้แปลง TTF ด้วย TTF เป็น WOFF2 แทน

ทำไมกลิฟจึงกลับหัวเมื่อวางลงในงานวาด

ฟอนต์ SVG ใช้ระบบพิกัดของฟอนต์เอง โดยแกน y ชี้ขึ้นจากเส้นฐาน ขณะที่ภาพ SVG ทั่วไปนับ y ลงจากด้านบน พลิกพาธในแนวตั้ง เช่นใช้ทรานส์ฟอร์ม scale(1,-1) ก็จะแสดงผลถูกต้อง

จะแปลงข้อความเป็นพาธ SVG สำหรับ Cricut หรือเครื่องตัดเลเซอร์ได้อย่างไร

ติดตั้ง TTF พิมพ์ข้อความใน Inkscape หรือ Illustrator แล้วแปลงข้อความเป็นเส้นขอบ: Path › Object to Path ใน Inkscape, Type › Create Outlines ใน Illustrator จากนั้นบันทึกเป็น SVG ฟอนต์ SVG เก็บตัวอักษรแยกทีละตัว ไม่ได้จัดวางเป็นคำ

ฟอนต์ SVG เก็บ Kerning และตัวอักษรควบ (Ligature) ไว้ได้หรือไม่

ได้เพียงบางส่วน ฟอร์แมตฟอนต์ SVG เก็บคู่เคิร์นนิงด้วยองค์ประกอบ hkern และกลีฟหลายอักขระได้ แต่ไม่มีสิ่งที่เทียบเท่าตารางฟีเจอร์ของ OpenType เช่น small caps, alternates หรือกฎตามบริบท หากต้องใช้สิ่งเหล่านี้ให้เก็บ TTF ไว้

ฟอนต์ SVG ที่ได้มีประโยชน์สำหรับไอคอนฟอนต์หรือไม่

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