تلعب الخطوط دورا مهما في تصميم مواقع الويب ، مما يخلق مظهرا مرئيا فريدا وينقل جوا عاطفيا. استيراد الخطوط باستخدام كس يسمح لك باستخدام الخطوط غير القياسية لجعل موقعك أكثر جاذبية وفريدة من نوعها.
بادئ ذي بدء ، تحتاج إلى توصيل الخط على موقعك. هناك عدة طرق للقيام بذلك. يمكنك استخدام الخطوط المضمنة مثل أريال أو تايمز نيو رومان ، أو الاختيار من بين مجموعة متنوعة من الخطوط المجانية والمدفوعة المتاحة عبر الإنترنت. بعد تحديد الخط المناسب ، ستحتاج إلى العثور على إصدار خط الويب الخاص به.
لاستيراد خطوط كس ، تحتاج إلى إضافة قواعد كس خاصة إلى ملف النمط الخاص بك. هناك عدة طرق للقيام بذلك. يمكنك استخدام قاعدة @الخط والوجه وتحديد المسار إلى الخط الذي تم تنزيله ، وكذلك تعيين اسمه. سيسمح هذا للمتصفح بتنزيل الخط واستخدامه على موقعك. يمكنك أيضا إضافة قاعدة استيراد @لاستيراد الخطوط من خادم بعيد.
بعد إضافة قواعد استيراد الخطوط ، يمكنك استخدامها في رمز كس الخاص بك. للقيام بذلك ، تحتاج فقط إلى تحديد اسم الخط في خاصية عائلة الخط. على سبيل المثال ، إذا قمت بتسمية الخط الخاص بك "ميفونت" ، ثم رمز قد تبدو هذه: الخط الأسرة: "ميفونت" ، أريال ، بلا الرقيق;
- الخطوة 1: تحديد الخط المراد استيراده
- الخطوة 2: قم بتنزيل الخط من خادم الويب
- الخطوة 3: إنشاء ملف كس للخط
- الخطوة 4: إضافة رمز خط الويب إلى ملف كس
- الخطوة 5: توصيل ملف كس في مستند هتمل
- الخطوة 6: تطبيق الخط على عناصر صفحة الويب
- الخطوة 7: التحقق من تشغيل الخط المستورد
- الخطوة 8: تحسين تحميل الخط على الموقع
الخطوة 1: تحديد الخط المراد استيراده
قبل البدء في استيراد الخطوط باستخدام كس ، تحتاج إلى اتخاذ قرار بشأن الخط الصحيح. يبدأ كل شيء بتحديد الخط الذي تريد استخدامه على موقعك.
يجب الانتباه إلى عدة عوامل عند اختيار الخط. أولا وقبل كل شيء ، النظر في الغرض من موقع الويب الخاص بك والجمهور الذي هو المقصود. إذا كنت تقوم بإنشاء موقع ويب لأغراض تجارية ، فمن المرجح أن يكون من المفيد اختيار خط رسمي وسهل القراءة. إذا كان موقعك يستهدف الشباب أو صناعة الإعلام ، فقد تحتاج إلى خط بمظهر أكثر حداثة وأناقة.
عامل مهم آخر هو توافق الخطوط مع أنظمة التشغيل والمتصفحات المختلفة. قد يتم عرض بعض الخطوط بشكل مختلف على أجهزة وبرامج تصفح الويب المختلفة. لذلك ، من المهم اختيار خط يتم عرضه جيدا على معظم الأنظمة الأساسية.
عندما تقرر الخط الذي تحتاجه ، يمكنك البدء في البحث عنه في المجال العام أو شرائه من مزود خطوط مدفوع. هناك العديد من مواقع الويب حيث يمكنك العثور على خطوط مجانية لاستخدامها ، بالإضافة إلى خطوط مدفوعة عالية الجودة. ضع في اعتبارك أن بعض الخطوط المجانية قد يكون لها قيود على الاستخدام في المشاريع التجارية ، لذا اقرأ الترخيص بعناية قبل استخدام الخط.
عندما تعثر على خط مناسب ، تأكد من أن لديك جميع ملفات الخطوط الضرورية التي تحتاج إلى استيرادها. عادة ، يتم توفير ملفات الخطوط بتنسيقات مختلفة مثل .صندوق النقد الدولي, .ووف و .2. يتيح لك ذلك التأكد من عرض الخط بشكل صحيح على المتصفحات وأنظمة التشغيل المختلفة. ضع في اعتبارك أن .محكمة تكافؤ الفرص و .لم يعد ينصح سفغس للاستخدام.
الخطوة 2: قم بتنزيل الخط من خادم الويب
هناك طرق مختلفة لتنزيل خط من خادم ويب. واحدة من الطرق الأكثر شعبية لاستخدام خدمة الخطوط جوجل. جوجل الخطوط يوفر حرية الوصول إلى مجموعة واسعة من الخطوط التي يمكن تحميلها بسهولة واستخدامها لموقع الويب الخاص بك.
لتنزيل خط من خطوط جوجل ، تحتاج إلى فتح موقع خطوط جوجل وتحديد الخط الذي تريده. ثم يمكنك إضافته إلى موقع الويب الخاص بك عن طريق نسخ ولصق التعليمات البرمجية المناسبة في ملف كس الخاص بك.
إذا كنت تفضل عدم استخدام خطوط جوجل ، يمكنك أيضا تنزيل الخط من خادم ويب آخر أو استضافته بنفسك.
عند تنزيل خط من خادم ويب ، ستحتاج إلى إضافة رمز كس المناسب إلى ملف النمط الخاص بك. يحدد هذا الرمز مكان تنزيل الخط وكيفية تطبيقه على العناصر الموجودة على موقع الويب الخاص بك.
هنا مثال على رمز كس الذي يقوم بتنزيل خط من خادم ويب:
@الخط الوجه {
الخط الأسرة: 'اسم الخط';
في هذه الحالة ، يجب أن تكون قادرا على تحديد ما إذا كنت ترغب في تحديد ما إذا كنت ترغب في تحديد ما إذا كنت ترغب في ذلك.ووف 2') شكل ('ووف 2'),
عنوان ورل ('باث_شيفت.وف') شكل ('وف');
/ * تنسيقات الخطوط الأخرى ، إذا لزم الأمر */
/ * تطبيق الخط على العناصر */
}
الجسم {
الخط الأسرة: 'اسم الخط' ، بلا الرقيق;
}
يجب استبدال" اسم الخط "باسم الخط الذي تريد استخدامه ، و" مسار الخط " بالمسار النسبي لملف الخط على خادم الويب الخاص بك.
تأكد من أن ملفات الخطوط متوفرة على المسار المحدد وأن تنسيقات ملفات الخط محددة بشكل صحيح (على سبيل المثال،.2 و .ووف). إذا كنت تقوم بتنزيل خط من خادم ويب آخر ، فتأكد من تحديد عنوان ورل الصحيح.
عندما يتم تنزيل خط بنجاح من خادم ويب وتطبيقه على موقع الويب الخاص بك ، يجب عرضه على الصفحة وفقا لأنماط معينة.
من أجل استيراد الخط الذي ترغب في موقع الويب الخاص بك ، تحتاج إلى إنشاء ملف كس وإضافة قواعد النمط اللازمة لذلك.
1. إنشاء ملف جديد مع".المغلق " التمديد في محرر التعليمات البرمجية أو محرر النصوص.
@الخط الوجه {
عائلة الخط:"اسم الخط";سرك: ورل ("المسار إلى الملف.محكمة تكافؤ الفرص");
سرك: url("путь_к_файлу.eot?#iefix") format("embedded-opentype"),
url("путь_к_файлу.woff2") format("woff2"),body {
font-family: "Название_шрифта", sans-serif;
}
3. Замените «Название_шрифта» на имя шрифта, которое вы хотите использовать. تأكد من كتابة هذا الاسم بين علامتي اقتباس.
6. في نهاية ملف كس ، أضف قاعدة نمط "عائلة الخط" لعنصر "الجسم" أو عنصر آخر تريد تطبيق هذا الخط عليه. حدد" اسم الخط "كما هو محدد في كتلة" @وجه الخط".
7. احفظ ملف كس.
}
وزن الخط: غامق;
}
- عائلة الخط:'اسم مقتصد';
- هنا تحتاج إلى استبدال
- اسم الانجراف
إلى اسم الخط الخاص بك و
المسار إلى الخط.ووف
إلى المسار إلى ملف الخط وف الخاص بك. إذا كان الخط الخاص بك يحتوي على تنسيقات بديلة (على سبيل المثال ، يوت ، تف ، أو سفغ) ، يمكنك إضافة إضافية
خطوط سرك
لكل شكل.
الآن بعد أن قمت بإضافة رمز خط الويب إلى ملف كس الخاص بك ، احفظ الملف وقم بتحديث مستند هتمل الخاص بك. يجب أن ترى أن الخط الجديد يتم تطبيقه على العناصر المقابلة على صفحة الويب الخاصة بك.
الخطوة 5: توصيل ملف كس في مستند هتمل
بعد إنشاء ملف كس مع الأنماط ، تحتاج إلى توصيله في مستند هتمل لتطبيق هذه الأنماط على صفحة ويب. للقيام بذلك ، يمكنك استخدام العلامة
.
الوسم
- هذا عنصر هتمل يستخدم لإنشاء ارتباط إلى مورد خارجي ، مثل ورقة أنماط كس. عادة ما يتم وضع هذه العلامة داخل قسم
وثيقة أتش تي أم أل.
هنا هو رمز مثال يوضح كيفية توصيل ملف كس في مستند هتمل:
| صفحة الويب الخاصة بي | |
| مرحبا العالم! |
هذه هي صفحة الويب الخاصة بي.
في هذا المثال ، حددنا المسار إلى ملف كس في السمة
- هريف
- العلامة
- . إذا كان ملف كس موجودا في نفس المجلد مثل مستند هتمل ، فإنه يكفي لتحديد اسم الملف فقط. إذا كان ملف كس موجودا في مجلد آخر ، فيجب تحديد المسار بالنسبة لموقع مستند هتمل.
الوسم
من السمة ريل
يجب أن تكون متساوية