كيفية البحث عن خط صفحة ويب باستخدام أداة Inspect Element وملحقات المستعرض

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

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

في حالة عدم معرفتك ، تتيح لك أداة Inspect Element المضمنة في متصفحك فحص الكود المصدري لموقع الويب. يمكنك فهم عناصر تصميم الموقع من خلال الاطلاع على CSS و HTML وغيرها من المعلومات. إنها طريقة رائعة للحصول على الإلهام عند تصميم موقعك الخاص.

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

فيما يلي كيفية تحديد الخط باستخدام أداة Inspect الخاصة بالمستعرض.

1. افتح موقع الويب الذي تريد استخدامه.
2. قم بتمييز النص الذي يحتوي على الخط الذي تريد تحديده ، وانقر بزر الماوس الأيمن فوقه.
instagram viewer
3. انقر فوق فحص من قائمة السياق.
4. عندما تفتح قائمة الفحص ، انقر فوق محسوب.
5. قم بالتمرير لأسفل للعثور على ملف خط العائلة القطاع الثامن. هنا ، يمكنك العثور على اسم الخط ونمطه ، بالإضافة إلى أبعاده.

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

1. افتح موقع الويب الذي تريد استخدامه.
2. صحافة Ctrl + Shift + C (كمد + شيفت + ج على نظام Mac).
3. مرر مؤشر الماوس فوق النص لعرض نمط الخط وحجمه ورمز اللون والهامش.

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

1. اذهب إلى صفحة الويب.
2. افتح الكود المصدري بالضغط على Ctrl + Shift + I (Cmd + Shift + I على نظام Mac).
3. انقر على شبكة الاتصال علامة التبويب ، ثم حدد ملف الخط التبويب.
4. هنا ، سترى قائمة بجميع الخطوط المستخدمة على صفحة الويب.

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

متعلق ب: كيفية زيادة أو تقليل حجم الخط في Firefox

كيفية التعرف على الخطوط باستخدام ملحقات المستعرض

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

دعنا نلقي نظرة على عملية تحديد الخطوط باستخدام كلا الملحقين.

1. WhatFont

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

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

تحميل: WhatFont ل كروم | ثعلب النار | سفاري (حر)

2. مكتشف الخط

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

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

إليك كيفية اختبار الخط باستخدام Font Finder:

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

تحميل: FontFinder لـ كروم | حافة | ثعلب النار (حر)

ماذا عن فحص الخط في الصورة؟

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

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

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

متعلق ب: أفضل مواقع الخطوط المجانية للخطوط المجانية عبر الإنترنت

اكتشف الخطوط من الويب واستخدمها في تصميماتك

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

WhatTheFont و 4 بدائل للعثور على الخطوط من الصور

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

اقرأ التالي

عن المؤلف