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