دليل لأفضل وضوحا رموز واجهة المستخدم مع خطوط الويب

إذا كنت معتادًا على استخدام تنسيقات الصور النقطية (مثل PNG و GIF) لعرض الرموز على موقع ويب ، فستكون على دراية أيضًا بأوجه القصور فيه. بادئ ذي بدء ، بناءً على البعد وكم من معلومات الألوان الموجودة في الأيقونة ، يمكن أن يكون حجم ملف الرمز كبيرًا للغاية.

إذا كان لدينا الكثير من الرموز التي يجب وضعها في موقع الويب ، فسيؤدي ذلك أيضًا إلى إبطاء أداء الموقع حيث يتعين إجراء العديد من طلبات HTTP بواسطة المستعرض. على الرغم من أنه يمكن حل هذه المشكلة باستخدام CSS sprite ، لا يزال حجم الملف كبيرًا.

يحتوي رمز الصورة النقطية أيضًا على أوجه قصور في المرونة وقابلية التوسع. دعنا نقول أننا بحاجة إلى تكبير أو تكبير الرمز إلى مستوى معين ، أو مشاهدته من خلال دقة شاشة عالية للغاية مثل على شاشة شبكية العين ؛ سوف أيقونة بالتأكيد تتحول تبحث ضبابية.

حسنًا ، إذا أخذت بعض هذه الأمور أعلاه في الاعتبار ، فربما تحتاج إلى استخدام خطوط الرموز.

باستخدام أيقونة الخطوط

ل رمز الخط عبارة عن مجموعة من الرموز التي تم تعبئتها في خط ويب يمكن تضمينها لاحقًا في موقع ويب باستخدام @ الخط وجه. كما أشار Chris في CSS-trick ، ​​هناك العديد من الفوائد لاستخدام الخط على الصورة لتوصيل الرموز ؛

• الخط عبارة عن كائن يستند إلى المتجهات ، بطبيعته ، مستقل عن دقة الوضوح ، لذلك ستظل الأيقونة واضحة في مختلف دقة الشاشة بما في ذلك دقة الشاشة العالية (مثل مستوى شبكية العين).
• كما أنه قابل للتطوير ، مما يسمح بتوسيعه على العديد من المستويات دون فقدان الجودة والدقة.
• لأن الأيقونة هي في الأساس خط, يمكننا أيضًا التحكم في اللون والشفافية وظل النص وحتى تغيير حجمه من خلال ورقة الأنماط
• يمكننا أيضًا تنشيط الأيقونة باستخدام CSS3.
• يتم استدعاء الرمز مع @ الخط وجه القاعدة التي تم دعمها منذ وقت مبكر مثل Internet Explorer 4 (مع .eot).
• طلب HTTP أقل وحجم ملف أقل.

فيما يلي بعض من أفضل خطوط الرموز المجانية التي يمكننا العثور عليها:

• الخط رائع
• IcoMoon
• أيقونات وسائل التواصل الاجتماعي
• مؤسسة زورب أيقونات

تأكد من فحص الترخيص واتباعه قبل تضمينه في موقع الويب الخاص بك لتكريم وقت المؤلف وعمله الشاق.

@ الخط وجه القاعدة

كما ذكرنا ، يتم تضمين الرموز باستخدام @ الخط وجه حكم من خلال ورقة الأنماط التي تحدد الجديد خط العائلة. في المثال التالي ، سوف نستخدم رموز الويب ؛

 @ font-face font-family: 'WebSymbolsRegular'؛ src: url ('fonts / websymbols-regular-webfont.eot') ؛ src: تنسيق url ('fonts / websymbols-regular-webfont.eot؟ #iefix') ('embent-opentype') ، url ('fonts / websymbols-regular-webfont.woff') format ('woff') ، url ('font / websymbols-regular-webfont.ttf') format ('truetype') ، url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') format ('svg')؛  

بعد ذلك ، في مستند HTML ، نحتاج فقط إلى إضافة الأحرف التي تمثل الرمز ، بدلاً من تطبيق الجديد خط العائلة على نطاق واسع في المستند ، يمكننا القيام بمزيد من التحديد من خلال إضافة فئة إضافية إلى بعض العناصر التي تحتاج إلى تقديم الرمز ، مثل ذلك ؛

 
 
ح
 
أنا
 
ي
 
ا
 
أنا
 
 

العودة إلى ورقة الأنماط ، نقوم بتعريف الجديد خط العائلة لتلك الفئة التي أضفناها للتو:

 .icon-font font-family: WebSymbolsRegular؛ حجم الخط: 12pt ؛  

• التجريبي @ الخط الوجه

باستخدام العناصر الزائفة

إذا تم التعامل مع الرمز كعنصر جانبي ، فيمكننا أيضًا توصيل الرمز من خلاله شبه عنصر. على افتراض أن علامة HTML الخاصة بنا هي كما يلي:

 
 
الرد
 
الرد على الجميع
 
إلى الأمام
 
المرفق
 
صورة
 
 

يمكننا أن نفعل ذلك بهذه الطريقة في ورقة الأنماط:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular؛ الهامش الأيمن: 5 بكسل ؛  ul.icon-font.pseudo li: nth-child (1): قبل content: "h"؛  ul.icon-font.pseudo li: nth-child (2): قبل content: "i"؛  ul.icon-font.pseudo li: nth-child (3): قبل content: "j"؛  ul.icon-font.pseudo li: nth-child (4): قبل content: "A"؛  ul.icon-font.pseudo li: nth-child (5): قبل content: "I"؛  

• التجريبي الزائف عنصر

استخدام خاص يونيكود

هناك ظرف حيث لم يتم تضمين الرموز في الحروف (A ، B ، C ، D ، وما إلى ذلك) ، ولكن تم تضمينها في Unicode Private Use لتقليل الصدام بين الأحرف. كما هو الحال في FontAwesome ، أضاف المؤلف لحسن الحظ جميع رموز الأحرف في ورقة الأنماط ، والتي تبدو هكذا ؛

 .icon-glass: قبل content: "\ f0c6"؛  

ولكن عندما نحتاج إلى تضمين الأيقونة مباشرة في HTML ، فهذا يشبه الكود التالي \ f0c6 لن يعرض الرمز المدبب ، حيث إنه ليس حرفًا صحيحًا مشفرًا بتنسيق HTML.

يحتاج HTML إلى مرجع مرجعي رقمي لتقديم أحرف خاصة. لقد غطينا بعض الشيء في البرنامج التعليمي السابق على أزرار CSS3 ؛ هذه الشخصية مسبوقة بمزيج من علامة الضم (و) ، علامة التجزئة (#) و س ثم يليه الرقم السداسي عشر الذي يمثل الحرف.

على سبيل المثال ، فإن f0c6 هو رقم سداسي عشري ، لذلك سيكون مرجع الأحرف الرقمية في HTML & # xf0c6., في FontAwesome سيعرض هذا الرمز أيقونة مشبك الورق, مثل ذلك؛

• تجريبي يونيكود

Subsetting الخط

قد لا تكون جميع الرموز في المجموعة ضرورية. في هذه الحالة ، يمكننا إسقاط الأحرف غير المستخدمة عن طريق تعيين الخط الذي سيفعل أيضًا يؤدي إلى انخفاض أحجام ملف الخط. لحسن الحظ ، هناك أداة مفيدة من FontSquirrel للقيام بهذه المهمة بسهولة ، @ font-face generator.

بعد ذهابك إلى تلك الصفحة وإضافة الخط ، حدد خبير. سترى المزيد من الخيارات. تحديد Subsetting مخصص.

في هذا المثال ، نستخدم الخط Sociolico لعرض أيقونات الوسائط الاجتماعية في موقعنا على الويب ، ولكن الرموز التي سنحتاجها هي فقط Dribble و Facebook و Twitter التي تمثلها هذه الأحرف على التوالي ؛ د ، و و تي. لذلك ، ضع هذه الأحرف في حقل إدخال "الأحرف الفردية" كما يلي:

ونحن انتهينا. الآن يمكننا تنزيل الخط وفي حالتي ، تبين أن حجم الخط هو 3 كيلو بايت فقط إلى 5 كيلو بايت. تذكر أيضا أن الشخصيات الوحيدة التي سيتم تقديمه في أيقونة هي فقط د ، و و ر, بينما الأحرف الأخرى ستجعل فقط رسالة عادية.

الفكر النهائي

شيء واحد لا يمكننا القيام به في هذه الممارسة هو إضافة تأثيرات مفصلة للغاية مثل هذا إلى الأيقونة.

ومع ذلك ، إذا كان تصميمنا العام لا يتطلب تفاصيل على هذا المستوى ، فقد يكون هذا الأسلوب طريقة أفضل لخدمة الرموز في مواقع الويب. إنه مرن ، قابلية للتطوير ، جاهز لشبكية العين بحجم ملف صغير جدًا ، ماذا يمكن أن نطلب?

أخيرًا ، إذا كنت ترغب في الغوص بشكل أعمق في هذا الموضوع ، في الأسفل قمنا بتجميع بعض المراجع المفيدة ، بالإضافة إلى العرض التوضيحي ورمز المصدر للتنزيل.

• كيف اصنع بنفسك Webfont - WebDesignerDepot.com
• عرض الخطوط وخصائص البيانات - 24Ways
• استخدام خاص يونيكود - ويكيبيديا

• عرض
• تحميل المصدر