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

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 القديم الذي تعرفه وتحبه:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	@font-face {
		font-family: 'Abalone';
		src: url('fonts/Abelone-FREE.otf');
	}
	@font-face {
		font-family: 'Playbox';
		src: url('fonts/Playbox-FREE.otf');
	}
	@font-face {
		font-family: 'Bixa';
		src: url('fonts/NTBixa-Color.woff2');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	.abalone {
		font-family: 'Abalone';
		font-size: 3.8rem;
	}
	.playbox {
		font-family: 'Playbox';
	}
	.bixa {
		font-family: 'Bixa';
	}
	</style>
</head>
<body>
		<a class="gilbert">Gilbert Color Font</a>
		<div class="abalone">Abalone Color Font</div>
		<div class="playbox">Playbox Color Font</div>
		<div class="bixa">Bixa Color Font</div>
</body>
</html>

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

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

تعديل CSS

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	a {
		color: red;
	}
</head>
<body>
		<div class="gilbert">Gilbert Color <a href="#">Link</a></div>
</body>
</html>

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

الملخص

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