1. Design & Illustration
  2. Web Typography

كيفية استخدام الخطوط الملونة على الويب

by
Read Time:7 minsLanguages:

Arabic (العربية/عربي) translation by Amr Salah (you can also view the original English article)

يعرف كل مصمم ويب كيفية تعيين لون الخط ، أليس كذلك؟ إنها واحدة من أول الأشياء التي نقوم بها عندما نبدأ في تعلم CSS. نختار لونًا ، ثم نستخدم الأنماط لتعيينه ، مثل ;color: blue ، أو color: purple; ؛ لذلك فإن جميع الحروف الرسومية في الخط الذي تم اختياره تتحول إلى هذا اللون ، وهذا اللون فقط.

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

حسنا ، مع ظهور خطوط اللون المفتوحة النوع ، يمكنك القيام بذلك تماما.

تحقق من هذه الصورة من أربعة ألوان مختلفة:

قد يبدو هذا مثل الصور الثابتة الموضوعة معًا في "Illustrator" ، ولكنك تبحث في الواقع في نص قابل للقراءة ومحرك في محرك البحث في متصفح.

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

استخدام الخطوط الملونة

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

  • Gilbert على typewithpride.com
  • Abalone على colorfontweek.fontself.com
  • Playbox على colorfontweek.fontself.com
  • Bixa على bixacolor.com

الشفرة المستخدمة لإضافتها إلى الصفحة ليست جديدة ، إنها مجرد @ font-face القديم الذي تعرفه وتحبه:

المتصفحات والدعم

في هذه اللحظة ، إذا أردت تجربة خطوط ألوان في المتصفح ، فستحتاج إلى استخدام متصفح "Firefox" أو "Edge" ، وهما المتصفحان الوحيدان اللذان يتمتعان بالدعم الكامل. يحد "Safari" الدعم إلى تنسيق SBIX فقط. يدعم "Chrome" فقط على نظام التشغيل Android ، ثم يدعم تنسيق CBDT فقط. الأوبرا لا يوجد لديه أي دعم على الإطلاق.

تعديل CSS

في الوقت الحالي ، لا يمكننا استخدام CSS لتغيير الألوان المستخدمة داخل خط ألوان. ومع ذلك ، من الممكن أن يقوم مصمم الخطوط بشحن خط يتضمن عددًا من الأشكال المعينة مسبقًا. يمكن بعد ذلك تعديل هذه الأشكال باستخدام خاصية font-feature-settings.

يمكننا أن نرى هذه الوظيفة في العمل من خلال عرض روبن ريندل للخط Trajan Color من TypeKit.

يتم إصلاح الألوان ، حتى على الروابط

بما أن ألوان خط الألوان ثابتة داخل الخط نفسه ، فإن خاصية Color التي تطبق عادة على النص الخاص بك لن يكون لها أي تأثير ، بما في ذلك الروابط ، مهما كانت حالتها.

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

إليك مثال على الكود:

هذا سيعطينا التسطير الأحمر هنا في الكلمة الأخيرة:

الملخص

بين الخطوط الملونة والخطوط المتغيرة ، يبدو أن أحدث التطورات في "Open Type" تجعل الخطوط في المتصفح أكثر متعة وإثارة للاهتمام. مستقبل تصميم الويب الطباعة يبدو مشرقا!

روابط ذات صلة


One subscription.
Unlimited Downloads.
Get unlimited downloads