המרת קבצי TTF (TrueType Font) ל-SVG (Scalable Vector Graphics) ב-JavaScript מאפשרת למפתחים להשתמש בגופנים מותאמים בפורמט וקטורי בר שינוי המתאים לפרויקטים של אתרים. התהליך כולל קריאת קובץ ה-TTF, חילוץ גליפים של הגופן והמרתם לנתוני שביל SVG. במאמר זה נלמד כיצד להמיר TTF ל-SVG ב-JavaScript.
מאמר זה מכסה את הנושאים הבאים:
- ספריית JavaScript להמרת TTF ל-SVG
- המרת TTF ל-SVG באמצעות JavaScript
- המרת TTF ל-SVG באינטרנט
- קבל רישיון חינם
- משאבים חינמיים
ספריית JavaScript להמרת TTF ל-SVG
נשתמש בספריית Aspose.Font for JavaScript לביצוע המרת TTF ל-SVG. היא מאפשרת למפתחים לנהל, לחלץ ולנהל נתוני גופנים בפורמטים שונים, כולל TrueType (.ttf), OpenType (.otf) ואחרים.
אנא הורד את הספרייה ופעל לפי ההוראות עבור התקנת Aspose.Font for JavaScript.
המרת TTF ל-SVG באמצעות JavaScript
ניתן להמיר בקלות את הגופנים מסוג TrueType לפורמט SVG ב-JavaScript בתוך יישום אינטרנט. נטען את קובץ ה-TTF ולאחר מכן נמיר אותו לפורמט SVG. חוט עובד אינטרנטי יטפל במשימות הצורכות משאבים כדי להימנע מחסימת חוט ה-UI הראשי. זה הופך את יישום המרת הקבצים לידידותי יותר למשתמש, מפשט את תהליך ההמרה ומאפשר הורדות קבצים יעילות.
אנא עקוב אחר הצעדים הבאים להמרת גופן TrueType ל-SVG באמצעות JavaScript:
- צור עובד אינטרנטי באמצעות קטע הקוד הבא:
/*Create Web Worker*/ | |
const AsposeFontWebWorker = new Worker("AsposeFontforJS.js"); | |
AsposeFontWebWorker.onerror = evt => console.log(`Error from Web Worker: ${evt.message}`); | |
AsposeFontWebWorker.onmessage = evt => document.getElementById('output').textContent = | |
(evt.data == 'ready') ? 'library loaded!' : | |
(evt.data.json.errorCode == 0) ? `Result:\n${DownloadFile(evt.data.json.fileNameResult, "font/ttf", evt.data.params[0])}` : `Error: ${evt.data.json.errorText}`; | |
/*Event handler*/ | |
const fTTFtoSVG = e => { | |
const file_reader = new FileReader(); | |
file_reader.onload = event => { | |
/*Convert a TTF fonts to SVG and save - Ask Web Worker*/ | |
AsposeFontWebWorker.postMessage({ "operation": 'AsposeFontConvertToSVG', "params": [event.target.result, e.target.files[0].name, 'Module.FontType.TTF'] }, [event.target.result]); | |
}; | |
file_reader.readAsArrayBuffer(e.target.files[0]); | |
}; | |
/*Make a link to download the result file*/ | |
const DownloadFile = function (filename, mime, content) { | |
mime = mime || "application/octet-stream"; | |
var link = document.createElement("a"); | |
link.href = URL.createObjectURL(new Blob([content], {type: mime})); | |
link.download = filename; | |
link.textContent = filename; | |
link.title = "Click here to download the file"; | |
document.getElementById('fileDownload').appendChild(link); | |
document.getElementById('fileDownload').appendChild(document.createElement("br")); | |
} |
- המרת TTF ל-SVG על ידי ביצוע הצעדים הבאים:
- בחר את קובץ ה-TTF הקלט.
- צור
FileReader
. - קרא לפונקציה
AsposeFontConvertToSVG
. - קבע את שם הקובץ התוצאה ב-
json.fileNameResult
. - לאחר מכן, בדוק אם
json.errorCode
הוא 0, וקבל קישורים לקבצי התוצאה. אםjson.errorCode
אינו 0, פרטי השגיאה יהיו זמינים ב-json.errorText
. - לבסוף, הפונקציה
DownloadFile
יוצרת קישור, המאפשר למשתמש להוריד את הקובץ המתקבל למערכת ההפעלה שלו.
קטע הקוד הבא מראה כיצד להמיר קובץ גופן מסוג TrueType לפורמט SVG באמצעות JavaScript.
var fTTF2SVG = function (e) { | |
const file_reader = new FileReader(); | |
file_reader.onload = (event) => { | |
const json = AsposeFontConvert(event.target.result, e.target.files[0].name, Module.FontType.TTF, Module.FontSavingFormats.SVG); | |
if (json.errorCode == 0) document.getElementById('output').textContent = json.fileNameResult; | |
else document.getElementById('output').textContent = json.errorText; | |
DownloadFile(json.fileNameResult, "svg"); | |
} | |
file_reader.readAsArrayBuffer(e.target.files[0]); | |
} |
נסה ממיר TTF ל-SVG באינטרנט חינם
אתה יכול גם להמיר את קבצי ה-TTF שלך ל-SVG באמצעות כלי ממיר TTF ל-SVG חינם זה באינטרנט. תוכל לגשת אליו באמצעות כל דפדפן אינטרנט בכל פלטפורמה.
קבל ספריית גופנים ל-JavaScript
תוכל לקבל רישיון זמני חינם כדי לנסות את ספריית הגופנים ל-JavaScript ללא מגבלות הערכה.
גופן TrueType ל-SVG - משאבים חינמיים
בנוסף להמרת גופנים מסוג TrueType לפורמט SVG, חקור תכונות נוספות של הספרייה באמצעות המשאבים הבאים:
מסקנה
לסיכום, המרת TTF ל-SVG באמצעות JavaScript היא דרך עוצמתית להביא גופנים מותאמים אישית לפרויקטי האינטרנט שלך עם גרפיקה ברת שינוי ואיכותית. חקרנו כיצד לקרוא קבצי TTF, לחלץ גליפים של גופנים ולהמיר אותם לשבילי SVG באמצעות ספריית הגופנים של JavaScript. אם יש לך שאלות, אל תהסס ליצור קשר בפורום התמיכה בחינם שלנו.