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