كيفية تحويل الأيقونات إلى خط الويب
لقد أنشأت بعض الرموز الأنيقة لإعادة تصميم موقع ويب كنت أفعله ، وقمت بمعاينة الموقع الجديد على جهاز iPad قديم. بدا التصميم جيدًا بالحجم العادي ، ولكن مع التكبير إلى جزء من الصفحة ، رأيت فجأة أن رمزي كان فوضى ضبابية ، في حين أن رأس النص كان لا يزال واضحًا ونقيًا. على iPad الأحدث من نوع ريتينا ، لم تبدو الرموز حادة ، حتى في الحجم العادي.
كانت الفكرة الأولى التي أجريتها هي إنشاء صور متحركة مزدوجة الحجم ، وإعدادها لعرضها بنصف حجمها باستخدام CSS. في حين أن هذا جعلها تبدو أفضل على شاشة ريتينا بالحجم الطبيعي ، بمجرد أن تبدأ في الضغط والتكبير ، عاد التشويش. لكن النص كان لا يزال واضحًا ودقيقًا.
كان الجواب واضحا. كنت بحاجة إلى تحويل الرموز الخاصة بي إلى خط.
في هذا البرنامج التعليمي ، سننظر في كيفية تحويل رموز المتجهات إلى خط ويب باستخدام تطبيق ويب مجاني رائع يسمى IcoMoon. ثم سننظر في كيفية استخدام ملفات الخطوط التي تم إنشاؤها و CSS في صفحة ويب.
مزايا استخدام خط الرمز
يحتوي خط الرموز على العديد من المزايا على الصور النقطية ، بالإضافة إلى دقة الصورة.
- الملاءمة: سيكون خط الرمز أصغر بكثير في حجم الملف من سلسلة من الصور ، خاصة إذا كنت قد استخدمت صورًا مزدوجة الحجم لشاشات Retina. وبمجرد تحميل الخط ، سيتم عرض الرموز على الفور ، دون الحاجة إلى تنزيل صورة.
- قابلية التوسع: يمكن تعيين خط رمز على أي حجم عن طريق ضبط
font-sizeخاصية في CSS المصاحبة. يمكّنك هذا من تجربة أحجام مختلفة ؛ بينما ، للصور النقطية ، يجب عليك إخراج ملف صورة عند كل حجم. - المرونة: يمكن تطبيق تأثيرات النص بسهولة على الرمز الخاص بك ، بما في ذلك الألوان والظلال المسقطة وحالات التمرير. كما أنها ستعرض بشكل جيد ضد أي لون أو خلفية الصورة.
- التوافق: يتم دعم خطوط الويب من خلال جميع المتصفحات الحديثة والمتصفحات القديمة أيضًا ، وحتى IE 6 والإصدارات الأقدم.
اذا هيا بنا نبدأ!
إنشاء خط رمز
يمكن بناء خطوط الرمز باستخدام تطبيق إنشاء خط مخصص مثل رموزا ولكن أداة الطباعة الاحترافية هي أكثر من مجرد احتياجات أو متطلبات بناء خط رمز بسيط ، حيث تكون العلاقة بين الأحرف (أي kerning و lapatures) غير مهمة.
إلى حد بعيد ، أسهل طريقة هي استخدام تطبيق مجاني رائع عبر الإنترنت يسمى IcoMoon ، عن طريق Keyamoon ، والذي يأخذ بعيدا عن متاعب تحويل الرموز إلى خط الويب.
يزيل تطبيق HTML5 هذا كل آلام إنشاء ملفات الخطوط للاستخدامات البسيطة مثل خطوط إنشاء الخطوط. يأتي IcoMoon مع عدد من مجموعات الرموز المحملة بالفعل ، ويمكنك إضافة المزيد إلى مكتبتك ، والتي يمكن استخدام معظمها مجانًا (راجع الترخيص). إذا كنت تبحث عن أيقونات قياسية إلى حد ما ، مثل "تنزيل الملفات" و "عربة التسوق" ، فقد تجد أن استخدام أحد هذه الرموز هو الأفضل من إنشاء أيقونة خاصة بك.
خطوة بخطوة
1. إعداد الرسوم التوضيحية الخاصة بك
للبدء ، تحتاج إلى إنشاء الرموز في برنامج رسم المتجه قادر على التصدير إلى تنسيق SVG ، مثل Illustrator أو Inkscape.
أثناء التصميم ، يمكنك العمل مع أي لون تريده ، ولكن يجب أن تكون الرموز بلون واحد. تأكد من أن كل رمز يكون تقريبًا بنفس الحجم. وجود رمز واحد أطول أو أطول من الآخر سيجعل من الصعب إنشاء خط ثابت. هنا ، اضطررت لتقليل عرض أيقونة منطادتي بحيث تتطابق مع الأيقونات الأخرى.
2. تنظيف
تحقق من كل رمز بعناية للتأكد من عدم وجود عيوب - التفاصيل التي تبدو جيدة في أحجام أصغر قد تخفي عيوبًا قليلة عند التكبير. في الأيقونة الموضحة أدناه ، أحتاج إلى إزالة الخطوات المتعرجة التي تسللت إلى الداخل عند وضع طبقات.
في Illustrator ، استخدم أداة Pathfinder لتوحيد العناصر المتداخلة ، وعنصر Minus Front لإزالة عناصر الفصل ، مثل النجم الموجود في هذه الأيقونات.
المبدأ الأساسي هو التأكد من أن الرمز الخاص بك يمكن قراءته على مستويات صغيرة. تبسيط قدر الإمكان.
3. تصدير إلى SVG
الآن ، حدد رمزًا وقم بنسخه ولصقه في مستند مربع جديد (على سبيل المثال ، 200 × 200 بكسل). قياس الأيقونة بحيث تناسبها. قد تجد أنه من المفيد تعيين مسطرة أساسية. لون الرمز بحيث يكون أسود خالص على خلفية بيضاء.
الآن ، اختر File… Save as وحفظ الملف كملف SVG. استخدم إعدادات SVG الافتراضية. بمجرد الانتهاء من ذلك لجميع الرموز ، تكون مستعدًا لإنشاء خط ويب.
4. الاستيراد إلى IcoMoon
افتح ال تطبيق ويب IcoMoon . لاستيراد رمز ، انقر فوق الزر "استيراد الرموز" ، ثم حدد ملفات SVG التي تريد إضافتها - يمكنك إضافة ملفات متعددة في وقت واحد. ستظهر بعد ذلك تحت "رموزك المخصصة". إذا تم تمييزها باللون الأصفر ، فستكون جزءًا من خط الرمز الذي ستنشئه. في هذا المثال ، يمكنك أن ترى أنني قررت عدم تصدير أحد الرموز الخاصة بي ، وقد أضفت أحد الرموز من "Mini-icons".
5. تصدير الخط من IcoMoon
يمكنك النقر فوق الزر "تعديل" إذا كنت ترغب في ضبط موضع الرمز أو تغيير حجمه أو تدويره. استخدم الزر "حفظ نسخة" لإنشاء اختلافات الرمز (على سبيل المثال ، صورة معكوسة للرمز). أضف علامة ذات معنى إلى الرمز ، لأن ذلك سيتم استخدامه لإنشاء اسم الفئة له.
عندما تكون مستعدًا ، انقر فوق الزر "خط" في الجزء السفلي من الشاشة لبدء إنشاء الخط. هذا هو المكان الذي يمكنك تعيين أي رمز يتم تعيينه إلى أي حرف؛ على سبيل المثال ، إذا كانت مجموعة الرموز الخاصة بك عبارة عن ست صور للكرة الدوارة ، يمكنك تعيين الأحرف q ، w ، e ، r ، t و y إلى الإطارات الستة. في التفضيلات ، اختر اسم الخط. يمكنك أيضًا ضبط مقاييس الخط ، ولكن ما لم تكن ستقوم بتعيين خطك المخصص إلى جانب النص القياسي ، فلا داعي للقلق بشأن هذا الأمر.
6. قم بتنزيل ملفات الخط
انقر على "تنزيل" لتنزيل حزمة الخط على جهازك. سيكون مجلد فرعي يحتوي على الخطوط نفسها (في WOFF و EOT وتنسيقات TTF) ، بالإضافة إلى نموذج صفحة HTML و CSS المطابق. هناك أيضًا ملف JavaScript به حل بديل إذا كنت بحاجة إلى دعم الإصدار 6 أو 7 من IE.
لإضافة الخطوط إلى مشروعك ، انسخ المجلد الفرعي للخطوط إلى موقعك. يمكنك نسخ ولصق CSS من style.css إلى ملف CSS الخاص بموقعك ، لكن الطريقة التي اتبعتها هي إعادة تسميتها كـ fonts.css والاحتفاظ بها كملف CSS مستقل. ستحتاج بعد ذلك إلى إضافة مرجع إلى ملف CSS هذا في ملف HTML الخاص بك باستخدام الرابط النسبي:
<link rel="stylesheet" href="fonts.css" />في عنصر @ font-face من ملف CSS ، ستحتاج إلى تغيير مرجع عنوان URL إلى الموقع النسبي الجديد للخطوط ، أو يمكنك ببساطة إسقاط مجلد الخطوط في مجلد ورقة الأنماط الخاص بك.
7. استدعاء الخط
كما ترى في ملف index.html ، توجد طريقتان للرجوع إلى الخط المخصص ، إما بحرفه (unicode أو name) أو حسب اسم الفئة الخاصة به. يستخدم المثال الأول شرط رمز البيانات HTML5
<div aria-hidden="true" data-icon="g"></div>هنا ، يتم استخدام فئة fs1 لتعيين حجم الخط. يساعد المرجع المخفي الذي يحتوي على الأغنية لضمان عدم نطق الأحرف من قبل أي قارئ شاشة.
تستخدم الطريقة الثانية عنصر الامتداد:
<span aria-hidden="true"></span>هذه الطريقة مفيدة عندما تريد أن يكون الرمز مضمنًا مع النص العادي.
إذا كنت تريد جعل الرمز رابطًا ، فيمكنك لفه كله في href :
