كيفية إضافة الخطوط إلى أتش تي أم أل: طريقة سهلة لتنزيل الخطوط

أتش تي أم أل هي لغة ترميز تسمح لك بإنشاء صفحات ويب باستخدام عناصر وأنماط مختلفة. الخطوط هي أحد العناصر المهمة لتصميم الويب. يمكن للخط المختار جيدا أن يحسن بشكل كبير من إدراك المحتوى ويزيد من مستوى التصميم.

في هذه المقالة ، سنلقي نظرة على طريقة بسيطة لتحميل الخطوط في صفحة هتمل. هناك عدة طرق لإضافة الخطوط ، لكننا سنركز على الخيار الأبسط والأكثر سهولة. سوف نستخدم خدمة جوجل الخطوط على شبكة الإنترنت لتحميل الخطوط.

جوجل الخطوط هي مكتبة الخطوط المجانية التي تقدمها جوجل. أنه يحتوي على عدد كبير من الخطوط من مختلف الأنماط والأشكال والأحجام. بفضل خطوط جوجل ، يمكنك استخدام أي خط على صفحة الويب الخاصة بك دون الحاجة إلى تثبيته على خادم المستخدم أو الكمبيوتر.

ميزة استخدام الخطوط من خطوط جوجل هي أنه سيتم عرضها على أي جهاز وفي أي متصفح ، حيث يتم ضبط خطوط جوجل تلقائيا على ميزات كل جهاز ومتصفح.

لذلك ، نحن على استعداد لمعرفة كيفية إضافة الخطوط إلى هتمل باستخدام خطوط جوجل. للقيام بذلك ، اتبع الخطوات التالية:

1. الخطوة 1. دعونا معرفة أنواع الخطوط في هتمل
2. الخطوة 2. ابحث عن الخط المناسب
3. الخطوة 3. قم بتنزيل الخط من الإنترنت
4. الخطوة 4. تحضير ملفات الخط
5. الخطوة 5. إنشاء دليل للخطوط
6. الخطوة 6. إضافة أنماط إلى ملف كس الخاص بك
7. الخطوة 7. ربط الخطوط بمشاريعك

الخطوة 1. دعونا معرفة أنواع الخطوط في هتمل

هناك عدة أنواع من الخطوط في هتمل التي يمكن استخدامها لنمط النص على صفحة ويب. دعونا ننظر إلى الأنواع الرئيسية:

1. خطوط النظام:

خطوط النظام هي مجموعة من الخطوط المثبتة على كمبيوتر المستخدم. عند استخدام هذه الخطوط في هتمل ، سيستخدم المتصفح الخط المثبت على جهاز الكمبيوتر الخاص بالمستخدم. هذا النهج مناسب لأنه لا توجد حاجة لتنزيل الخطوط من الخادم.

مثال الاستخدام:

سيتم عرض هذا النص في خط النظام.

2. خطوط الويب:

خطوط الويب هي خطوط يتم تنزيلها من خادم بعيد وعرضها على صفحة ويب. يتيح لك ذلك استخدام خطوط معينة قد لا تكون متاحة على جهاز الكمبيوتر الخاص بالمستخدم.

عادة ما يتم تحميل خطوط الويب باستخدام قاعدة @فونت-فيس في كس أو باستخدام علامة خاصة في هتمل.

مثال على استخدام كس:

3. مجموعات الخطوط:

تسمح لك مجموعات الخطوط بتحديد خطوط متعددة كبديل يجب استخدامه إذا كان الخط الرئيسي غير متوفر. سيبحث المتصفح عن الخطوط المتاحة بالترتيب المحدد.

مثال الاستخدام:

سيتم عرض هذا النص في أول خط متاح من المجموعة.

الآن بعد أن أتقننا أنواع الخطوط الأساسية في هتمل ، يمكننا الانتقال إلى الخطوة التالية — إضافة الخطوط إلى صفحة ويب.

الخطوة 2. ابحث عن الخط المناسب

عند اختيار خط لمشروع الويب الخاص بك ، من المهم مراعاة عدة معايير. فيما يلي بعض النصائح لمساعدتك في العثور على الخط الصحيح:

1. الأسلوب والمزاج: حدد الحالة المزاجية التي تريد نقلها بالخط. يمكن أن تكون الخطوط كلاسيكية أو حديثة أو مرحة أو جادة. اختر خطا يعكس نمط مشروعك.
2. سهولة القراءة: يجب أن يكون الخط سهل القراءة حتى مع حجم صغير أو على خلفية معقدة. تأكد من أن الحروف يمكن تمييزها بوضوح ولا تندمج معا.
3. الدعم: تحقق مما إذا كان الخط المحدد مدعوما في متصفحات وأنظمة تشغيل مختلفة. قد يتم عرض الخطوط المختلفة بشكل مختلف على أجهزة مختلفة ، لذلك من المهم اختيار خط يعمل في كل مكان.
4. الترخيص: تأكد من أن لديك الحق في استخدام الخط المحدد. قد تكون بعض الخطوط متاحة للاستخدام الشخصي فقط أو تتطلب ترخيصا للاستخدام التجاري.

إذا لم تكن متأكدا من الخط الذي تختاره ، فراجع الخطوط على مواقع الويب المتخصصة. هناك يمكنك العثور على خطوط مختلفة حسب الفئة وعرضها في العمل على أمثلة نصية مختلفة. عندما تجد خطا مناسبا ، تذكر اسمه أو قم بتنزيل ملفات الخطوط لتحميلها على الخادم الخاص بك.

الخطوة 3. قم بتنزيل الخط من الإنترنت

لإضافة خط إلى موقع الويب الخاص بك ، تحتاج إلى تنزيل ملف خط من الإنترنت.

ابحث عن مصدر موثوق حيث يمكنك العثور على خطوط مختلفة. هناك العديد من الموارد عبر الإنترنت التي تقدم مجموعة واسعة من الخطوط لتنزيلها. عند اختيار خط ، تأكد من أن لديك الحق في استخدامه على موقع الويب الخاص بك وفقا للترخيص.

عندما تعثر على خط مناسب ، ابحث عن زر التنزيل وانقر عليه. سيتم تنزيل الخط على جهازك بالتنسيق.تف (تروتايب الخط) أو .أوتف (أوبن الخط).

بمجرد تنزيل ملف الخط ، ستكون جاهزا للخطوة التالية-إضافة الخط إلى مستند هتمل الخاص بك.

الخطوة 4. تحضير ملفات الخط

لإضافة خطوط إلى صفحة الويب الخاصة بك ، تحتاج إلى إعداد ملفات الخطوط. عادة ، لديك بالفعل الخط الذي تحتاجه في شكل تروتايب أو أوبن. إذا لم يكن الخط الخاص بك يحتوي على التنسيق المطلوب ، فيمكنك استخدام محول خط عبر الإنترنت لتحويله.

لكل خط ، قم بإنشاء مجلد باسم الخط وحفظ ملفات الخط إليه. في معظم الحالات ، ستحتاج إلى تنسيقين للخط: وف و وف 2. يتم دعم تنسيق وف (تنسيق الخط المفتوح على شبكة الإنترنت) على نطاق واسع من قبل جميع متصفحات الويب الحديثة. شكل ووف 2 هو أكثر إيجازا وكفاءة ، لذلك فمن المستحسن استخدامه إذا كان جمهورك المستهدف يستخدم المتصفحات الحديثة.

لإنشاء ملفات وف ووف 2 ، هناك العديد من الخدمات عبر الإنترنت التي تسمح لك لتحويل ملفات تف أو أوتف إلى هذه الأشكال. يمكنك استخدام ، على سبيل المثال ، الخط السنجاب ويبفونت مولد أو خدمة تحويل الخط. تحميل ملف تف أو أوتف إلى واحدة من هذه الخدمات وتوليد وف ووف 2 الملفات.

بعد إنشاء ملفات الخطوط ، انسخها إلى مجلد المشروع الخاص بك بحيث تكون متاحة لتنزيل صفحة الويب.

الخطوة 5. إنشاء دليل للخطوط

من أجل تحميل واستخدام الخطوط في وثيقة هتمل ، سوف تحتاج إلى إنشاء دليل خاص التي سوف تضع ملفات الخط. سيسمح هذا للمتصفح بتحميل وعرض الخط المحدد بشكل صحيح على صفحة الويب.

لإنشاء دليل بالخطوط ، اتبع الخطوات التالية:

بعد إنشاء دليل الخطوط ، ستكون جاهزا لتحميل ملفات الخطوط إلى هذا المجلد واستخدامها في شفرة هتمل ، كما هو موضح في الخطوات التالية.

الخطوة 6. إضافة أنماط إلى ملف كس الخاص بك

لتطبيق الخطوط الجديدة على مستند هتمل الخاص بك ، تحتاج إلى تعيين أنماط للعناصر المقابلة باستخدام كس.

1. في ملف كس منفصل (على سبيل المثال ، النمط.المغلق) ، إضافة التعليمات البرمجية التالية:

.ميكوستومفونت {

فئة يمكنك إضافتها إلى أي عنصر لتطبيق هذا الخط.

2. الآن يمكنك إضافة فئة

.ميكوستومفونت

سيتم عرض هذا النص في الخط 'اسم الخط'.

الآن جميع العناصر مع

ال .فئة ميكوستومفونت سوف

يتم عرضها مع الخط الذي حددته.

الخطوة 7. ربط الخطوط بمشاريعك

بمجرد تحميل الخطوط على الخادم الخاص بك أو استخدام مصدر خارجي ، كل ما عليك فعله هو توصيلها بمشاريعك. للقيام بذلك ، سوف تحتاج كس.

1. إنشاء ملف كس جديد أو فتح ملف نمط موجود.

2. في ملف كس ، ابحث عن المكان الذي تريد توصيل الخطوط فيه. يمكن أن يكون هذا مكانا يتم فيه تعيين الأنماط للعناوين أو الفقرات أو عناصر الصفحة الأخرى.

3. أضف الكود التالي لتوصيل الخطوط:

@الخط الوجه {

عائلة الخط:'اسم مقتصد';

سرك: ورل ('المسار إلى الملف.الخط') تنسيق ('الخط_شكل');

}

4. استبدل اسم الخط بالاسم الذي تريد استخدامه لهذا الخط.

5. بدلا من المسار إلى الملف.الخط حدد المسار إلى ملف الخط على الخادم أو المصدر الخارجي.