چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟
در این مطلب می خواهیم نحوه تشخیص فونت یک صفحه وب را با دو روش به شما آموزش دهیم.
چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

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

شاید هنگام گشت و گذار در اینترنت، به سایتی برخورد کرده اید که فونت زیبا یا از نظر شما، جذابی دارد. در این زمان می خواهید از نوع فونت این سایت مطلع شوید. برای چنین کاری می توانید به سراغ ابزار Inspect Element یا افزونه های مرورگر بروید تا در سریع ترین زمان نوع فونت را متوجه شوید.

نحوه تشخیص فونت با Inspect Element

در مرورگر ابزاری به نام Inspect Element وجود دارد که به شما امکان بررسی سورس کد وب سایت ها را می دهد. شما می توانید المان های طراحی یک سایت را با نگاه کردن به HTML، CSS و سایر اطلاعات متوجه شوید. این ابزار برای طراحی سایت خودتان هم کارایی دارد.

روند شناسایی فونت با استفاده از ابزار Inspect Element بسیار ساده است و نیازی به هیچ گونه دانش برنامه نویسی ندارد. این ابزار در تمام مرورگر ها وجود دارد و از شکل یکسانی بهره می برد.

برای تشخیص فونت با استفاده از ابزار Inspect مرورگر مراحل زیر را دنبال کنید:

وب سایت موردنظرتان را باز کنید.

متن حاوی فونت مدنظرتان را هایلایت کرده و روی آن راست کلیک کنید.

در منویی که باز می شود، روی گزینه Inspect کلیک کنید.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

با باز شدن منوی Inspcet، روی بخش Computed کلیک کنید.

به سمت پایین اسکرول کنید تا بخش Font-Family را پیدا کنید. در اینجا می توانید نام فونت و استایل آن را پیدا کنید و البته ابعاد آن هم در این بخش وجود دارد.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

دیگر روش های استفاده از ابزار Inspect

اگر به دنبال راه سریع تری برای تشخیص فونت یک سایت با استفاده از ابزار Inspect هستید، روش زیر را امتحان کنید:

سایت موردنظرتان را باز کنید.

روی ویندوز کلید های Ctrl + Shift + C و روی مک او اس کلید های Cmd + Shift + C را فشار دهید.

نشانگر ماوس را روی متن نگه دارید تا استایل فونت، کد رنگ و حاشیه آن نشان داده شود.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

شما همچنین می توانید لیستی از فونت های مورد استفاده در سایت ها را هم با کمک ابزار Inspect مرورگر پیدا کنید. برای چنین کاری، مراحل زیر را دنبال کنید:

به صفحه وب موردنظرتان بروید.

با فشردن کلید های Ctrl + Shift + I در ویندوز و Cmd + Shift + I در مک او اس، سورس کد را باز کنید.

روی تب Network کلیک کرده و سپس تب فونت را انتخاب کنید.

در اینجا لیستی از فونت های مورد استفاده در صفحه وب را می بینید.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

برای اینکه در لحظه لیست تمام فونت ها را ببینید، باید صفحه را تازه سازی یا رفرش کنید.

تشخیص فونت با افزونه های مرورگر

اگر به دنبال راه ساده تری برای شناسایی یک فونت هستید، می توانید به سراغ نصب یک افزونه بروید. اگرچه افزونه های زیادی برای این کار توسعه پیدا کرده اند، اما دو مورد آن ها محبوبیت بالایی دارند: WhatFont و Font Finder.

در ادامه می خواهیم نگاهی به نحوه شناسایی فونت با استفاده از این افزونه ها داشته باشیم.

1. WhatFont

یکی از دلایل محبوبیت این افزونه، امکان شناسایی سریع چندین فونت به صورت همزمان است، اما چگونه باید از این افزونه استفاده کنیم؟

زمانی که WhatFont در مرورگرتان فعال است، نشانگر ماوس را روی متن بگیرید تا فونت آن را نشان دهد.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

زمانی که روی متن کلیک کنید، یک پنجره پاپ آپ ظاهر می شود که جزئیات بیشتری از فونت مانند سایز فونت، رنگ و استایل آن را در اختیارتان قرار می دهد.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

علاوه بر این، شما می توانید بطور همزمان چندین بخش از متن را هم در صفحه برای مقایسه فونت ها انتخاب کنید.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

این افزونه را می توانید بطور رایگان برای کروم، فایرفاکس و سافاری دانلود کنید.

2. Font Finder

این افزونه هم زمانی که نشانگر ماوس را روی یک متن بگیرید، جزئیات آن را به نمایش می گذارد، با این حال جزئیات فنی زیادی در اختیارتان قرار می دهد. به همین دلیل اگر آشنایی چندانی با طراحی وب نداشته باشید، احتمالا گیج خواهید شد.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

Font Finder بیشتر مناسب توسعه دهندگان وب است که می خواهند در لحظه فونت های موجود را با فونت های جدید تعویض کنند. با چنین رویکردی، می توانید پیش از هر تغییر دائمی، فونت ها را تست کنید.

برای تست یک فونت با استفاده از Font Finder، مراحل زیر را دنبال کنید:

بخشی از متن یک صفحه وب را هایلایت کنید.

روی آن راست کلیک کرده و از منویی که باز می شود، گزینه Font Finder را انتخاب کنید.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

گزینه Replace font with را انتخاب کرده و نام فونت را وارد کنید. برای مثال فونت Calibri را تایپ کنید و در پیش نمایش، نحوه تغییر متن را ببینید.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

اگر می خواهید فونت را ریست کنید، با رفرش صفحه چنین کاری انجام می شود.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

افزونه فونت فایندر را می توانید برای کروم، مایکروسافت اج و فایرفاکس بطور رایگان دانلود کنید.

نحوه شناسایی نوع فونت در عکس

اگر به دنبال تشخیص یک فونت در عکس باشید، احتمالا افزونه های مرورگر و همچنین ابزار Inspect برایتان کارایی نداشته باشد. با این حال می توانید به سراغ ابزار های آنلاین مانند WhatFontis یا WhatTheFont بروید.

روند شناسایی فونت در عکس در تمام ابزار های بالا تقریبا یکسان است، بنابراین اجازه دهید تنها این کار را با ابزار WhatTheFont انجام دهیم:

عکس موردنظرتان را دانلود کنید.

این تصویر را وارد ابزار WhatTheFont کنید.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

این ابزار بطور خودکار متن درون تصویر را شناسایی می کند. باکس مربوطه را بزرگ یا کوچک کنید تا فونت موردنظرتان درون آن قرار بگیرد. زمانی که کارتان تمام شد، روی گزینه فلش کلیک کنید.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

در ادامه WhatTheFont فونت موجود در تصویر را با فونت های درون گالری اش مطابقت داده و نزدیکترین فونت ها را به شما نشان می دهد.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

اگر میان فونت ها گزینه مناسبی پیدا نکردید، می توانید با کلیک روی گزینه Show more Results، فونت های مرتبط بیشتری را ببینید.

چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟

فونت نقش مهمی در موفقیت یک سایت یا طراحی گرافیکی دارد؛ بنابراین با فونت مناسب می توانید باعث افزایش ارتباط مخاطب با وب سایت یا طرح خودتان شوید. برای شناسایی فونت های مدنظرتان هم می توانید از روش های بالا استفاده کنید.

منبع: دیجیاتو


کلیدواژه های این خبر
مرورگر   اینترنت   ویندوز   کارایی   وب سایت   برنامه نویسی   افزونه   المان   ماوس   فونت   مک او اس   هایلایت   گشت و گذار   نحوه شناسایی   کد رنگ  
محتوای این خبر به صورت خودکار از «پارسینه» دریافت شده و «مخبرنیوز» بدون هیچ دخل و تصرفی آنرا باز نشر داده است. اگر به هر دلیلی احساس می کنید محتوای منتشر شده مطلوب نیست، خواهشمند است با استفاده از این لینک ما را مطلع نمایید تا بدون درنگ آنرا حذف نماییم.
با استناد به ماده ۷۴ قانون تجارت الکترونیک مصوب ۱۳۸۲/۱۰/۱۷ مجلس شورای اسلامی و با عنایت به اینکه مخبرنیوز مصداق بستر مبادلات الکترونیکی متنی، صوتی و تصویر است، مسئولیت نقض حقوق تصریح شده مولفان در قانون فوق از قبیل تکثیر، اجرا و توزیع و یا هر گونه محتوی خلاف قوانین کشور ایران بر عهده منبع خبر و کاربران است.

اخبار مرتبط
دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.28.106
باشگاه خبرنگاران
دانلود مرورگر فایرفاکس Firefox Browser fast & private 91.2.0
باشگاه خبرنگاران
مدیریت گذرواژه های اپل با iCloud Passwords در ویندوز ممکن شد
بولتن نیوز
انتشار فراخوان سه مسابقه با موضوعات جاوا، جویش با الستیک و React and SSR
باشگاه خبرنگاران
طراحی سایت در 4 مرحله
تابناک
دانلود مرورگر در حال توسعه فایرفاکس Firefox Nightly for Developers 93.0a1
باشگاه خبرنگاران
چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟
صبا ایران
از دانلود مسیریاب فارسی بلد تا پیام رسان محبوب گوگل
باشگاه خبرنگاران
دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.27.111
باشگاه خبرنگاران
کاربران مک مراقب بدافزار خطرناک XLoader باشند 
زومیت
دانلود مرورگر در حال توسعه فایرفاکس Firefox Nightly for Developers 92.0a1
باشگاه خبرنگاران
کنترل نمودن منابع یک فضای میزبان، چه مزایایی دارد؟
خبرآنلاین
دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.23.76
باشگاه خبرنگاران
دانلود Firefox Nightly for Developers 90.0a1 – مرورگر در حال توسعه فایرفاکس
باشگاه خبرنگاران
چگونه سایت طراحی کنیم؟
آریا
فونت انگلیسی Tioxo Sans
سرزمین دانلود
روش هایی برای پشتیبان گیری از اطلاعات و برنامه ها در کامپیوتر
پارسینه
سافاری یا کروم؛ کدام مرورگر برای مک بهتر است؟
زومیت
نرم افزار ضد تبلیغات اینترنتی (برای ویندوز) - AdwCleaner 8.2.0 Windows
سرزمین دانلود
دانلود Firefox Nightly for Developers 210418.17.03 – مرورگر در حال توسعه فایرفاکس
باشگاه خبرنگاران
گوگل چند آسیب پذیری مهم کروم 90 را برطرف کرد
برنا نیوز
چرا طراحی وب سایت در آینده باعث تحول تجارت می شود
شفاف نیوز
11 برتری "هاست وردپرس" به هاست معمولی لینوکس و ویندوز
ساعت 24
چرا افزونه های المنتور ویژوال کامپوزر به عنوان بهترین صفحه ساز های وردپرس شناخته می شوند؟
آی تی رسان
دانلود Firefox Nightly for Developers 210411.17.01 – مرورگر در حال توسعه فایرفاکس
باشگاه خبرنگاران
میزبانی حرفه ای با شهرزاد وب
تسنیم
نرم افزار طراحی و ایجاد CSS در صفحات وب (برای ویندوز) - Rapid CSS 2020 v16.3.0.231 Windows
سرزمین دانلود
دانلود Firefox Nightly for Developers 210408.17.00 – مرورگر در حال توسعه فایرفاکس
باشگاه خبرنگاران
خدمات مناسب برای میزبانی وب سایت شما چیست؟
خبرآنلاین
از دانلود پیام رسان WhatsApp تا برنامه رسمی Gmail
باشگاه خبرنگاران
معرفی اصطلاحات کاربردی اینترنت
صدا و سیما
مرورگر سریع واترفاکس (برای ویندوز) - Waterfox G3.2.0 Windows
سرزمین دانلود
مرورگر فایرفاکس (برای ویندوز) - Firefox 87.0 Windows
سرزمین دانلود
مرورگر گوگل کروم (برای ویندوز) - Google Chrome 89.0.4389.114 Windows
سرزمین دانلود
آموزش وردپرس
تسنیم
دانلود Firefox Nightly for Developers 210404.17.00 – مرورگر در حال توسعه فایرفاکس
باشگاه خبرنگاران
دانلود مرورگر ضد تبلیغ اندروید Brave Browser 1.22.71
باشگاه خبرنگاران
دانلود Firefox Nightly for Developers 210329.00.12 – مرورگر در حال توسعه فایرفاکس
باشگاه خبرنگاران
آموزش وردپرس و نکاتی پیرامون آن
خبرآنلاین
کشف پیامی پنهانی در ویندوز 95 بعد از 25 سال
زومیت
اخبار مرتبط
bltباشگاه خبرنگاران : دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.28.106
bltباشگاه خبرنگاران : دانلود مرورگر فایرفاکس Firefox Browser fast & private 91.2.0
bltبولتن نیوز : مدیریت گذرواژه های اپل با iCloud Passwords در ویندوز ممکن شد
bltباشگاه خبرنگاران : انتشار فراخوان سه مسابقه با موضوعات جاوا، جویش با الستیک و React and SSR
bltتابناک : طراحی سایت در 4 مرحله
bltباشگاه خبرنگاران : دانلود مرورگر در حال توسعه فایرفاکس Firefox Nightly for Developers 93.0a1
bltصبا ایران : چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟
bltباشگاه خبرنگاران : از دانلود مسیریاب فارسی بلد تا پیام رسان محبوب گوگل
bltباشگاه خبرنگاران : دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.27.111
bltزومیت : کاربران مک مراقب بدافزار خطرناک XLoader باشند 
bltباشگاه خبرنگاران : دانلود مرورگر در حال توسعه فایرفاکس Firefox Nightly for Developers 92.0a1
bltخبرآنلاین : کنترل نمودن منابع یک فضای میزبان، چه مزایایی دارد؟
bltباشگاه خبرنگاران : دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.23.76
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 90.0a1 – مرورگر در حال توسعه فایرفاکس
bltآریا : چگونه سایت طراحی کنیم؟
bltسرزمین دانلود : فونت انگلیسی Tioxo Sans
bltپارسینه : روش هایی برای پشتیبان گیری از اطلاعات و برنامه ها در کامپیوتر
bltزومیت : سافاری یا کروم؛ کدام مرورگر برای مک بهتر است؟
bltسرزمین دانلود : نرم افزار ضد تبلیغات اینترنتی (برای ویندوز) - AdwCleaner 8.2.0 Windows
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 210418.17.03 – مرورگر در حال توسعه فایرفاکس
bltبرنا نیوز : گوگل چند آسیب پذیری مهم کروم 90 را برطرف کرد
bltشفاف نیوز : چرا طراحی وب سایت در آینده باعث تحول تجارت می شود
bltساعت 24 : 11 برتری "هاست وردپرس" به هاست معمولی لینوکس و ویندوز
bltآی تی رسان : چرا افزونه های المنتور ویژوال کامپوزر به عنوان بهترین صفحه ساز های وردپرس شناخته می شوند؟
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 210411.17.01 – مرورگر در حال توسعه فایرفاکس
bltتسنیم : میزبانی حرفه ای با شهرزاد وب
bltسرزمین دانلود : نرم افزار طراحی و ایجاد CSS در صفحات وب (برای ویندوز) - Rapid CSS 2020 v16.3.0.231 Windows
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 210408.17.00 – مرورگر در حال توسعه فایرفاکس
bltخبرآنلاین : خدمات مناسب برای میزبانی وب سایت شما چیست؟
bltباشگاه خبرنگاران : از دانلود پیام رسان WhatsApp تا برنامه رسمی Gmail
bltصدا و سیما : معرفی اصطلاحات کاربردی اینترنت
bltسرزمین دانلود : مرورگر سریع واترفاکس (برای ویندوز) - Waterfox G3.2.0 Windows
bltسرزمین دانلود : مرورگر فایرفاکس (برای ویندوز) - Firefox 87.0 Windows
bltسرزمین دانلود : مرورگر گوگل کروم (برای ویندوز) - Google Chrome 89.0.4389.114 Windows
bltتسنیم : آموزش وردپرس
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 210404.17.00 – مرورگر در حال توسعه فایرفاکس
bltباشگاه خبرنگاران : دانلود مرورگر ضد تبلیغ اندروید Brave Browser 1.22.71
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 210329.00.12 – مرورگر در حال توسعه فایرفاکس
bltخبرآنلاین : آموزش وردپرس و نکاتی پیرامون آن
bltزومیت : کشف پیامی پنهانی در ویندوز 95 بعد از 25 سال




 |  درباره ما |  ارتباط با ما |  تبلیغات |  آخرین پستها |  تیتراخبار |  خبرگزاریها |  صفحه اصلی | 

مخبر جامعترین و بزرگترین سایت جمع آوری اخبار ایران می باشد که توسط موتور هوشمند جمع آوری و پیش پردازش اخبار هزاران فید خبری را جمع آوری نموده و در اختیار مخاطبان قرار می دهد.
مخبر هیچگونه مسئولیتی در قبال محتوای منتشر شده نخواهد داشت.