تحويل أيقونات SVG إلى خط TTF

اختيار تنسيق مناسب

يفيد خط الأيقونات في مجموعة أحادية اللون تتبع لون النص وحجمه. يكون SVG المضمّن أسهل غالباً للرسومات متعددة الألوان ولضبط الإتاحة بدقة. لا توجد طريقة أسرع دائماً؛ قارن الملفات والأداء داخل تطبيقك قبل إصدار حكم.

تجهيز المسارات الممتلئة

استخدم SVG صالحاً يتضمّن viewBox ومسارات ممتلئة. حوّل الحدود إلى أشكال ممتلئة وسوِّ التحويلات والقصّ غير المدعوم في محرّر الرسومات. قد تنتج الأيقونة المرسومة بحدود فقط رمزاً فارغاً أو غير صحيح. المربع التالي مثال بسيط لمسار ممتلئ.

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M4 4H20V20H4Z" fill="currentColor"/>
</svg>

التوليد والتنزيل

افتح محوّل SVG إلى خط وأضف الأيقونات ثم ولّد الخط. يعمل محوّل JavaScript داخل المتصفح وينتج TTF مع تعيينات CSS. نزّل ملف TTF وانسخ CSS بصورة منفصلة. لا توفّر الأداة ضغط WOFF أو WOFF2 أو حزمة ZIP. قد تستغرق المجموعات الكبيرة وقتاً لأن التوليد يعمل على الخيط الرئيسي للمتصفح.

الدمج والاختبار

ضع TTF في المسار المحدّد بقاعدة @font-face وتحقّق من تحميله دون خطأ 404. راجع الأسماء ونقاط Unicode والمحاذاة والحجم. نطاق Unicode الخاص لا يضمن الإتاحة تلقائياً: استخدم aria-hidden="true" للأيقونات الزخرفية وأضف نصاً للأزرار المهمة. تحتاج إلى محوّل منفصل لإنتاج WOFF2 وتعديل المسار والتنسيق في CSS. قد ترسل مساعدة الذكاء الاصطناعي الاختيارية الإدخال خارج المتصفح بعد الموافقة.

هندسة الرموز والمحاذاة وإمكانية الوصول

عند توليد خطوط الأيقونات TrueType من مسارات المتجهات، يجب على مطوري واجهات المستخدم الانتباه لثلاث قواعد هندسية أساسية:

1. انعكاس محور Y ومساحة الإحداثيات: في بنية SVG، تبدأ نقطة الأصل (0,0) من الزاوية العلوية اليسرى ويتجه المحور الرأسي إلى الأسفل. على النقيض من ذلك، تضع مقاييس خطوط TrueType نقطة الأصل في خط الأساس السفلي الأيسر. تعكس مولدات الخطوط المحلية في المتصفح المنحنيات الرأسية تلقائياً أثناء التجميع.
2. التحجيم وفق مربع Em والوزن البصري: تحسب خطوط الأيقونات أبعاد الرموز بوحدات Units Per Em (عادة 1000 أو 2048 UPM). احرص على أن تتشارك كافة أيقونات SVG المصدرية نفس مساحة viewBox المربعة (مثل 0 0 24 24) قبل التوليد لضمان محاذاة دقيقة ومستقيمة مع النصوص المجاورة.
3. التوافق مع قارئات الشاشة (WCAG 2.1): يتم تعيين الرموز في منطقة الاستخدام الخاص في يونيكود (PUA). لا تستطيع قارئات الشاشة نطق هذه الرموز. استخدم دائماً السمة aria-hidden="true" على وسوم الأيقونات وقدم نصاً واضحاً ومخصصاً لقارئات الشاشة (<span class="sr-only">...</span>).

هندسة مسارات المتجهات وتوليد خطوط TTF الاحترافية

يتطلب تحويل أيقونات SVG إلى خطوط رقمية بصيغة TrueType مطابقة دقيقة لقواعد الرسوميات الرياضية:

• اتجاه التفاف المسارات (Winding Order): تعتمد خطوط TrueType على اتجاه عقارب الساعة لتحديد الكتل المصمتة وعكس اتجاه عقارب الساعة لتحديد الثقوب والتجاويف الداخلية. تضمن أداتنا معالجة المسارات آلياً لمنع ظهور الأيقونات ككتل سوداء مصمتة.
• شبكة الإحداثيات والوحدات (Units Per Em): يتم قياس الخطوط البرمجية داخل شبكة إحداثيات افتراضية تبلغ عادة 1000 أو 2048 وحدة. تقوم الخوارزمية بمطابقة أبعاد الأيقونات ونقل نقطة الأصل إلى الركن السفلي الأيسر وفق معايير الخطوط العالمية.
• نطاق المحارف الخاصة (PUA): تُعيّن الأيقونات داخل نطاق الاستخدام الخاص (Private Use Area - E000 إلى F8FF) في جدول يونيكود لضمان عدم تعارضها مع الحروف الأبجدية القياسية.