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