يعد تحديد سمك الخط جانبا مهما من جوانب التصميم وتطوير الويب. يمكن أن يؤدي اختيار سمك الخط الصحيح إلى تحديد التأثير المرئي وسهولة قراءة النص على صفحة الويب.
يتم قياس سمك الخط بالقيم العددية من 100 إلى 900 ، حيث 100 هو أنحف خط و 900 هو الأكثر جرأة. بينما يكفي في معظم الحالات للمطورين معرفة اسم أو رقم سمك الخط ، في بعض الأحيان تكون هناك مواقف عندما يكون من الضروري تحديد سمك الخط بدقة بالبكسل أو النسب المئوية.
في هذه المقالة ، سنلقي نظرة على بعض الطرق البسيطة لتحديد سمك الخط ، والتي ستكون مفيدة لكل من مطوري الويب المبتدئين وذوي الخبرة.
واحدة من أسهل الطرق لتحديد سمك الخط هي استخدام أدوات المطور في المتصفح. تسمح لك معظم المتصفحات الحديثة بعرض أنماط العناصر ، بما في ذلك سمك الخط. للقيام بذلك ، انقر بزر الماوس الأيمن على عنصر النص وحدد "استكشاف العنصر" في قائمة السياق.
يمكنك أيضا استخدام أدوات خاصة عبر الإنترنت ستساعدك على تحديد سمك الخط. إحدى هذه الأدوات هي أداة وزن الخط. انها تسمح لك لإدخال محدد كس من عنصر والحصول على معلومات حول سمك الخط في بكسل أو النسب المئوية. علاوة على ذلك ، يمكن للأداة عرض أمثلة على الخطوط ذات السماكات المختلفة لتسهيل اختيار المستخدمين للخط المناسب لمشروعهم.
سيسمح لك استخدام هذه الطرق البسيطة بتحديد سمك الخط بدقة وإنشاء تصميم مثير للإعجاب لموقع الويب أو التطبيق الخاص بك.
- القسم 1. مفهوم سمك الخط
- استكشاف خاصية وزن الخط في كس
- الفرق بين الخطوط السميكة والجريئة
- القسم 2. أدوات لتحديد سمك الخط
- استخدام مختلف الخدمات عبر الإنترنت
- عرض رمز الصفحة في المتصفح
القسم 1. مفهوم سمك الخط
في كس ، يتم تعيين سمك الخط إلى قيمة رقمية من 100 إلى 900. كلما كان الرقم أكبر ، كلما كانت الأحرف أكثر جرأة. في الوقت نفسه ، اعتمادا على الخط ، قد تكون القيم المتاحة للسمك مختلفة.
القيم الأكثر استخداما لسمك الخط في المغلق:
- 100-رقيقة (رقيقة)
- 200-ضوء إضافي (خفيف جدا)
- 300-ضوء (ضوء)
- 400-عادي (عادي)
- 500-متوسط (متوسط)
- 600-شبه غامق (غامق)
- 700-غامق (غامق)
- 800-جريئة إضافية (جريئة جدا)
- 900-أسود (أسود)
من خلال تحديد سمك الخط في كس ، يمكنك إنشاء تأثيرات بصرية مختلفة للنص. على سبيل المثال ، يمكن أن يؤدي استخدام خط غامق (سمك 700) إلى جعل العناوين أكثر تعبيرا وجاذبية ، ويمكن أن يكون الخط الرفيع (سمك 200) مناسبا لخلق تأثير الخفة والخفة.
استكشاف خاصية وزن الخط في كس
يتم استخدام خاصية وزن الخط في كس لتحديد سمك الخط على صفحة ويب. يمكن تحديد قيمة هذه الخاصية كقيمة رقمية من 100 إلى 900 ، ويمكن أيضا استخدام كلمات رئيسية مثل عادي وجريء وأخف وزنا وأكثر جرأة.
تحدد القيمة العادية سمك الخط العادي ، وتشير القيمة الغامقة إلى خط أكثر جرأة. تحدد القيمة الأخف سمك الخط المتوسط بين العادي والأكثر جرأة ، وتحدد القيمة الأكثر جرأة سمك الخط المتوسط بين العادي والأكثر اكتمالا.
بالإضافة إلى الكلمات الرئيسية ، يمكن أن تأخذ خاصية وزن الخط أيضا قيما رقمية من 100 إلى 900. الرقم 400 يتوافق مع القيمة العادية ، 700 يتوافق مع القيمة الغامقة. بين هذه القيم ، يمكنك تحديد قيم وسيطة لضبط سمنة الخط.
الفرق بين الخطوط السميكة والجريئة
ومع ذلك ، هناك اختلاف طفيف بين هذه المصطلحات. يشير الخط السميك إلى أحد أوزان الخطوط القياسية ، والتي عادة ما تكون أكثر تعبيرا وأثقل من الخط القياسي العادي. من ناحية أخرى ، يكون الخط الغامق بين الخطوط العادية والسميكة في السماكة ويستخدم لتحقيق لهجة أقوى وإبراز النص.
قد يكون الفرق بين السميك والجريء طفيفا ، وفي كثير من الحالات قد يستخدم المطورون هذه المصطلحات بالتبادل. ومع ذلك ، في بعض الحالات ، اعتمادا على الخط والإعدادات المحددة ، قد يختلف سمك الخط ، وقد يكون الفرق بين السميك والغامق أكثر وضوحا.
إذا كنت ترغب في تحديد سمك الخط ، فمن المستحسن استخدام أدوات المطور في المتصفح ، مثل مفتش العنصر. باستخدام هذه الأدوات ، يمكنك عرض خصائص كس لعنصر ومعرفة القيمة التي تم تعيينها لخاصية "وزن الخط". إذا تم تعيين القيمة على "غامق" ، فهذا يعني أنه تم تطبيق خط سميك. إذا تم تعيين القيمة على" 600 " أو " 700 " ، فهذا يعني عادة أنه يتم تطبيق الخط الغامق.
وبالتالي ، فإن الفرق بين الخطوط السميكة والجريئة يكمن في سمكها وشدتها. يكون الخط السميك أكثر تعبيرا وثقيلا ، بينما يكون الخط الغامق بين الخطوط القياسية والسميكة في السماكة ويستخدم لتركيز أقوى وإبراز النص.
القسم 2. أدوات لتحديد سمك الخط
هناك العديد من الأدوات والأساليب التي تسمح لك بتحديد وزن الخط على صفحة الويب. يوفر بعضها القدرة على عرض سمك الخط وتغييره مباشرة في المتصفح ، مما يبسط مهمة مطوري الويب والمصممين. توفر الأدوات الأخرى معلومات حول سمك الخط الحالي في الكود.
1. مفتش المتصفح
واحدة من أسهل الطرق لتحديد سمك الخط هي استخدام مفتش المتصفح المدمج. للقيام بذلك ، ما عليك سوى النقر بزر الماوس الأيمن على النص وتحديد "استكشاف العنصر" أو "عرض الرمز". بعد ذلك ، في المفتش الذي يفتح ، يمكنك العثور على الأنماط المناسبة ومعرفة قيمة خاصية وزن الخط.
2. أدوات الإنترنت
هناك العديد من الأدوات عبر الإنترنت التي تسمح لك بتحديد خصائص الخط المختلفة ، بما في ذلك السماكة. واحدة من هذه الأدوات هو الخط السنجاب ويبفونت مولد. يوفر فرصة لتنزيل خط ومعرفة سمكه باستخدام الواجهة الرسومية.
3. أدوات التطوير
برامج تطوير صفحات الويب المختلفة ، مثل فيسوال ستوديو كود أو أدوبي دريمويفر ، كما توفر أدوات التطوير التي تسمح لك لعرض وتغيير أنماط الخطوط. يمكن أن يكون هذا مفيدا لتحديد سمك الخط وتحريره في الوقت الفعلي.
4. الرمز
إذا كنت ترغب في تحديد سمك الخط في التعليمات البرمجية ، يمكنك استخدام الخاصية المغلق الخط الوزن. تحتاج إلى العثور على المحدد المناسب ومعرفة قيمة هذه الخاصية. على سبيل المثال ، إذا كان لديك التعليمات البرمجية التالية:
ص { الخط الوزن: 700؛}
هنا ، تشير القيمة 700 إلى سمك الخط المقابل للنمط الغامق. يمكن أن تتراوح قيم سمك الخط من 100 إلى 900 حسب الخط وإعداداته.
باستخدام هذه الأدوات ، يمكنك بسهولة تحديد سمك الخط على صفحة ويب وإجراء التغييرات المناسبة ، إذا لزم الأمر.
استخدام مختلف الخدمات عبر الإنترنت
توفر الخدمات عبر الإنترنت أدوات ملائمة لتحديد سمك الخط. مع مساعدتهم ، يمكنك بسرعة وسهولة تحديد وزن الخط الذي تحتاجه.
واحدة من هذه الخدمات هي خطوط جوجل. يقدم مجموعة خطوط غنية يمكنك من خلالها اختيار أوزان مختلفة لمعاينتها. سوف تكون قادرة على العثور على الخط الذي تحتاجه وسمكه ، وكذلك الحصول على رموز كس اللازمة لتضمينها على موقع الويب الخاص بك.
خدمة أخرى مفيدة هي مافونتيس. انها تسمح لك لمعرفة اسم وسمك أي خط باستخدام صورته أو رابط. تحتاج إلى تحميل صورة مع نص أو تحديد عنوان ورل للصفحة حيث يوجد الخط الذي تحتاجه ، وسوف تخبرك الخدمة بجميع المعلومات المتاحة ، بما في ذلك سمك الخط.
خدمة أخرى ، ديفيندونت ، سوف تساعدك على تحديد الخط من شكله. تحتاج إلى الإجابة على مجموعة من الأسئلة حول مظهر الخط ، وستقدم لك الخدمة أنسب الخيارات. سوف تكون قادرا على تحديد الخط المطلوب ومعرفة سمكها.
يقلل استخدام الخدمات عبر الإنترنت من الوقت والجهد اللازمين لتحديد سمك الخط. بفضل هذه الأدوات ، يمكنك العثور بسرعة على المعلومات التي تحتاجها واستخدامها في مشاريعك.
عرض رمز الصفحة في المتصفح
لعرض رمز الصفحة في المتصفح ، اتبع الخطوات التالية:
- افتح صفحة الويب التي تريد عرض رمزها.
- انقر بزر الماوس الأيمن على الصفحة.
- في قائمة السياق التي تظهر ، حدد" عرض رمز الصفحة " أو ما شابه.
- تفتح لوحة مطور المتصفح ، والتي تعرض رمز الصفحة مع الموارد الأخرى.
في معظم المتصفحات ، يمكنك أيضا استخدام مفاتيح الاختصار لفتح لوحة تحكم المطور.:
- جوجل كروم-اضغط على السيطرة + التحول + أنا (ويندوز) أو كمد + الخيار + أنا (ماك).
- موزيلا فايرفوكس-اضغط على السيطرة + التحول + ج (ويندوز) أو القيادة + الخيار + ج (ماك).
- مايكروسوفت إيدج-اضغط على السيطرة + التحول + أنا (ويندوز) أو الأمر + الخيار + أنا (ماك).
- سفاري-قم بتمكين قائمة " التطوير "في إعدادات المتصفح ، ثم حدد"إظهار وحدة تحكم المطور".
بعد فتح لوحة القيادة المطور ، سوف تكون قادرا على رؤية هتمل ، كس ، جافا سكريبت وغيرها من الموارد المستخدمة على الصفحة. يمكنك تحليل الكود والاطلاع على الأنماط المطبقة على عناصر الصفحة ، بما في ذلك وزن الخط.