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