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