تبدیل متن به SVG

یک SVG که از عنصر <text> استفاده می‌کند به در دسترس بودن فونت در جایی که باز می‌شود وابسته است. متن را به دادهٔ مسیر تبدیل کنید تا این وابستگی از میان برود: شکل‌ها همراه فایل سفر می‌کنند، پس در هر مرورگر، ویرایشگر و کاتری یکسان نمایش داده می‌شود — بدون حتی یک درخواست وب‌فونت.

تبدیل متن به SVG

چه چیزی تحویل می‌گیرید

برای هر گلیف یک مسیر، با قاعدهٔ پُرکردن و پُرکننده و خط دوری که تعیین کرده‌اید، و گزینه‌ای برای دادن شناسهٔ اختصاصی به هر گلیف تا بتوانید حروف را تک‌تک در CSS یا JavaScript آدرس‌دهی کنید. یا وقتی یک مسیر واحد برای کل کلمه می‌خواهید کانتورها را جوش بدهید — شکلی که کاتر یا سامانهٔ آیکون معمولاً ترجیح می‌دهد.

چیدمان درست، نه صرفاً جست‌وجوی گلیف

متن با HarfBuzz چیده می‌شود، همان موتوری که خودِ مرورگرها به‌کار می‌برند، پس جفت‌های کرنینگ و لیگاتورها اعمال می‌شوند و خط‌های پیچیده درست رفتار می‌کنند: حروف عربی به هم می‌چسبند و خوشه‌های هندی بازچینش می‌شوند. محورهای فونت متغیر و ویژگی‌های OpenType هم در دسترس‌اند، پس می‌شود پیش از تبدیل به مسیر، وزن یا مجموعهٔ سبکی را تنظیم کرد.

از فونت خودتان استفاده کنید

فهرست بیش از ۱۹۰۰ خانوادهٔ متن‌باز را پوشش می‌دهد، و به‌جایشان می‌توانید TTF یا OTF خودتان را رها کنید. فونت‌های آپلودشده در همین زبانه خوانده می‌شوند و هرگز جایی فرستاده نمی‌شوند، که یعنی یک فونت تجاری دارای مجوز هم روی دستگاه شما می‌ماند.

پرسش‌ها

چرا متن را همان <text> نگه نداریم؟
چون دو بار یکسان رندر نخواهد شد. فونت غایب بی‌سروصدا جایگزین می‌شود، و وب‌فونت یک درخواست شبکه و یک جرقهٔ متن بی‌قالب اضافه می‌کند. مسیرها هندسهٔ ثابت‌اند — هر وقت فایل یک لوگو، یک آیکون یا مقصدش یک دستگاه است، ارزشش را دارد.
آیا متن جست‌وجوپذیر یا دسترس‌پذیر می‌ماند؟
بعد از تبدیل به مسیر، نه. نوشته را در aria-label یا عنصر title نشانه‌گذاری‌تان نگه دارید، و منبعی قابل ویرایش برای تغییرهای بعدی داشته باشید.
می‌توانم از فونت دارای مجوز خودم استفاده کنم؟
بله — یک TTF یا OTF آپلود کنید. در مرورگر تجزیه می‌شود، پس فایل هرگز دستگاهتان را ترک نمی‌کند. بررسی کنید مجوز، تبدیل به مسیر را برای کاربرد موردنظرتان اجازه بدهد.