چگونه فونت صفحه وب را با ابزار 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
باشگاه خبرنگاران
مدیریت گذرواژه های اپل با iCloud Passwords در ویندوز ممکن شد
بولتن نیوز
دانلود مرورگر در حال توسعه فایرفاکس Firefox Nightly for Developers 93.0a1
باشگاه خبرنگاران
چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟
پارسینه
از دانلود مسیریاب فارسی بلد تا پیام رسان محبوب گوگل
باشگاه خبرنگاران
دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.27.111
باشگاه خبرنگاران
کاربران مک مراقب بدافزار خطرناک XLoader باشند 
زومیت
8 نشانه برای اینکه نشان دهد کامپیوتر شما هک شده است!
برنا نیوز
فلت رندر؛ ابزار آنلاین ساخت تیزر، موشن گرافیک، طرح گرافیکی و بنر
زومیت
آموزش تشخیص سالم بودن باتری لپ تاپ و تعداد دفعات شارژ آن
آی تی رسان
روش های تبدیل فایل PDF به Word
سیتنا
رتبه یک گوگل را با «وب وان» تجربه کنید و از نتایج آن شگفت زده شوید
قدس آنلاین
دانلود مرورگر در حال توسعه فایرفاکس Firefox Nightly for Developers 92.0a1
باشگاه خبرنگاران
کنترل نمودن منابع یک فضای میزبان، چه مزایایی دارد؟
خبرآنلاین
دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.23.76
باشگاه خبرنگاران
دانلود Firefox Nightly for Developers 90.0a1 – مرورگر در حال توسعه فایرفاکس
باشگاه خبرنگاران
چگونه سایت طراحی کنیم؟
آریا
فونت انگلیسی Architectural
سرزمین دانلود
فونت عربی و انگلیسی کانون
سرزمین دانلود
سافاری یا کروم؛ کدام مرورگر برای مک بهتر است؟
زومیت
نرم افزار ضد تبلیغات اینترنتی (برای ویندوز) - AdwCleaner 8.2.0 Windows
سرزمین دانلود
دانلود Firefox Nightly for Developers 210418.17.03 – مرورگر در حال توسعه فایرفاکس
باشگاه خبرنگاران
گوگل چند آسیب پذیری مهم کروم 90 را برطرف کرد
برنا نیوز
چرا طراحی وب مهم است؟ 6 دلیل برای سرمایه گذاری در سایت
598
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 – مرورگر در حال توسعه فایرفاکس
باشگاه خبرنگاران
خدمات مناسب برای میزبانی وب سایت شما چیست؟
خبرآنلاین
چگونه کش مرورگر خود را پاک کنیم؟
ای تی ایران
خرید قالب های وردپرس راست چین راهکار سریع طراحی وب سایت
تسنیم
معرفی اصطلاحات کاربردی اینترنت
صدا و سیما
مرورگر سریع واترفاکس (برای ویندوز) - Waterfox G3.2.0 Windows
سرزمین دانلود
مرورگر فایرفاکس (برای ویندوز) - Firefox 87.0 Windows
سرزمین دانلود
مرورگر گوگل کروم (برای ویندوز) - Google Chrome 89.0.4389.114 Windows
سرزمین دانلود
آموزش وردپرس
تسنیم
اخبار مرتبط
bltباشگاه خبرنگاران : دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.28.106
bltبولتن نیوز : مدیریت گذرواژه های اپل با iCloud Passwords در ویندوز ممکن شد
bltباشگاه خبرنگاران : دانلود مرورگر در حال توسعه فایرفاکس Firefox Nightly for Developers 93.0a1
bltپارسینه : چگونه فونت صفحه وب را با ابزار Inspect Element و افزونه مرورگر تشخیص دهیم؟
bltباشگاه خبرنگاران : از دانلود مسیریاب فارسی بلد تا پیام رسان محبوب گوگل
bltباشگاه خبرنگاران : دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.27.111
bltزومیت : کاربران مک مراقب بدافزار خطرناک XLoader باشند 
bltبرنا نیوز : 8 نشانه برای اینکه نشان دهد کامپیوتر شما هک شده است!
bltزومیت : فلت رندر؛ ابزار آنلاین ساخت تیزر، موشن گرافیک، طرح گرافیکی و بنر
bltآی تی رسان : آموزش تشخیص سالم بودن باتری لپ تاپ و تعداد دفعات شارژ آن
bltسیتنا : روش های تبدیل فایل PDF به Word
bltقدس آنلاین : رتبه یک گوگل را با «وب وان» تجربه کنید و از نتایج آن شگفت زده شوید
bltباشگاه خبرنگاران : دانلود مرورگر در حال توسعه فایرفاکس Firefox Nightly for Developers 92.0a1
bltخبرآنلاین : کنترل نمودن منابع یک فضای میزبان، چه مزایایی دارد؟
bltباشگاه خبرنگاران : دانلود مرورگر امن، سریع و ضد تبلیغ Brave Browser 1.23.76
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 90.0a1 – مرورگر در حال توسعه فایرفاکس
bltآریا : چگونه سایت طراحی کنیم؟
bltسرزمین دانلود : فونت انگلیسی Architectural
bltسرزمین دانلود : فونت عربی و انگلیسی کانون
bltزومیت : سافاری یا کروم؛ کدام مرورگر برای مک بهتر است؟
bltسرزمین دانلود : نرم افزار ضد تبلیغات اینترنتی (برای ویندوز) - AdwCleaner 8.2.0 Windows
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 210418.17.03 – مرورگر در حال توسعه فایرفاکس
bltبرنا نیوز : گوگل چند آسیب پذیری مهم کروم 90 را برطرف کرد
blt598 : چرا طراحی وب مهم است؟ 6 دلیل برای سرمایه گذاری در سایت
bltساعت 24 : 11 برتری "هاست وردپرس" به هاست معمولی لینوکس و ویندوز
bltمهر نیوز : چگونه بازدیدکنندگان وبسایت رابه مشترکان خبرنامه ایمیلی تبدیل کنیم
bltآی تی رسان : چرا افزونه های المنتور ویژوال کامپوزر به عنوان بهترین صفحه ساز های وردپرس شناخته می شوند؟
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 210411.17.01 – مرورگر در حال توسعه فایرفاکس
bltتسنیم : میزبانی حرفه ای با شهرزاد وب
bltتابش کوثر : وب تاریک، آن سوی دیگر اینترنت
bltسرزمین دانلود : نرم افزار طراحی و ایجاد CSS در صفحات وب (برای ویندوز) - Rapid CSS 2020 v16.3.0.231 Windows
bltباشگاه خبرنگاران : دانلود Firefox Nightly for Developers 210408.17.00 – مرورگر در حال توسعه فایرفاکس
bltخبرآنلاین : خدمات مناسب برای میزبانی وب سایت شما چیست؟
bltای تی ایران : چگونه کش مرورگر خود را پاک کنیم؟
bltتسنیم : خرید قالب های وردپرس راست چین راهکار سریع طراحی وب سایت
bltصدا و سیما : معرفی اصطلاحات کاربردی اینترنت
bltسرزمین دانلود : مرورگر سریع واترفاکس (برای ویندوز) - Waterfox G3.2.0 Windows
bltسرزمین دانلود : مرورگر فایرفاکس (برای ویندوز) - Firefox 87.0 Windows
bltسرزمین دانلود : مرورگر گوگل کروم (برای ویندوز) - Google Chrome 89.0.4389.114 Windows
bltتسنیم : آموزش وردپرس




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

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