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

غالبًا ما يستخدم الأشخاص الذين يعرفون طريقهم حول الخطوط ويفتنون بها أدوات تعريف الخطوط المجانية عبر الإنترنت^{(free online font identifier tools)} للمساعدة في اكتشاف الخطوط على الويب. تتطلب هذه الأدوات عبر الإنترنت إدخال عنوان URL^(URL) أو تحميل صورة بالخط المعروض ، والذي يتم فحصه بعد ذلك. في حالة عدم رغبتك في الخوض في متاعب تعلم استخدام أداة جديدة ، فهذا المنشور يناسبك. سنناقش اليوم كيف يمكن للمستخدمين تحديد الخط الذي تستخدمه صفحة ويب معينة دون استخدام امتداد متصفح أو تطبيق أو أي أدوات عبر الإنترنت.

سيتمحور الإجراء الذي سنناقشه في هذه المقالة حول الإعداد الذي تقدمه معظم متصفحات الويب ، أي " أدوات المطور^{(Developer Tools)} " ، أو على وجه التحديد ، خيار يسمى " فحص العنصر^{(Inspect Element)} " . سنناقش هنا كيفية تحديد الخطوط في متصفحين - Chrome و Edge و Firefox .

حدد^(Identify) الخطوط على صفحة ويب باستخدام Inspect Element في Firefox

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

من قائمة الخيارات التي تظهر (قائمة السياق) ، انقر فوق فحص العنصر^{(Inspect Element)} . سيؤدي القيام^(Doing) بذلك إلى فتح أدوات المطور^{(Developer Tools)} في أسفل الصفحة.

في الركن الأيمن السفلي من قسم أدوات التطوير^{(Development Tools)} ، ستجد عنوانًا فرعيًا باسم الخطوط^(Fonts) ، انقر فوقه.

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

إذا كنت مهتمًا بمعرفة المزيد عن الخط المستخدم ، فقد قام Firefox بتغطيتك أيضًا. إذا قمت بالتمرير لأسفل في قسم الخطوط والنقر فوق "جميع الخطوط في الصفحة" ، فسيتم توسيع علامة التبويب "الخطوط" وستظهر لك جميع الخطوط التي يتم استخدامها على صفحة الويب التي تتصفحها في الوقت الحالي ، وأيضًا في مكانها. يتم استخدامها. ليس ذلك فحسب ، بل يمكنك أيضًا الحصول على معاينة لكيفية ظهور خط معين. سيؤدي تحريك الماوس فوق الخطوط في أدوات المطور^{(Developer Tools)} إلى تمييز أقسام صفحة الويب التي تستخدم هذا الخط.

حدد خطًا باستخدام أدوات المطور^{(Developer Tools)} في Chrome

هذه العملية مشابهة لتلك المذكورة أعلاه. اتبع الخطوتين الأوليين كما فعلت مع Firefox لفتح أدوات المطور^{(Developer Tools)} على الجانب الأيمن من الصفحة.

انقر فوق العنوان الفرعي "محسوبة".

قم بالتمرير^(Scroll) لأسفل قليلاً وستجد معلومات حول الخط الذي تهتم به (عائلة الخط وحجمه وما إلى ذلك)

للأسف ، لا يزودك Chrome بأي معلومات إضافية مثل ^(Chrome)Firefox .

حدد ^(Identify)الخط^(Font) الذي يتم استخدامه باستخدام Edge Developer Tools

1. افتح Edge
2. انقر بزر الماوس الأيمن وحدد النص
3. حدد فحص
4. في أدوات المطور^{(Developer Tools)} التي تفتح ، انظر أسفل محسوبة^(Computed)
5. سترى تفاصيل الخط.

إذا كنت لا تعتقد أنه لا يمكنك التعامل مع أدوات مطور^{(Developer Tools)} المتصفح وأن الأدوات عبر الإنترنت تناسبك بشكل أفضل ، فهناك العديد منها التي تعمل بشكل جيد للغاية.

اقرأ التالي^{(Read next)} : كيفية العثور على بدائل مجانية مماثلة للخطوط المدفوعة^{(find similar free alternatives to paid Fonts)} .

Identify fonts in Chrome, Edge and Firefox using Developer Tools

A typical web page generally consistѕ of several different elements with most оf them cоded in different colors and written in different fonts and styles. Sometimes, we come across web pages so beautifully designed that they make us want to delve deep into their attributes; a very elegant theme оr a nice, professional font, pеrhaps.

People who know their way around fonts and are fascinated by them often use free online font identifier tools to help discover fonts on the web. These online tools require you to enter a URL or upload an image with the font showcased, which is then inspected. In case you don’t want to go through the hassle of learning to use a new tool, this post is for you. Today, we will discuss how users can identify what font a particular web page is using without using a browser extension, an application, or any online tools.

The procedure that we will be discussing in this article will revolve around a setting that most web browsers offer, namely ‘Developer Tools,’ or to be specific, an option called Inspect Element. Here, we will discuss how fonts can be identified in two browsers – Chrome, Edge and Firefox.

Identify fonts on a webpage using Inspect Element in Firefox

Visit the web page of the font of which you want to identify and right-click on the text that is written in the font you are interested in.

From the list of options that show up (the context menu), click on Inspect Element. Doing so would open the Developer Tools on the bottom of the page.

On the bottom right corner of the Development Tools section, you will find a subhead named Fonts, click on it.

It will then display for you the properties of the font you wanted to look into like its size, line height, weight, etc., and also whether or not the font is in italics or not, though that is always apparent.

If you are interested to know more about the font in use, Firefox has you covered with that too. If you scroll down the fonts section and click on ‘All fonts on the page,’ the fonts tab will expand and you will be shown all the fonts that are being used on the web page you are browsing at the moment, and also where they are being used. Not just that, but you also get a preview of how a particular font looks. Hovering your mouse over the fonts in the Developer Tools will highlight the sections of the web page that use that font.

Identify a font using Developer Tools in Chrome

The process is similar to the one described above. Follow the first two steps as you did with Firefox to open the Developer Tools on the right side of the page.

Click on the ‘Computed’ sub-head.

Scroll down a bit and you will find information about the font you’re interested in (font’s family, size, etc.)

Unfortunately, Chrome doesn’t provide you with any additional information like Firefox does.

Identify which Font is used using Edge Developer Tools

1. Open Edge
2. Right-click and select the text
3. Select Inspect
4. In the Developer Tools that open, look under Computed
5. You will see the Font details.

If you don’t think you can’t work around with browser Developer Tools and that online tools would suit you better, there are several of them that work very well.

Read next: How to find similar free alternatives to paid Fonts.

Related posts

• كيفية تنزيل Font من Website باستخدام Developer Tools

• مسح Site Data لموقع معين في Chrome or Edge باستخدام Developer Tools

• كيفية تغيير Default Font في Chrome، Edge، Firefox browser

• تعطيل Developer Tools في Edge باستخدام Registry or Group Policy

• صندوق Fix Blurry File Open dialog في Google Chrome and Microsoft Edge

• كيفية تعيين Parental Control في Chrome، Edge، Firefox، Opera

• تمكين Adobe Flash Player في Chrome، Edge، Firefox، IE، Opera

• صور تعطيل في Chrome، Firefox، Edge، Internet Explorer أثناء التصفح

• Restart Chrome، Edge or Firefox دون فقدان علامات التبويب في Windows 11/10

• كيفية استخدام Avast extension على متصفحات Chrome و Firefox و Edge

• تمكين DNS Over HTTPS في Firefox، Chrome، Edge، Opera، Android، iPhone

• Always عرض Download button في Chrome، Firefox and Edge

• كيفية تحديث Chrome، Edge، Firefox، Opera متصفحات على نظام التشغيل Windows 10

• كيفية تعطيل Geolocation في Firefox و Chrome و Edge

• كيفية تغيير User name and Profile image في Edge، Chrome، Firefox

• Fix Google Maps إبطاء العدد في Chrome، Firefox، Edge على Windows 11/10

• كيفية استخدام Chrome، Edge، Firefox، متصفحات Opera Notepad

• كيفية حظر طلبات Web Notification في Chrome، Firefox، Edge Browser

• كيفية فتح Local Files على Chrome و Firefox و Edge

• كيفية مزامنة Tabs بين Edge، Chrome and Firefox browsers