یک صفحه وب معمولی معمولاً از چندین عنصر مختلف تشکیل شده است که اکثر آنها با رنگ های مختلف کدگذاری شده و با فونت ها و سبک های مختلف نوشته شده اند. گاهی اوقات، با صفحات وب به قدری زیبا طراحی می‌شویم که ما را وادار می‌کنند تا عمیقاً در ویژگی‌های آنها کاوش کنیم. یک تم بسیار زیبا یا یک فونت خوب و حرفه ای، شاید.

افرادی که روش خود را در مورد فونت ها می شناسند و مجذوب آنها هستند، اغلب از ابزارهای رایگان شناسایی فونت آنلاین^{(free online font identifier tools)} برای کمک به کشف فونت ها در وب استفاده می کنند. این ابزارهای آنلاین از شما می خواهند که یک URL وارد کنید یا یک تصویر با فونت نمایش داده شده آپلود کنید، که سپس بررسی می شود. در صورتی که نمی خواهید در یادگیری استفاده از یک ابزار جدید با دردسر مواجه شوید، این پست برای شما مناسب است. امروز، ما در مورد اینکه چگونه کاربران می توانند بدون استفاده از افزونه مرورگر، یک برنامه کاربردی یا هر ابزار آنلاین، تشخیص دهند که یک صفحه وب خاص از چه فونتی استفاده می کند بحث خواهیم کرد.

رویه‌ای که در این مقاله در مورد آن بحث خواهیم کرد، حول تنظیماتی است که اکثر مرورگرهای وب ارائه می‌کنند، یعنی « ابزار توسعه‌دهنده^{(Developer Tools)} » یا به‌طور خاص، گزینه‌ای به نام Inspect Element . در اینجا، نحوه شناسایی فونت ها در دو مرورگر کروم^(Chrome) ، اج^(Edge) و فایرفاکس^(Firefox) را مورد بحث قرار خواهیم داد .

^(Identify)با استفاده از Inspect Element^{(Inspect Element)} در فایرفاکس^(Firefox) فونت ها را در یک صفحه وب شناسایی کنید

به صفحه وب فونتی که می خواهید شناسایی کنید مراجعه کنید و روی متنی که با فونت مورد نظر شما نوشته شده است کلیک راست کنید.

از لیست گزینه هایی که نشان داده می شود (منوی زمینه)، روی Inspect Element کلیک کنید . با انجام^(Doing) این کار ، Developer Tools در پایین صفحه باز می شود.

در گوشه سمت راست پایین بخش ابزارهای توسعه^{(Development Tools)} ، زیر سرفصلی به نام فونت ها^(Fonts) پیدا می کنید ، روی آن کلیک کنید.

سپس ویژگی‌های فونتی را که می‌خواهید به آن نگاه کنید مانند اندازه، ارتفاع خط، وزن و غیره، و همچنین اینکه آیا فونت به صورت مورب است یا نه، برای شما نمایش می‌دهد، اگرچه این همیشه آشکار است.

اگر می‌خواهید در مورد فونت مورد استفاده بیشتر بدانید، فایرفاکس^(Firefox) شما را نیز تحت پوشش قرار داده است. اگر بخش فونت‌ها را به پایین اسکرول کنید و روی «همه فونت‌های صفحه» کلیک کنید، برگه فونت‌ها باز می‌شود و تمام فونت‌هایی که در حال حاضر در صفحه‌ای که در حال مرور آن هستید استفاده می‌شوند و همچنین مکان آنها نشان داده می‌شود. در حال استفاده هستند. نه فقط این، بلکه پیش نمایشی از ظاهر یک فونت خاص نیز دریافت می کنید. با نگه داشتن ماوس روی فونت ها در Developer Tools ، بخش هایی از صفحه وب که از آن فونت استفاده می کنند برجسته می شود.

با استفاده از ابزار Developer Tools^{(Developer Tools)} در کروم^(Chrome) یک فونت را شناسایی کنید

فرآیند مشابه همان چیزی است که در بالا توضیح داده شد. دو مرحله اول را مانند فایرفاکس^(Firefox) انجام دهید تا Developer Tools در سمت راست صفحه باز شود.

روی زیرمجموعه "محاسبه" کلیک کنید.

^(Scroll)کمی پایین بروید و اطلاعاتی در مورد فونتی که به آن علاقه دارید (خانواده فونت، اندازه و غیره) پیدا خواهید کرد.

متأسفانه، کروم مانند ^(Chrome)فایرفاکس^(Firefox) هیچ اطلاعات اضافی را در اختیار شما قرار نمی دهد.

^(Identify)با استفاده از Edge Developer Tools ، ^{(Edge Developer Tools)}فونت^(Font) مورد استفاده را شناسایی کنید

1. لبه را باز کنید
2. راست کلیک کرده و متن را انتخاب کنید
3. Inspect را انتخاب کنید
4. در Developer Tools که باز می شود، به قسمت Computed نگاه کنید^(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 pаge generally consists of several dіfferent elements with most of them coded in different colors and written in different fonts and styles. Sometimes, we come acroѕs web pages so beautifully designed that they make us want to delve deep into their attributes; a vеry elegant theme or a nice, professional font, perhaps.

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

• وب سایت نمی تواند باز خاص در Chrome، Firefox، Edge، اینترنت اکسپلورر

• نحوه متوقف کردن تغییر مسیر خودکار در Chrome، Firefox، Edge مرورگرها

• Create میانبر صفحه وب با استفاده از Edge browser در دسکتاپ Windows 10

• غیر فعال کردن، فعال کردن Cookies در Chrome، Edge، Firefox، Opera، مرورگر اینترنت اکسپلورر

• غیر فعال کردن، Adobe Flash حذف، Shockwave در Chrome، Firefox، Edge، اینترنت اکسپلورر

• Allow یا Pop-Ups بلوک در Chrome، Firefox، Edge، Opera، Internet Explorer

• نحوه تغییر صفحه اصلی در Chrome، Firefox، Opera، Edge مرورگرها

• چگونه برای باز کردن News and Interests links در Chrome or Firefox؛ نمی Edge

• نحوه پنهان کردن Browser Extension آیکون در Chrome، Edge or Firefox

• امنیت، Privacy، Cleaning ابزار Edge، Firefox، Chrome، Opera

• چگونه برای تغییر User name and Profile image در Edge، Chrome، Firefox

• Share Button Plugins برای Chrome، Firefox and Edge browsers

• حذف تمام Saved Passwords در یک بار در Chrome، Firefox، Edge

• نحوه استفاده از Avast extension بر روی Chrome، Firefox، و Edge مرورگره

• چگونه به فهرست در متن فقط Mode در Chrome، Edge یا Firefox