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