يلعب اختيار الخط الصحيح دورا مهما في إنشاء تصميم فعال لموقع الويب. لا يؤثر فقط على قابلية قراءة المحتوى ، ولكنه يشكل أيضا الصورة المرئية الشاملة والجو العام للصفحة. غالبا ما يستخدم المطورون الخطوط الافتراضية التي يوفرها نظام التشغيل أو المتصفح ، لكن بعض المواقف تتطلب نمطا نصيا فريدا.
في هذه المقالة ، سنلقي نظرة على إرشادات خطوة بخطوة حول كيفية تغيير الخط الافتراضي على موقعك. وسوف ننظر في طريقتين رئيسيتين: باستخدام أنماط كس واستخدام كود هتمل. في الحالة الأولى ، ستتمكن من تغيير الخط لجميع العناصر الموجودة على الموقع ، وفي الحالة الثانية — فقط لبعض الكتل أو الفقرات.
أسهل طريقة لتغيير نمط النص هو استخدام كس. سوف تحتاج إلى إضافة أنماط إلى ملف كس من موقعك أو تسجيلها في العلامة
внутри тега каждой страницы. Для изменения шрифта укажите свойство "font-family" и укажите название шрифта в кавычках. Например: Arial.ملاحظة: إذا كنت لا تريد استخدام خط واحد فقط ، فيمكنك تحديد خطوط متعددة في سمة "عائلة الخط" مفصولة بفواصل. سيستخدم المتصفح أول خط متاح من القائمة.
- لماذا من المهم تغيير الخط الافتراضي على الموقع
- تحديد الخط المناسب لموقعك
- تحميل الخط المحدد وإضافته إلى الموقع
- تغيير أنماط النص على موقعك
- تحقق من شكل الخط على الأجهزة المختلفة
- تتبع وتقييم تأثير تغييرات الخط
لماذا من المهم تغيير الخط الافتراضي على الموقع
سيسمح لك تغيير الخط الافتراضي على الموقع بما يلي:
| 1. | تحسين قابلية قراءة النص. سيساعد اختيار خط واضح وقابل للقراءة المستخدم على قراءة المحتوى على موقعك بشكل أكثر راحة. |
| 2. | إنشاء أسلوب فريد لا ينسى. سيساعدك اختيار خط يطابق علامتك التجارية أو سمة الموقع على إنشاء نمط يمكن التعرف عليه ويسمح لك بالتميز عن المنافسة. |
| 3. | تحسين مظهر الموقع. يمكن أن يؤدي اختيار الخط الصحيح إلى تحسين المظهر الجمالي لموقعك بشكل كبير ، وتعزيز تأثيره على الزوار وخلق انطباع أول إيجابي. |
| 4. | زيادة رضا المستخدمين. يساهم الخط الجيد في إدراك وفهم أفضل للمحتوى ، مما يزيد من رضا المستخدمين واحتمال بقائهم على الموقع. |
| 5. | تحسين القدرة على التكيف وإمكانية الوصول إلى الموقع. عند اختيار خط ، يجب أن تأخذ في الاعتبار إمكانية قراءته على مختلف الأجهزة وأحجام الشاشة. سيساعد اختيار الخط الصحيح في تحسين القدرة على التكيف وإمكانية الوصول إلى موقعك. |
لذا ، يعد تغيير الخط الافتراضي على الموقع خطوة مهمة نحو إنشاء واجهة مستخدم جذابة وقابلة للقراءة. اختر الخط المناسب الذي يعكس المفهوم العام لموقعك ويساعدك على تحقيق أهدافك وغاياتك.
تحديد الخط المناسب لموقعك
قبل اختيار الخط ، حدد النمط العام لموقعك. إذا كان موقعك موجها للأعمال ، فيجب أن يكون الخط رسميا ومهنيا. إذا كان موقعك يستهدف جمهور الشباب ، فقد ترغب في التفكير في خطوط أكثر حداثة ومرحة.
عندما تحدد النمط العام لموقعك ، ضع في اعتبارك الجوانب التالية عند اختيار الخط:
1. سهولة القراءة:
يجب أن يكون الخط سهل القراءة ، خاصة بالنسبة للكتل الطويلة من النص. تجنب الخطوط التي تحتوي على رقيق إضافي أو خصائص غريبة قد تجعل من الصعب قراءتها.
2. نمط:
اختر خطا يطابق النمط العام لموقعك. ستعمل بعض الخطوط بشكل أفضل مع مواقع الويب التجارية ، بينما قد يكون البعض الآخر أكثر ملاءمة لمواقع الويب الإبداعية أو الفنية.
3. التوافق:
تأكد من أن الخط الذي تختاره متوافق مع أنظمة التشغيل والمتصفحات المختلفة. استخدم الخطوط المدعومة على نطاق واسع لتجنب مشاكل عرض النص على أجهزة مختلفة.
عند تحديد الخط المناسب لموقعك ، ستحتاج إلى تضمينه في التعليمات البرمجية الخاصة بك. اتبع الإرشادات الواردة في بقية هذه المقالة لمعرفة كيفية تغيير الخط الافتراضي على موقعك.
تحميل الخط المحدد وإضافته إلى الموقع
بعد تحديد الخط المناسب لموقعك ، تحتاج إلى تنزيله وإضافته إلى موقعك. فيما يلي بعض الخطوات التي تحتاج إلى اتباعها:
| الخطوة 1: | قم بتنزيل ملف الخط المقدم لك من قبل المرخص. غالبا ما تحتوي ملفات الخطوط على امتداد.تف (تروتايب الخط) أو .أوتف (أوبن الخط). |
| الخطوة 2: | إنشاء مجلد جديد على الخادم الخاص بك أو في نظام إدارة المحتوى (كمس) من موقعك. قم بتسمية هذا المجلد ، على سبيل المثال ، " الخطوط "أو"الخطوط". |
| الخطوة 3: | انسخ ملفات الخطوط إلى المجلد الذي تم إنشاؤه حديثا على الخادم الخاص بك. |
| الخطوة 4: | ارجع إلى ملف نمط موقعك. بالنسبة لمعظم المواقع ، هذا ملف بامتداد.المغلق (أوراق الأنماط المتتالية). |
| الخطوة 5: | افتح ملف النمط في محرر نصوص وأضف الكود التالي: |
}
إلى المسار إلى ملف الخط على الخادم الخاص بك.
إلى عن على .ملفات أوتف.
احفظ ملف النمط وقم بتحميله على الخادم الخاص بك أو احفظ التغييرات على نظام إدارة المحتوى. الآن قمت بإضافة الخط المحدد بنجاح إلى موقعك!
تغيير أنماط النص على موقعك
يمكن تغيير مظهر النص على موقعك من خلال تطبيق أنماط مختلفة. تسمح لك الأنماط بتعيين الخط والحجم واللون والسمات الأخرى للنص. لتغيير أنماط النص على موقعك ، اتبع الخطوات التالية:
- حدد خطا: حدد الخط الذي تريد استخدامه للنص على موقعك. يمكنك الاختيار من بين مجموعة متنوعة من الخيارات مثل أريال ، تايمز نيو رومان ، فيردانا ، إلخ.
- تعيين حجم الخط: حدد حجم الخط المطلوب للنص على موقعك. يمكنك استخدام القيم المطلقة (على سبيل المثال 12 بكسل) أو القيم النسبية (على سبيل المثال 1.2 م).
- اضبط لون النص: حدد لون النص المطلوب على موقعك. يمكنك استخدام أسماء الألوان (على سبيل المثال ، "أحمر") أو رموز الألوان السداسية العشرية (على سبيل المثال ، "#فف0000").
- سمات النص الأخرى: بالإضافة إلى الخط والحجم واللون ، يمكنك أيضا تعيين سمات نص أخرى مثل المحاذاة والخط الغامق والإمالة والتسطير.
لتغيير أنماط النص على موقعك ، يمكنك استخدام أنماط كس المضمنة أو أوراق الأنماط الخارجية. يتم تعيين أنماط كس المضمنة مباشرة داخل علامات هتمل ، ويتم تخزين أوراق الأنماط الخارجية في مستندات ملف منفصلة.
نموذج التعليمات البرمجية مع الأنماط المضمنة:
سيتم عرض هذا النص بخط أريال ، بحجم 16 بكسل وباللون الأسود.
لتغيير أنماط النص على موقعك ، قد تحتاج إلى التجربة قليلا وتجربة مجموعات مختلفة من الخطوط والأحجام والألوان للعثور على أفضل خيار يناسب تصميمك وتفضيلاتك.
تحقق من شكل الخط على الأجهزة المختلفة
بعد تغيير الخط الافتراضي على موقعك ، من المهم التحقق من كيفية عرضه على أجهزة مختلفة. يمكن أن يحتوي كل جهاز على إعدادات عرض مختلفة ، مثل دقة الشاشة وحجم الخط ونظام التشغيل. للتأكد من أن الخط الجديد يبدو جذابا وقابل للقراءة على جميع الأجهزة ، اتبع الخطوات التالية:
تحقق من كمبيوتر العمل الخاص بك: افتح موقع الويب الخاص بك على كمبيوتر العمل الخاص بك وتحقق من شكل الخط الجديد على الشاشة الكبيرة. تأكد من أن الخط يقرأ بوضوح ودون تشويه ، وأنها مصممة وفقا لتوقعاتك.
تحقق من الأجهزة المحمولة: استخدم هاتفك الذكي أو جهازك اللوحي لفتح موقع الويب الخاص بك والتحقق من شكل الخط على شاشة صغيرة. يرجى ملاحظة أن الخط قد يبدو مختلفا قليلا على الأجهزة المحمولة بسبب ميزاتها. تأكد من أن الخط يقرأ بوضوح ويبدو جيدا حتى على الشاشة الصغيرة.
تحقق من المتصفحات الأخرى: افتح موقع الويب الخاص بك على متصفحات مختلفة مثل كروم وفايرفوكس وسفاري للتأكد من أن الخط الجديد يبدو جيدا بنفس القدر على جميع المتصفحات الشائعة. في بعض الأحيان ، قد تعرض المتصفحات خطوطا بها اختلافات طفيفة ، لذلك من المهم التأكد من أن الخط الجديد لا يفقد أسلوبه وقابليته للقراءة في أي متصفح.
سيساعدك التحقق من الخط الجديد على أجهزة مختلفة على التأكد من أن موقعك يبدو جذابا واحترافيا لجميع المستخدمين ، بغض النظر عن الجهاز الذي يستخدمونه لعرض موقعك.
تتبع وتقييم تأثير تغييرات الخط