كيفية توصيل خطوط كس متعددة: تعليمات خطوة بخطوة

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

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

الخطوة 1: تنزيل الخطوط

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

1. ما هي الخطوط المغلق?
2. لماذا ربط الخطوط المغلق متعددة?
3. التحضير
4. اختيار الخط
5. تنزيل الخطوط
6. ربط الخطوط
7. 1. ربط الخطوط المحلية
8. 2. ربط الخطوط عبر خطوط جوجل
9. 3. ربط الخطوط باستخدام الروابط أو مسارات الملفات
10. الاتصال عبر ملف نمط خارجي
11. الاتصال عبر قواعد كس
12. استخدام الخطوط
13. تثبيت الخط الرئيسي
14. سؤال وجواب
15. كيف يمكنني توصيل خطوط كس متعددة?
16. كيف يمكنني إضافة خط إلى صفحة ويب باستخدام المغلق?
17. كيف يمكنني تحديد خطوط متعددة في المغلق?
18. كيف يمكنني تحديد الخط للعناوين والفقرات?
19. كيف يمكنني تعيين حجم الخط للعناوين والفقرات?
20. هل من الممكن استخدام الخطوط غير القياسية على صفحة ويب?

ما هي الخطوط المغلق?

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

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

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

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

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

لماذا ربط الخطوط المغلق متعددة?

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

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

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

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

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

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

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

التحضير

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

1. اختيار الخط

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

2. تنزيل ملفات الخطوط

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

3. وضع ملفات الخط

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

4. باستخدام الخط الوجه

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

هنا مثال على استخدام @الخط الوجه:

تحتاج إلى استبدال 'اسم الخط' مع اسم الخط الخاص بك و 'مسار الملف'.الخط ' إلى المسار إلى ملف الخط (المسار النسبي من ملف كس الذي تقوم بتوصيله).

5. ربط الخطوط إلى كس

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

مثال:

• الخط الأسرة: 'اسم الخط';

أنت الآن جاهز لاستخدام الخطوط التي اخترتها في أنماط كس الخاصة بك.

اختيار الخط

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

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

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

لتطبيق الخط على العناصر المطلوبة من صفحة الويب. على سبيل المثال:

إلى القوائم النقطية.

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

تنزيل الخطوط

يمكن استخدام طرق مختلفة لتحميل الخطوط إلى صفحة ويب:

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

الجسم {

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

}

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

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

@الخط الوجه {

الخط الأسرة:'خط مخصص';

سرك: ورل('الخطوط/كوستومفونت.تف') شكل ('تروتايب');

}

في هذا المثال ، يتم توصيل خط مخصص يسمى 'الخط المخصص' ، والذي يقع في مجلد 'الخطوط' على الخادم.

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

لاستخدام الخطوط من خطوط جوجل ، تحتاج إلى إضافة الكود التالي إلى رأس مستند هتمل:

في هذا المثال ، يتم توصيل الخط بلا مفتوحة مع الأوزان 400 و 700.

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

ربط الخطوط

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

1. ربط الخطوط المحلية

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

لتوصيل الخطوط المحلية إلى كس ، استخدم التعليمات البرمجية التالية:

@الخط الوجه {

الخط الأسرة: 'ميفونت';

سرك: ورل('ميفونت.تف') شكل ('تروتايب');

}

في هذا المثال ، نستخدم خط اسمه 'ميفونت' ، والذي يقع في ' ميفونت.ملف الصندوق.

2. ربط الخطوط عبر خطوط جوجل

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

1. انتقل إلى موقع جوجل الخطوط في https://fonts.google.com /.
2. حدد الخطوط الضرورية عن طريق إضافتها إلى عربة التسوق.
3. انسخ رمز اتصال الخط المستلم والصقه في قسم ملف هتمل الخاص بك.
4. استخدم الخطوط المحددة في رمز كس الخاص بك عن طريق تحديد اسمها في خاصية عائلة الخط.

3. ربط الخطوط باستخدام الروابط أو مسارات الملفات

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

@الخط الوجه {

الخط الأسرة: 'ميفونت';

سرك: ورل ('https://example.com/myfont.ttf') شكل ('تروتايب');

}

في هذا المثال ، نستخدم الخط 'ميفونت' ، والذي يقع على مورد خارجي ومتاح عبر الرابط 'https://example.com/myfont.ttf '.

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

الاتصال عبر ملف نمط خارجي

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

من المستند الخاص بك.

مثال على توصيل ملف نمط خارجي يبدو كما يلي:

1. إنشاء ملف جديد مع".المغلق "التمديد (على سبيل المثال ،" الأنماط.المغلق").

2. افتح " الأنماط.المغلق " ملف في محرر نصوص.

3. صف الأنماط الضرورية داخل " الأنماط.المغلق " ملف. على سبيل المثال:

الجسم {

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

}

ح1 {

اللون: أزرق;

}

ص {

حجم الخط: 16 بكسل;

الهامش السفلي: 10 بكسل;

}

1. احفظ " الأنماط.المغلق " ملف.

2. من صفحة هتمل الخاصة بك ، إضافة التعليمات البرمجية التالية:

يشير إلى المسار إلى " الأنماط.المغلق " ملف نسبة إلى صفحة أتش تي أم أل الحالية.

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

الاتصال عبر قواعد كس

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

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

بعد ذلك ، يمكنك تحديد قواعد النمط لكل خط باستخدام أسمائهم. على سبيل المثال:

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

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

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

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

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

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

مع اسم الخط. في هذا المثال ، تطبق كل فقرة قاعدة كس الخاصة بها لتعريف الخط.

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

استخدام الخطوط

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

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

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

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

فيما يلي نموذج التعليمات البرمجية التي توضح استخدام خط على صفحة ويب:

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

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

تثبيت الخط الرئيسي

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

يتم استخدام محدد الجسم لتعيين الخط الرئيسي. على سبيل المثال ، لتثبيت الخط "أريال" ، يمكنك كتابة التعليمات البرمجية التالية:

• أولا ، حدد جسم المحدد:

• ثم نحدد خاصية عائلة الخط والقيمة "أريال":

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

• :

1. الجسم {
2. الخط الأسرة: أريال;
3. }

الآن الخط الرئيسي على صفحة الويب سيكون"أريال".

سؤال وجواب

كيف يمكنني توصيل خطوط كس متعددة?

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

كيف يمكنني إضافة خط إلى صفحة ويب باستخدام المغلق?

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

كيف يمكنني تحديد خطوط متعددة في المغلق?

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

كيف يمكنني تحديد الخط للعناوين والفقرات?

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

كيف يمكنني تعيين حجم الخط للعناوين والفقرات?

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

هل من الممكن استخدام الخطوط غير القياسية على صفحة ويب?

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