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

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

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

هيا بنا نبدأ!

اشترك في قناتنا على اليوتيوب

لماذا قد ترغب في التحقق من الخط الذي يستخدمه موقع الويب

كما ذكرنا سابقًا ، يمكن للخطوط الجميلة والقابلة للقراءة تحسين تجربة المستخدم (UX) وقابلية القراءة لموقعك. كما أنه يضمن أن الزائرين يمكنهم التفاعل بشكل مريح مع المحتوى الخاص بك دون صعوبة في فك تشفيره. إذا كان نصك أنيقًا ولكن غير مقروء ، فسيجد القراء صعوبة في فهم أو تقدير المواد الخاصة بك.

قد تصبح أزرار الحث على اتخاذ إجراء (CTA) كلها غير مجدية إذا لم يكن نصها قابلاً للقراءة. هذا هو السبب في أنك قد تجد أنه من السهل الاحتفاظ بقائمة من الخطوط التي تلفت انتباهك لكونها أنيقة ومقروءة. يمكنك بعد ذلك استخدامها على موقعك أو لعميل في المستقبل.

كيفية معرفة الخط الذي يستخدمه موقع الويب (3 طرق متوفرة)

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

1. تحديد الخطوط باستخدام أداة Browser Inspector Tool

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

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

إذا كنت تفضل استخدام اختصار لوحة المفاتيح ، فجرّب Ctrl + Shift + I لنظام التشغيل Windows أو Linux. إذا كنت تستخدم جهاز Mac ، فإن المكافئ هو Cmd + Shift + I.

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

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

يجب أن ترى اسم الخط ونمطه مدرجين هنا.

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

2. البحث عن الخطوط عبر ملحق المستعرض

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

تتضمن بعض هذه الإضافات ما يلي:

• Fontanello: يتيح لك هذا الامتداد ، وهو مجاني للاستخدام ، العثور على اسم الخط ووزنه ونمطه وببساطة أكثر من خلال تمييزه والنقر عليه بزر الماوس الأيمن أثناء التصفح.
• WhatFont: تبسيط اكتشاف الخط بشكل أكبر ، يمكّنك WhatFont من عرض اسم محرف فقط عن طريق التمرير فوقه.
• CSS Peeper: تم تصميم هذا الامتداد مع وضع مصممي الويب في الاعتبار ، وهو أكثر قوة قليلاً ويمكن أن يخبرك بتفاصيل إضافية من كود CSS لصفحة الويب.

ومع ذلك ، يحتوي كل من هذه الملحقات على دعم متنوع للمتصفح. WhatFont متاح لمتصفح Firefox و Chrome و Safari و Internet Explorer. من ناحية أخرى ، يتوفر Fontanello لمتصفحي Firefox و Chrome فقط. CSS Peeper هي أداة خاصة بـ Chrome ولن تتمكن من استخدامها مع أي نظام أساسي آخر.

لغرض العثور بسرعة على اسم خط معين ، يعد WhatFont هو الخيار الأسهل للاستخدام. نظرًا لأنه يدعم أيضًا معظم المتصفحات ، فسنستخدمه في عرض توضيحي سريع.

بمجرد تثبيت WhatFont ، يمكنك التحقق من الخط الذي يستخدمه موقع الويب عن طريق تنشيطه في شريط أدوات المتصفح الخاص بك وتحوم فوق بعض النص:

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

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

3. كشف الخطوط في الصور

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

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

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

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

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

استنتاج

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

في هذا المنشور ، ناقشنا ثلاث طرق لمعرفة الخط الذي يستخدمه موقع الويب:

1. حدد الخطوط باستخدام أداة فحص المتصفح.
2. ابحث عن الخطوط باستخدام امتداد متصفح مثل WhatFont.
3. كشف الخطوط في الصور باستخدام WhatTheFont.

هل لديك أي أسئلة حول كيفية التحقق من الخط المستخدم على موقع ويب؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

مصدر الصورة: rudall30 / shutterstock.com