الانتقال إلى المحتوى الرئيسي

أتش تي أم أل: كيفية توصيل خطوط متعددة بموقع ويب

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

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

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

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

  1. تطوير الويب: توصيل خطوط متعددة بموقع ويب
  2. اختيار الخطوط المناسبة
  3. تنزيل الخطوط وإعداد الملفات
  4. إنشاء نمط كس لربط الخطوط
  5. ربط الخطوط عبر الأنماط
  6. يستخدم هذا العنوان الخط الروماني الجديد تايمز.
  7. استخدام خطوط جوجل لتوصيل الخطوط
  8. استيراد الخطوط باستخدام @الخط الوجه

تطوير الويب: توصيل خطوط متعددة بموقع ويب

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

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

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

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

الخط الأسرة: 'اسم الخط' ، بلا الرقيق;

}

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

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

اختيار الخطوط المناسبة

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

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

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

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

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

تنزيل الخطوط وإعداد الملفات

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

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

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

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

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

إنشاء نمط كس لربط الخطوط

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

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

تنسيق: تنسيق ملف الخط. في هذا المثال ، يتم استخدام تنسيقات وف 2 و وف.

الخط الوزن: تشبع الخط. يشار هنا إلى القيمة" عادي " ، مما يعني التشبع الطبيعي.

نمط الخط: نمط الخط. يشار هنا أيضا إلى القيمة" عادي " ، مما يعني النمط المعتاد.

بعد إنشاء نمط مع معلمات الخط ، يمكن تطبيقه على العناصر الضرورية على الموقع باستخدام خاصية "عائلة الخط".

مثال على رأس باستخدام الخط'الخط1'

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

داخل القسم