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