يلعب التصميم والمظهر دورا مهما في إنشاء موقع ويب جميل ومهني. الخطوط هي أحد عناصر التصميم الرئيسية. يمكن أن تضيف الخطوط تفردا إلى موقعك وتساعد في نقل أسلوبه ومزاجه. في هذه المقالة ، ونحن سوف اقول لكم كيفية توصيل أنماط الخط إلى هتمل.
الخطوة الأولى لتضمين أنماط الخطوط في هتمل هي تحديد الخط المناسب لموقع الويب الخاص بك. هناك العديد من الخطوط المجانية والمدفوعة المتاحة على الإنترنت. يمكنك اختيار خط وفقا للموضوع والغرض من موقعك. ثم عليك تنزيل ملف خط (عادة ملف بامتداد.صندوق النقد الدولي أو .ووف).
بعد ذلك ، بعد تنزيل ملف الخط ، يمكنك توصيله بمستند هتمل باستخدام علامة. تسمح لك هذه العلامة بربط ملف نمط خارجي بمستند هتمل الخاص بك. لا تنس تحديد المسار إلى ملف الخط الذي تم تنزيله في سمة هريف للعلامة. من المهم أيضا تحديد القيمة الصحيحة لسمة ريل كـ"ورقة أنماط".
عند إرفاق ملف خط بمستند هتمل الخاص بك ، يمكنك تعيين أنماطه باستخدام كس. للقيام بذلك ، قم بإنشاء فئة كس أو معرف ، وقم بتطبيقه على العنصر المطلوب ، واستخدم خاصية عائلة الخط لتحديد الخط الذي اخترته. على سبيل المثال ، إذا كنت ترغب في تطبيق خط على فقرة ، يمكنك استخدام محدد "ص" وتحديد اسم الفئة أو المعرف ، ثم إضافة خاصية عائلة الخط بالخط المطلوب.
لا تنس أن الخط يجب أن يكون متاحا للمستخدمين ، لذلك من المهم اختيار الخطوط بترخيص مفتوح أو شراء الحقوق المناسبة لاستخدام الخطوط التجارية.
- ربط أنماط الخط إلى هتمل: تعليمات للمبتدئين
- اختيار الخط المناسب
- الحصول على ملفات الخط
- ربط الخطوط عبر كس
- استخدام الخطوط في مستند هتمل
- الفحص الصحي
ربط أنماط الخط إلى هتمل: تعليمات للمبتدئين
عند تصميم صفحة ويب ، وأحيانا يكون من الضروري استخدام خط معين لإعطائها شخصية وأسلوب. في مثل هذه الحالات ، بما في ذلك أنماط الخطوط في هتمل يمكن أن تساعدك على تحقيق التأثير المطلوب. في هذا البرنامج التعليمي ، سوف تظهر لك كيفية توصيل أنماط الخط إلى هتمل ، حتى لو كنت بدأت للتو.
الخطوة 1: حدد الخط
قبل البدء في توصيل أنماط الخطوط إلى هتمل ، تحتاج إلى تحديد الخط الذي تريد استخدامه على صفحة الويب الخاصة بك. هناك العديد من الخطوط المجانية التي يمكنك العثور عليها على الإنترنت. يتطلب بعضها ترخيصا ، لذا تأكد من اختيار الخطوط التي يمكن استخدامها دون انتهاك حقوق النشر.
الخطوة 2: قم بتوصيل ملف أنماط الخطوط
بعد تحديد الخط ، تحتاج إلى توصيل ملف نمط الخط بصفحة الويب الخاصة بك. يمكنك القيام بذلك عن طريق إضافة رابط إلى ملف النمط في قسم ترميز هتمل الخاص بك.
للقيام بذلك ، إضافة التعليمات البرمجية التالية:
يستعاض عن عبارة "https://example.com/css/font-style.css" انقر على الرابط إلى ملف نمط الخط الذي حددته. تأكد من أن الارتباط يشير بشكل صحيح إلى ملف النمط.
الخطوة 3: تغيير نمط الخط
بمجرد إرفاق ملف نمط الخط ، يمكنك تطبيقه على عناصر محددة على صفحة الويب الخاصة بك. للقيام بذلك ، استخدم خاصية عائلة الخط المغلق. على سبيل المثال ، إذا كنت تريد تطبيق خط على العنوان ، فأضف الكود التالي:
العنوان
استبدل "اسم الخط المحدد" باسم الخط الذي قمت بتوصيله في الخطوة 2. إذا كان الخط المحدد غير متوفر ، فإن المتصفح استخدام الخط بلا الرقيق كبديل.
الخطوة 4: كرر الخطوة 3 للعناصر الأخرى
يمكنك تكرار الخطوة 3 للعناصر الأخرى على صفحة الويب الخاصة بك لتطبيق الخط الذي اخترته عليها. ما عليك سوى إضافة سمة نمط تحدد الخط لكل عنصر تريد استخدام هذا الخط فيه.
الخطوة 5: تحقق من النتيجة
بعد الانتهاء من جميع الخطوات السابقة ، احفظ صفحة الويب الخاصة بك وافتحها في متصفح لرؤية النتيجة. إذا تم كل شيء بشكل صحيح ، يجب أن ترى أن الخط الذي اخترته يتم تطبيقه بنجاح على العناصر الموجودة على صفحة الويب الخاصة بك.
مبارك! لقد تعلمت للتو كيفية توصيل أنماط الخطوط إلى هتمل. الآن يمكنك استخدام خطوط مختلفة لإعطاء صفحات الويب الخاصة بك شخصية وأسلوب.
اختيار الخط المناسب
فيما يلي بعض النصائح لمساعدتك في اختيار الخط الصحيح:
1. سهولة القراءة:
واحدة من أهم خصائص الخط هي سهولة قراءته. يجب أن يكون الخط سهل القراءة بأي حجم وعلى أي جهاز. تجنب الخطوط الضيقة جدا أو الأنيقة، والتي قد يكون من الصعب قراءتها.
2. نمط وموضوع:
اختر خطا يطابق نمط وموضوع موقع الويب أو التطبيق الخاص بك. على سبيل المثال ، إذا كان لديك تصميم عصري وحديث ، يمكنك اختيار خط بأشكال هندسية. إذا كنت تقوم بإنشاء مدونة أو موقع إخباري ، فسيكون من الأفضل اختيار خط أكثر تقليدية وسهل القراءة.
3. توافق الجهاز:
تأكد من أن الخط الذي تختاره سيعرض جيدا على أجهزة مختلفة وفي متصفحات مختلفة. تجنب الخطوط التي قد تسبب مشاكل في العرض أو قد يتم تحميلها ببطء.
4. عدد الخطوط:
لا تستخدم الكثير من الخطوط المختلفة في نفس الصفحة ، حيث يمكن أن يؤدي ذلك إلى حدوث فوضى وتقليل إمكانية القراءة. حدد نفسك ببعض الخطوط-واحدة للعناوين ، وأخرى للنص الرئيسي ، وربما واحدة للأجزاء المميزة.
5. اختبار:
قبل أن تختار خطا أخيرا ، اختبره على أجهزة مختلفة وأحجام مختلفة. تأكد من أن الخط يبدو جيدا في ظروف مختلفة ولا يسبب أي مشاكل في القراءة أو العرض.
اختيار الخط الصحيح ليس بالمهمة السهلة ، ولكن اختيار الخط المناسب يمكن أن يجعل تصميمك أكثر جاذبية وفعالية واحترافية. استخدم هذه النصائح للعثور على الخط المثالي لمشروعك.
الحصول على ملفات الخط
لبدء توصيل أنماط الخطوط إلى هتمل ، تحتاج إلى الحصول على ملفات الخط. هناك عدة طرق للحصول على ملفات الخطوط.
1. قم بتنزيل ملفات الخطوط من موقع الخط الرسمي. تقدم العديد من الخطوط ملفاتها للتنزيل على مواقعها الرسمية. انتقل إلى موقع الخط وابحث عن القسم الذي يحتوي على تنزيل ملفات الخطوط. يوجد عادة في الصفحة الرئيسية أو في قسم التنزيلات. قم بتنزيل ملفات الخطوط على جهاز الكمبيوتر الخاص بك.
2. استخدم خدمات تنزيل الخطوط عبر الإنترنت. هناك خدمات عبر الإنترنت تسمح لك بتنزيل وإنشاء ملفات الخطوط بتنسيقات مختلفة. بعض الخدمات الشعبية تشمل Fonts.com , خطوط جوجل وخطوط أدوبي. حدد الخط الخاص بك ، وقم بتكوين الإعدادات اللازمة ، وقم بتنزيل ملفات الخطوط على جهاز الكمبيوتر الخاص بك.
3. استخدم ملفات الخطوط التي تم تنزيلها بالفعل. إذا كان لديك بالفعل ملفات الخط على جهاز الكمبيوتر الخاص بك أو الخادم ، يمكنك استخدامها للاتصال أتش تي أم أل. نقل ملفات الخطوط التي تم تنزيلها إلى مجلد مشروع الويب الخاص بك أو موقع معين على الخادم.
ربط الخطوط عبر كس
يمكنك توصيل الخطوط في مستند هتمل باستخدام كس. يتيح لك ذلك تغيير الخط لصفحة الويب بأكملها أو لعنصر معين فقط.
أولا ، تحتاج إلى تحديد الخط المطلوب. يمكنك استخدام الخطوط المثبتة مسبقا في نظام التشغيل ، أو تنزيل خط ويب باستخدام قواعد كس.
لتحديد وتوصيل الخطوط. للقيام بذلك ، حدد المسار إلى ملفات الخط وحدد اسم الخط.
نموذج التعليمات البرمجية لتوصيل الخط:
@الخط الوجه {
في هذا المثال ، نحدد خط مع اسم 'اسم الخط' وتحديد مسارات لملفات الخط من صيغ مختلفة (عادة وف ووف 2 تستخدم).
بمجرد تعريف الخط ، يمكن تطبيقه على العناصر المطلوبة باستخدام الخاصية
الخط الأسرة
. للقيام بذلك ، حدد اسم الخط الذي قمنا بتعيينه في قاعدة كس
@الخط الوجه
.
مثال على استخدام خط متصل:
}
في هذا المثال ، نقوم بتعيين الخط 'اسم الخط' للمستند بأكمله. إذا كان هذا الخط غير متوفر ، سيتم استخدام الخط بلا الرقيق.
تلعب الخطوط دورا مهما في إنشاء أسلوب وتصميم فريد لصفحات الويب. في هتمل ، يمكنك استخدام طرق مختلفة للاتصال واستخدام الخطوط.
1. الخطوط المضمنة:
يمكنك استخدام بعض الخطوط المثبتة مسبقا على جهاز الكمبيوتر الخاص بالمستخدم. للقيام بذلك ، استخدم خاصية كس "الخط الأسرة". على سبيل المثال ، لاستخدام الخط أريال ، إضافة التعليمات البرمجية التالية إلى المقطع المستند أتش تي أم أل:
2. توصيل الخطوط الخارجية:
يمكنك أيضا توصيل الخطوط غير القياسية لجميع أجهزة الكمبيوتر. للقيام بذلك ، استخدم خدمات مثل خطوط جوجل أو خط رائع. على سبيل المثال ، لتوصيل الخط روبوتو من الخطوط جوجل ، إضافة التعليمات البرمجية التالية إلى قسم الوثيقة أتش تي أم أل: