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