الانتقال إلى المحتوى الرئيسي

كيفية معرفة عائلة خطوط الخط: طريقة سهلة للتعرف على الخط المستخدم على موقع الويب

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

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

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

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

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

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

  1. ابحث عن الخط على الموقع: طريقة بسيطة للتعرف على عائلة الخطوط المستخدمة
  2. افتح وضع المفتش
  3. ابحث عن العنصر المطلوب
  4. —

(العنوان) ، أو

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

الخطوات:

أدوات المطور

1.

انقر بزر الماوس الأيمن على النص الذي تريد استكشافه.

2.

3.

سيتم فتح أدوات المطور وسيتم تمييز العنصر المحدد في رمز هتمل.

4.

في خصائص العنصر ، ابحث عن قواعد عائلة الخطوط.

5.

تعرف على قيمة عائلة الخط للعنصر المحدد.

6.

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

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

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

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

نموذج النص

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

— (заголовок), или с определенным классом или идентификатором. Определенный элемент может быть на странице несколько раз и иметь разные классы или идентификаторы.

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

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

افتح وضع المفتش

لمعرفة عائلة الخط للخط المستخدم على الموقع ، ستحتاج إلى فتح وضع المفتش.

للقيام بذلك ، يمكنك استخدام الطرق التالية:انقر بزر الماوس الأيمن على أي جزء من الموقع وحدد"فحص العنصر".
صحافة السيطرة + تحول + أنا (أو كمد + الخيار + أنا على ماك) لفتح شريط أدوات المطور.اضغط على الفورمولا 12 لفتح أدوات المطور في العديد من المتصفحات الحديثة.
بعد فتح المفتش ، سترى هتمل و كس رمز الموقع. لمعرفة عائلة الخطوط ، اتبع الخطوات التالية:حدد أي نص على الصفحة التي تريد التعرف على خطها.
في اللوحة اليمنى للمفتش ، ابحث عن علامة التبويب" الأنماط "أو" المحسوبة " (حسب المتصفح).في قسم" عائلة الخط " ، سترى اسم الخط المستخدم للنص المحدد.
يرجى ملاحظة أن قسم "عائلة الخطوط" قد يحتوي على خطوط متعددة مفصولة بفواصل. سيستخدم المتصفح أول خط متاح من القائمة.باستخدام المفتش ، يمكنك بسهولة وبسرعة تحديد عائلة الخط من الخط على أي موقع. إنها أداة مفيدة لمطوري الويب والمصممين ، وكذلك لأولئك الذين يرغبون في معرفة المزيد عن تصميم الويب.
ابحث عن العنصر المطلوبلمعرفة عائلة الخطوط للخط المستخدم على الموقع ، تحتاج إلى العثور على العنصر الذي سيتم عرض النص فيه بالخط المحدد. هذا هو عادة عنصر
(الفقرة),للعثور على العنصر المطلوب ، يمكنك استخدام مفتش عنصر متصفح الويب. فقط انقر بزر الماوس الأيمن على النص الذي تريد استكشافه وحدد"فحص العنصر". سيؤدي هذا إلى فتح أدوات المطور ، وإظهار رمز هتمل للصفحة وتسليط الضوء على العنصر المحدد.