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

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

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

الوصول إلى Chrome Inspector

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

• بالضغط على مفتاح F12 ، أو
• بالنقر بزر الماوس الأيمن على عنصر معين وفي القائمة التي تفتح ، قم بالوصول إلى خيار Inspect . ميزة هذه الطريقة هي أنها تسلط الضوء مباشرة على العنصر المعني ، أو
• بالضغط على مجموعة المفاتيح Control + Shift + I (في Windows) أو Cmd + Alt + I (في Mac) ، أو
• من خلال الوصول إلى قائمة Chrome (3 نقاط في الشريط الأيمن العلوي) »المزيد من الأدوات» أدوات المطور.

يمكن عرض نافذة المفتش مدمجة في نافذة المتصفح نفسها أو عرضها في نافذة منفصلة. للوصول إلى هذه الخيارات ، يمكنك القيام بذلك عن طريق النقر فوق رمز التكوين (3 نقاط) في أعلى يمين المفتش وتغيير قيمة الخاصية «Dock Side».

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

يمكنك أيضًا تحديد نوع الجهاز الذي تريد عرضه عليه أو حجمه أو ما إذا كنت تريد عرضه في الوضع الرأسي أو الأفقي.

المفتش علامات التبويب الرئيسية

كما رأيت ، فإن المفتش مكون من علامات تبويب مختلفة.

من كل منهم ، ستتمكن من الوصول إلى وظائف وميزات مختلفة:

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

علامة تبويب العناصر

لنعد الآن إلى المشكلة المطروحة: أردنا معرفة خط أي محتوى على صفحة ويب.

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

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

في الواقع ، لديك ثلاث علامات تبويب في لوحة الأنماط:

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

عرض تفاصيل عنصر

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

في صورة المفتش ، يمكنك أن ترى أن النافذة الرئيسية تخبرني أن نمط العنوان "Nelio Software" هو h1 .

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

انظر الخط

أنت تعلم الآن أنه عنوان رئيسي ، لكن ماذا عن الخط؟

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

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

سترى تلقائيًا موقع الويب الخاص بك بنوع الخط الذي تم تغييره

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

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

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

للقيام بذلك ، هناك بعض الأدوات ، مثل Font Squirrel Matcherator أو Whatfontis.com ، التي يمكن أن تساعدك في تحديد الخط المستخدم في الصورة. للقيام بذلك ، في كلتا الأداتين يجب عليك إما تنزيل الصورة (على whatfontis.com يمكنك أيضًا تحديد عنوان URL للصورة) ثم تحديد جزء الصورة الذي يحتوي على الحرف الذي تريد تحديده.

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

صورة مميزة لجيما إيفانز على Unsplash.