أصبحت خطوط الأيقونات أداة لا غنى عنها لمطوري الويب ، مما يسمح لهم بإنشاء رموز فريدة وملونة وقابلة للتطوير بسهولة. في الوقت نفسه ، لديهم ميزة واحدة مهمة — لا تشغل الخطوط مساحة كبيرة على القرص ، مما يعني أن الصفحة يتم تحميلها بشكل أسرع. قد يبدو إنشاء خط الرمز الخاص بك مهمة شاقة ، ولكنه في الواقع ممكن تماما من خلال بضع خطوات بسيطة.
إعداد ملفات الرسومات
أول شيء يجب فعله هو إعداد ملفات الرموز الرسومية التي سيتم استخدامها في خط الرمز. من الأفضل استخدام الصور المتجهة ، حيث يتم تحجيمها بسهولة دون فقدان الجودة. احفظ كل رمز في ملف منفصل وتأكد من أنها كلها بنفس الحجم بحيث يكون الخط متسقا.
باستخدام مولد عبر الإنترنت
لإنشاء خط رمز ، يمكنك استخدام مولدات خاصة عبر الإنترنت. إنها تسمح لك بتحميل ملفات الرموز الرسومية ، وتكوين معلمات مختلفة مثل حجم الرمز ، وعنوان الخط ، وما إلى ذلك.، وإنشاء خط جاهز بتنسيق الصناديق أو وف. هذا مريح للغاية ويوفر الكثير من الوقت والجهد.
باستخدام رمز الخط
بعد إنشاء الخط ، يمكن استخدامه على صفحة ويب. للقيام بذلك ، تحتاج إلى توصيل ملف الخط إلى الصفحة عبر علامات @الخط الوجه في رمز كس. ثم يمكنك استخدام الخط رمز جديد ببساطة عن طريق تحديد فئتها في التعليمات البرمجية هتمل. هذا مريح للغاية ، حيث يمكن عرض الرموز على الصفحة بدون أي صور وفي نفس الوقت يمكن تغييرها في الحجم واللون والمعلمات الأخرى باستخدام كس.
- التحضير لإنشاء خط رمز
- جمع الرموز التي تطابق الموضوع الخاص بك
- إنشاء الحروف الرسومية في محرر متجه
- افتح محرر المتجهات وقم بإنشاء مستند جديد
- تصدير الرموز إلى خط رمز
- تصدير كل رمز في شكل سفغ
التحضير لإنشاء خط رمز
قبل البدء في إنشاء خط رمز ، تحتاج إلى اتباع بعض الخطوات الأولية:
- تحديد موضوع الخط رمز. فكر في الرموز والرموز التي تريد ملء الخط بها. يمكن أن يكون أي موضوع ، بدءا من الشبكات الاجتماعية إلى العناصر الطبيعية.
- استكشاف الخطوط رمز القائمة. استكشف خطوط الرموز المختلفة المتاحة على الإنترنت للحصول على الإلهام وفهم الرموز والأنماط التي تريدها.
- إنشاء الرسومات. على الورق أو في محرر الرسومات ، قم بإنشاء صور مصغرة للرموز التي تريد إضافتها إلى الخط الخاص بك. ضع الرموز على نفس المسافة من بعضها البعض لتسهيل العمل في المستقبل.
- حدد أداة إنشاء الخط. يمكنك استخدام البرامج المتخصصة أو الخدمات عبر الإنترنت لإنشاء خطوط الرموز. استكشف الخيارات المتاحة واختر الخيار الأنسب لاحتياجاتك.
- إنشاء أحرف الخط. باستخدام الأداة المحددة ، ابدأ في إنشاء رموز خط الرمز الخاص بك. انتبه إلى الأحجام والنسب والألوان لضمان مظهر متسق لجميع الرموز.
- تصدير الخط. بعد إنشاء جميع الرموز ، قم بتصدير خط الرمز بالتنسيق المطلوب (عادة الملفات.صندوق النقد الدولي, .ووف أو .سفغ) للرجوع إليها في المستقبل.
بعد الانتهاء من كل هذه الخطوات ، ستكون جاهزا للمرحلة التالية — توصيل واستخدام خط الرمز الجديد في مشروع ويب.
جمع الرموز التي تطابق الموضوع الخاص بك
قبل البدء في إنشاء خط رمز ، تحتاج إلى تجميع الرموز التي تتطابق مع المظهر الخاص بك. يمكنك العثور على رموز جاهزة على الإنترنت ، في مجموعات خاصة ، أو إنشائها بنفسك.
إذا قررت إنشاء أيقونات بنفسك ، فمن المهم التفكير في تصميمها بحيث يمكن التعرف عليها وتطابق المظهر الخاص بك. يمكنك استخدام برامج تحرير الصور مثل أدوبي المصور أو الطلاء لرسم الرموز مع الكائنات المتجهة.
عندما الرموز جاهزة ، حفظها في سفغ (رسومات ناقلات قابلة للتطوير) الشكل ، والذي يسمح لك لتوسيع نطاق الصورة دون فقدان الجودة. إذا كان لديك بالفعل الرموز في أشكال أخرى ، يمكنك تحويلها إلى سفغ باستخدام المحولات على الانترنت.
| أيقونة | الوصف |
|---|---|
| وصف الرمز 1 | |
| وصف الرمز 2 | |
| وصف الرمز 3 |
قم بإنشاء جدول يمثل فيه كل صف رمزا ووصفا مطابقا له. لعرض الرموز ، استخدم العلامة مع رابط إلى ملفات الرمز. في الوصف ، حدد اسم الرمز ومعناه.
تذكر أن الرموز يجب أن تكون موحدة في الأسلوب والحجم بحيث تبدو جيدة في خط الرمز. لذلك ، من المهم تحديد النمط العام للرموز وحجمها مسبقا من أجل إعطاء خط الرمز الخاص بك مظهرا موحدا ومتناغما.
إنشاء الحروف الرسومية في محرر متجه
لإنشاء رمز الخط ، وسوف تحتاج إلى محرر ناقلات مثل أدوبي المصور أو رسم. يتيح لك محرر المتجهات إنشاء كائنات رسومية يمكن تحجيمها دون فقدان الجودة.
في بداية العمل ، ستحتاج إلى تحديد شكل وحجم الحروف الرسومية. كل حرف رسومي هو رمز أو رمز سيكون جزءا من خط الرمز الخاص بك. يمكنك استخدام الرموز الموجودة كقاعدة أو إنشائها بنفسك.
بعد أن تقرر شكل وحجم الحروف الرسومية ، افتح محرر المتجه وأنشئ مستندا جديدا. ثم قم بإنشاء طبقة جديدة لكل حرف رسومي. سيسمح لك ذلك بالتحكم بسهولة في كل حرف رسومي على حدة.
بعد ذلك ، ابدأ في رسم كل حرف رسومي على الطبقة المناسبة. استخدم أدوات ووظائف محرر المتجهات لإنشاء الشكل والأسلوب المطلوبين للرمز. يمكنك إضافة اللون ، والسكتة الدماغية ، والظلال وغيرها من الآثار لإعطاء الرموز الخاصة بك نظرة فريدة من نوعها.
بعد الانتهاء من رسم جميع الحروف الرسومية ، احفظ كل حرف رسومي في ملف منفصل. انتبه إلى تنسيق الحفظ: من الأفضل استخدام التنسيقات التي تدعمها متصفحات الويب ، مثل سفغ أو ينغ.
بعد حفظ جميع الحروف الرسومية ، يمكنك استخدام برامج خاصة أو خدمات عبر الإنترنت لإنشاء خط رمز من هذه الملفات الفردية. ستسمح لك هذه البرامج بتحديد الأحرف وتعيين رموز يونيكود لها وإنشاء خط رمز بالتنسيق المطلوب الذي يمكن استخدامه على موقع الويب.
افتح محرر المتجهات وقم بإنشاء مستند جديد
اختر حجم المستند الذي يناسب احتياجاتك. عادة ما يكون حجم 1024 pixel 1024 بكسل كافيا.
اضبط دقة المستند على 72 نقطة في البوصة (بكسل لكل بوصة) — هذه هي الدقة القياسية للرسومات التي تظهر على الشاشة.
اختر خلفية شفافة للمستند بحيث يمكن تصدير الرموز واستخدامها بسهولة على ألوان خلفية مختلفة.
بعد إنشاء مستند جديد ، تكون جاهزا لبدء إنشاء رموز رمز للخط الخاص بك.
تصدير الرموز إلى خط رمز
بعد إنشاء الرموز الخاصة بك وإعداد الملفات في شكل سفغ ، تحتاج إلى تصديرها إلى خط رمز. للقيام بذلك ، سوف نستخدم أدوات وخدمات خاصة.
الخطوة الأولى هي تحديد أداة تصدير. هناك العديد من الخدمات عبر الإنترنت شعبية ، مثل إيكونفونت ، فونتيلو ، إيكومون ، والتي توفر الفرصة لتحميل الرموز في شكل سفغ وإنشاء خط رمز.
بمجرد تحديد الخدمة ، فإن الخطوة التالية هي تحميل الرموز الخاصة بك إلى الخدمة. ويتم ذلك عادة عن طريق سحب ملفات سفغ إلى منطقة معينة على صفحة ويب الخدمة أو باستخدام زر "تحميل الملفات".
بعد تنزيل الرموز ، تتيح لك الخدمة تكوين معلمات مختلفة وإنشاء خط رمز وفقا لتفضيلاتك. يمكنك تحديد اسم الخط وتحديد الأحرف المراد استخدامها كرموز وضبط حجم الأحرف وغير ذلك الكثير.
عند الانتهاء من إعداد خط الرمز ، يمكنك تنزيله على جهاز الكمبيوتر الخاص بك. عادة ما تقدم الخدمة لتحميل الملفات في أشكال مختلفة ، بما في ذلك تف ، يوت ، وف ، ووف 2 ، سفغ. اختر التنسيق المناسب لمشروعك وقم بتنزيل الرمز الخط.
الآن بعد أن أصبح لديك ملف خط الرمز ، يمكنك توصيله بمشروعك باستخدام كس. للقيام بذلك ، أضف الكود التالي إلى ملف النمط الخاص بك:
@الخط الوجه {
في هذه الحالة ، يمكن أن يكون كل شيء على ما يرام.ووف 2') شكل ('ووف 2'),
هذا هو موقع الويب الخاص بك.وف') شكل ('وف'),
رابط ('الطريق إلى .ملف تف') شكل ('تروتايب');
الخط الوزن: عادي;
نمط الخط: عادي;
}