تطوير الويب هو عالم مليء بالميزات والأدوات التي تسمح لك بالتحكم في مظهر موقع الويب. أحد الجوانب المهمة للتصميم هو تغيير الخط والحجم ونمط الخط. هذا يساعد على جعل النص أكثر قابلية للقراءة وجاذبية للزوار.
يمكنك استخدام الخاصية المغلق الخط الأسرة لتغيير نوع الخط. تتيح لك هذه الخاصية تحديد خط معين من تلك المتوفرة على الكمبيوتر أو استخدام خط تم تنزيله من الخادم. مثال على استخدام هذه الخاصية: عائلة الخط: أريال ، بلا الرقيق ؛ هنا أريال و بلا الرقيق هي أسماء المحارف. إذا لم يكن الكمبيوتر الزائر أريال ، سيتم استخدام الخط بلا الرقيق ، وهو النظام الافتراضي.
يمكن تغيير حجم الخط باستخدام خاصية حجم الخط. يمكن تحديد وحدات القياس بالبكسل (بكسل) أو النسب المئوية ( ٪ ) أو القيم النسبية مثل إم أو ريم. مثال الاستخدام: حجم الخط: 16 بكسل; هنا 16 بكسل هو حجم الخط الذي سيتم استخدامه للنص. يمكن زيادة هذه المعلمة أو تقليلها لتحقيق التأثير المطلوب.
يمكنك استخدام خاصية نمط الخط لتغيير مخطط النص. يمكن أن تكون القيم طبيعية (خط قياسي) أو مائل (مائل) أو مائل (خط مائل). مثال الاستخدام: نمط الخط: مائل هنا سيتم عرض النص بخط مائل ، مما يمنحه نمطا خاصا ويبرزه من بين نصوص أخرى.
يعد تغيير نوع الخط وحجم الخط ونمط الخط جانبا مهما من تصميم موقع الويب. يمكن للخط المختار جيدا أن يجعل النص أكثر قابلية للقراءة وجاذبية للزوار. استخدم خصائص كس أعلاه لتحقيق التأثير المطلوب وإنشاء تصميم فريد لموقعك.
- تغيير نوع الخط
- كيفية اختيار الخط المناسب لموقعك
- المحارف الشعبية لتصميم الويب
- تغيير حجم الخط
- كيفية تحديد حجم الخط الصحيح
- استخدام وحدات القياس النسبية
- تغيير نمط الخط
- كيفية استخدام أنماط خطوط مختلفة للتأثيرات
تغيير نوع الخط
يسمح لك بتعيين أنماط مختلفة للعناصر.
тега . Например:
Arial — гарнитура шрифта Arial.
Verdana — гарнитура шрифта Verdana.
Гарнитура шрифта определяет набор символов, облик и стиль шрифта. اختر نوع الخط المناسب للمحتوى الخاص بك ويضمن سهولة قراءة النص.
كيفية اختيار الخط المناسب لموقعك
1. تحديد الغرض من موقعك
قبل اختيار الخط ، حدد الغرض من موقعك وما هي المشاعر أو الرسائل التي تريد أن ينظر إليها بها. على سبيل المثال ، إذا كان موقعك يستهدف الأطفال ، فيمكنك اختيار خط مضحك وممتع. إذا كان موقعك يمثل شركة تجارية ، فقد تحتاج إلى خط أكثر جدية واحترافية.
2. ضع في اعتبارك سهولة القراءة
أحد أهم الجوانب عند اختيار الخط هو سهولة قراءته. تأكد من أن الخط قابل للقراءة على أجهزة مختلفة وبأحجام مختلفة. حاول تجنب الخطوط الصغيرة جدا أو الرفيعة جدا ، والتي قد يصعب قراءتها.
3. خلق التباين
يمكن أن يضيف التباين بين الخطوط اهتماما وتسلسلا هرميا إلى موقعك. حدد الخط الرئيسي للعناوين والنص الرئيسي ، ثم أضف خطا إضافيا للعناوين الفرعية وعناصر التمييز. تأكد من تطابق الخطوط جيدا وتبدو متناغمة معا.
4. التحقق من التوافر
تأكد من أن الخط الذي تختاره مدعوم على جميع الأجهزة وأنظمة التشغيل ، ومتاح أيضا لجميع المستخدمين ، بما في ذلك أولئك الذين لديهم دعم سيريلي مثبت. سيساعد هذا موقعك على أن يكون في متناول جميع المستخدمين ويزيد من ملاءمته.
باتباع هذه النصائح ، ستتمكن من اختيار الخط المناسب لموقعك ، مما سيساعدك على إنشاء تصميم فريد وجذاب.
المحارف الشعبية لتصميم الويب
1. روبوتو: هذا هو خط بلا الرقيق مرنة مع شكل واضح وقابل للقراءة. تم تصميم روبوتو خصيصا للاستخدام في تصميم مواقع الإنترنت ، ويسمح لك للحفاظ على قراءة جيدة على مختلف الشاشات والأجهزة.
2. فتح بلا: هذه هي عائلة شعبية أخرى من الخطوط نوع بلا الرقيق الذي يعمل كبيرة في كل من العناوين والنصوص. فتح بلا لديه قراءة جيدة ومناسبة لمختلف أنماط تصميم المواقع الإلكترونية.
3. لاتو: هذا خط حديث مع عائلة من المحارف التي يمكن استخدامها في مهام تصميم الويب المختلفة. واحدة من معالمه هو منحنيات ناعمة ونسب متناغمة.
4. مونتسيرات: إنه خط حديث بأشكال هندسية وخطوط نظيفة. تبدو مونتسيرات جيدة كعناوين رئيسية ونصوص بارزة ، ومن السهل قراءتها على الأحجام الصغيرة والكبيرة.
5. ميريويذر: هذا هو الخط الرقيق ، مثالية للاستخدام في النصوص والفقرات. لديها نظرة كلاسيكية والوضوح ، مما يجعلها خيارا ممتازا للمدونات والمقالات.
هذه ليست سوى عدد قليل من المحارف الشائعة لتصميم الويب ، ويختار كل مصمم أفضل ما يناسب مشروعه وأهدافه. من المهم أن تتذكر أن الخط الذي تختاره يجب أن يكون سهل القراءة ومزج جيدا مع بقية تصميم صفحة الويب.
تغيير حجم الخط
لتغيير حجم الخط في مستند هتمل ، يمكنك استخدام علامة مع سمة النمط عن طريق تحديد قيمة خاصية حجم الخط. على سبيل المثال ، لتعيين حجم الخط إلى 12 بكسل ، يمكنك كتابة التعليمات البرمجية التالية:
النص
يمكنك أيضا استخدام قيم حجم الخط النسبية مثل إم و ريم. على سبيل المثال ، لتعيين حجم الخط إلى 1.5 مرة أكبر ، يمكنك استخدام التعليمات البرمجية التالية:
النص
باستخدام القيم النسبية ، يمكنك بسهولة تغيير حجم الخط على مستويات مختلفة من التسلسل الهرمي للعناصر داخل المستند.
كيفية تحديد حجم الخط الصحيح
1. سهولة القراءة
أول شيء يجب الانتباه إليه هو سهولة قراءة النص الخاص بك. يجب أن يكون حجم الخط كافيا حتى يتمكن القراء من قراءة المحتوى بشكل مريح دون إجهاد أعينهم. قد يكون من الصعب قراءة الخط الصغير ، ويمكن أن يتسبب الخط الكبير جدا في حدوث مشكلات في التمرير وتخطيط الصفحة.
2. نوع المحتوى
يجب تكييف حجم الخط مع نوع المحتوى الخاص بك. على سبيل المثال ، عادة ما يكون للعناوين الرئيسية حجم خط أكبر من النص العادي لجذب انتباه القراء. وتجدر الإشارة أيضا إلى أن الخط المائل قد يكون له حجم مختلف عن الخط العادي لضمان اتساق النمط المرئي.
3. التصميم التكيفي
إذا كان موقع الويب الخاص بك مستجيبا ، فيجب تحديد حجم الخط بطريقة تبدو جيدة على الأجهزة والشاشات المختلفة. يجب أن يتكيف الخط المتجاوب مع عرض الشاشة والمقياس للحصول على العرض الأمثل.
4. نوع الخط
قد تكون بعض الخطوط أصغر وأكثر كثافة من غيرها. عند اختيار حجم الخط ، يجب أن تأخذ في الاعتبار نوع الخط وتباعد الحروف (تقنين الأحرف) للتأكد من أن النص يبدو قابلا للقراءة ومتوازنا جيدا.
من المهم أن تتذكر أن تحديد حجم الخط الصحيح هو عملية تجربة وخطأ. اختبار أحجام الخطوط المختلفة على أجهزة مختلفة ومقارنة القراءة والمظهر.
استخدام وحدات القياس النسبية
تتوفر العديد من وحدات القياس النسبية في هتمل و كس:
- م: م واحد يساوي حجم الخط الحالي للعنصر الذي يتم استخدامه فيه. على سبيل المثال ، إذا تم تعيين حجم الخط على 16 بكسل ، فسيكون 1 م مساويا لـ 16 بكسل.
- ريم: ريم واحد يساوي أيضا حجم الخط الحالي للعنصر ، ولكن على عكس إم ، يتم تحديد الحجم حسب حجم الخط الأساسي على العنصر الجذر (عادة عنصر هتمل). هذا يجعل من السهل إدارة أحجام الخطوط في جميع أنحاء الموقع.
- %: تحدد النسبة المئوية الحجم بالنسبة للعنصر الأصل. على سبيل المثال ، إذا قمت بتعيين حجم الخط إلى 150 ٪ ، فسيتم زيادته بنسبة 50 ٪ من حجم خط العنصر الأصل.
تسمح لك الوحدات النسبية بإنشاء تصميم متناغم ومتناسب ، وكذلك لضمان راحة قراءة النص على الأجهزة المختلفة. غالبا ما يتم استخدامها في التصميم سريع الاستجابة واستعلامات الوسائط لإنشاء مواقع ويب سريعة الاستجابة.
على سبيل المثال ، يمكنك استخدام رمز كس التالي لتغيير حجم الخط: