การรักษาแบบอักษรในไฟล์ SVG

สวัสดีฉันยังใหม่กับนักวาดภาพประกอบและสร้างภาพที่ใช้แบบอักษร "Skia-Regular" แต่เมื่อฉันบันทึกภาพนั้นในรูปแบบ. svgมันจะเปลี่ยนประเภทแบบอักษร และเมื่อฉันเปิดไฟล์ฟอร์แมท. svg ในเบราว์เซอร์ฟอนต์นั้นแตกต่างอย่างสิ้นเชิง ทุกคนได้โปรดบอกฉันว่าฉันกำลังทำอะไรผิด ฉันได้เปิดไฟล์. svg ใน notepad ++ แล้วและมันบอกว่า font-family = "'Skia-Regular' และยังคงเป็นฟอนต์ที่ไม่ใช่ Skia Regular.Any ขอบคุณสำหรับความช่วยเหลือใด ๆ ขอบคุณ

ภาพที่แนบมาสำหรับการอ้างอิง

หากคุณต้องการให้แน่ใจว่าข้อความจะมีลักษณะเดียวกันในทุกกรณี -

ก่อนอื่นคุณสามารถขยายข้อความก่อนที่จะบันทึกเป็น svg

ประการที่สองในส่วนแบบอักษรของกล่องโต้ตอบบันทึกคุณสามารถกด "แปลงเป็นร่าง"

เหตุผลที่แบบอักษรไม่สามารถแสดงผลได้อย่างถูกต้องกับชนิดแบบอักษรจริงเพราะเมื่อ SVG ถูกบันทึกโดยใช้แอปพลิเคชัน Illustrator แอปพลิเคชั่นแปลงการออกแบบเป็นรหัสโดยอัตโนมัติ และหากสังเกตอย่างใกล้ชิดชื่อแบบอักษรในรหัสไม่ตรงกับแบบอักษรจริงที่ติดตั้งภายในระบบ

เพื่อเอาชนะปัญหาของการแสดงผลแบบอักษรคุณจะต้องคัดลอกรหัส SVG จาก Illustrator และแก้ไขชื่อตัวอักษรเพื่อให้ตรงกับชื่อของแบบอักษรที่ติดตั้งในระบบ (เช่น: ชื่อแบบอักษรภายในรหัส SVG ซึ่งมาจาก Illustrator "Arial-Regular" แต่ชื่อของแบบอักษรที่ติดตั้งในระบบของคุณคือ "Arial Regular" ที่นี่คุณจะต้องแก้ไขรหัสเพื่อให้มี Font-Family เป็น "Arial Regular ".)

สิ่งนี้จะช่วยแก้ปัญหาของคุณโดยไม่จำเป็นต้องแปลงแบบอักษรเป็นเค้าโครง

หวังว่านี่จะช่วยได้!

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

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

เก็บถาวรสำหรับเว็บ:

1. ใช้แบบอักษรของ Google
2. ใช้ตระกูลแบบอักษรได้สูงสุดสองตระกูลเท่านั้น

ส่งออก: แบบอักษร: (ข้อความ: svg, subconjunto: none) คุณสมบัติ svg: (องค์ประกอบสไตล์)

ภายในสไตล์ของไฟล์ผลลัพธ์ให้แก้ไข:

1. แนบบรรทัด "@import"
2. แนบ "px" กับทุกขนาดแบบอักษร
3. เปลี่ยนชื่อตัวอักษร

ผล:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {}

.st0{fill:#868686;}
.st1{font-family:'Roboto Condensed';}
.st2{font-size:14.414px;}
.st3{letter-spacing:55px;}
.st4{fill:#1D1D1B;}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}
.st6{letter-spacing:51px;}
.st7{letter-spacing:45px;}
.st8{letter-spacing:40px;}

โอกาสที่พีซีของคุณจะไม่มีไฟล์ฟอนต์ตระกูล (Skia- ปกติ) อยู่ในเครื่อง ดังนั้นเมื่อคุณเปิดไฟล์ SVG ของคุณบนเบราว์เซอร์ไฟล์นั้นจะแสดงผลโดยใช้แบบอักษรเริ่มต้นของระบบซึ่งก็คือ Times New Roman เกือบตลอดเวลา มีวิธีแก้ไขปัญหาหลายประการ:

1. ใช้ @import เพื่ออ้างถึง Google Fonts API (ขึ้นอยู่กับว่าคุณฝังรูปภาพ SVG ของคุณบนเว็บไซต์ของคุณได้ผลดีหากคุณใช้ SVG แบบอินไลน์และแท็กวัตถุ SVG)
2. แปลงฟอนต์ของคุณเป็นพา ธ (ซึ่งเพิ่มขนาดไฟล์และผลลัพธ์เป็นข้อความพร่ามัวเมื่อคุณสูญเสียการแสดงผลClearType )
3. ฝังแบบอักษรลงในไฟล์ SVG ของคุณโดยใช้Nano

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการใช้แบบอักษรที่กำหนดเองใน SVG ได้ที่นี่: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/