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

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

بیایید شروع کنیم!

چرا ممکن است بخواهید بررسی کنید وب سایت از چه فوتی استفاده می کند

همانطور که قبلاً اشاره کردیم ، فونت های زیبا و خواندنی می توانند تجربه کاربر (UX) و خوانایی سایت شما را بهبود بخشند. همچنین تضمین می کند که بازدیدکنندگان می توانند به راحتی با محتوای شما درگیر شوند بدون اینکه مجبور شوند خیلی برای خواندن آن تلاش کنند. اگر متن شما شیک اما ناخوانا باشد ، درک مطلب شما برای خوانندگان شما سخت می شود و آن طور که باید قدر آن را نخواهند دانست.

اگر متن مطلبی قابل خواندن نباشد ، ممکن است دکمه «Call to Action (CTA)» آن هم بی استفاده شود. به همین دلیل است که تهیه لیستی از فونت هایی که به دلیل شیک و خوانا بودن توجه شما را به خود جلب می کنند، می تواند مفید باشد؛ چون در آینده می توانید از آنها در سایت خود یا برای مشتری استفاده کنید.

چگونه می توان فهمید که یک سایت چه فونتی استفاده می کند (3 روش عمومی و دردسترس)

روش های مختلفی وجود دارد که با آن ها می توانید بررسی کنید که از چه فونتی در یک وب سایت استفاده شده است. گزینه « inspection feature» مرورگر شما یک راه حل عالی است ، اما برنامه های دیگری هم هستند که همین کار را انجام می دهند. با استفاده از ابزارهای آنلاین حتی می توانید فونت های تصاویر را پیدا کنید. بیایید یک نگاهی به هر یک از این گزینه ها بیندازیم.

1. شناسایی فونت با استفاده از «Browser Inspector Tool»

یکی از ساده ترین راه ها برای بررسی اینکه از چه فوتی در یک یک وب سایت استفاده شده است، «Inspector Tool» مرورگر شما است. در این مثال با Chrome Inspector کار کردیم، ولی سایر مرورگرها هم دارای ویژگی های معادل آن هستند.

 

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

اگر ترجیح می دهید از میانبرهای کیبورد استفاده کنید، «Ctrl + Shift + I» را برای ویندوز یا لینوکس امتحان کنید. اگر از Mac استفاده می کنید ، معادل آن «Cmd + Shift + I» است.

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

در مرحله بعدی روی گزینه «Computed» کلیک کرده و به دنبال «font-family» بگردید:

شما باید نام فونت و سبک آن را در آن قسمت پیدا کنید.

برای دیدن CSS مربوط به فونت، گزینه های زیرمجموعه «Styles » نگاه کنید. برای جستجوی ویژگی های دیگر فونت می توانید این قسمت را سرچ کنید. چون ممکن است در این قسمت سبک های نامربوط زیادی وجود داشته باشد، معمولا گزینه «Computed» مفیدتر است.

2. پیدا کردن فونت از طریق بخش «Extension» مرورگر

بخش «Extension» مرورگر می توانند روش ساده تری برای یافتن جزئیات فونت یک وب سایت ارائه دهد ، به خصوص اگر با استفاده از «Inspector» راحت نیستید. بعلاوه ، آنها معمولاً پاسخی را که به دنبال آن هستید سریعتر ارائه می دهند و می توانید زودتر به سر کار اصلی تان برگردید.

برخی از این برنامه ها عبارتند از:

• Fontanello: این برنامه رایگان شما را قادر می سازد تا هنگام جستجو ، با هایلات و کلیک راست روی متن، نام، استایل و ویژگی های دیگر فونت آن را پیدا کنید.
• WhatFont: WhatFont پیدا کردن فونت را از زیادی ساده کرده است به طوری که فقط با حرکت دادن موس روی متن یک سایت می توانید نام فونت را ببینید.
• CSS Peeper: چون این برنامه طراحان وب سایت را مد نظر قرار داده است، کمی قوی تر عمل می کند و می تواند جزئیات بیشتری را در مورد کد CSS صفحه وب سایت به شما بگوید.

با این حال باید توجه کنید که همه مرورگرها از این برنامه ها پشتیبانی نمی کنند. WhatFont برای Firefox ، Chrome ، Safari و Internet Explorer در دسترس است. از طرف دیگر ، Fontanello فقط برای Firefox و Chrome در دسترس است. CSS Peeper ابزاری مخصوص Chrome است و نمی توانید از آن در مورد سایر سیستم عامل ها استفاده کنید.

برای اینکه سریع اسم یک فونت خاص را پیدا کنید، WhatFont آسانترین گزینه است. از آنجا که این برنامه از اکثر مرورگرها نیز پشتیبانی می کند ، ما هم در اینجا برای نمایش سریع نام فونت از آن استفاده می کنیم.

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

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

پس از بررسی جزئیات فونت، می توانید با استفاده از گزینه Exit WhatFont، در گوشه بالایی سمت راست پنجره مرورگر خود، از این ابزار خارج شوید.

3. تشخیص فونت های استفاده شده در تصاویر

در آخر باید ذکرکنیم که شما می توانید فونت های مورد استفاده در تصاویر را نیز پیدا کنید؛ این شامل فونت هایی هم می شود که در آرم یا اینفوگرافیک شرکت های مختلف می بینید. تجربه ما در مورد ابزارهای مختلفی که فونت را پیدا می کنند، ثابت کرده است که WhatTheFont موثرترین ابزار آنلاین برای این کار است.

برای استفاده از WhatTheFont ، باید تصویر مورد نظر را بارگذاری کرده و بخشی از متن با فونت مورد نظرتان را انتخاب کنید:

بعد از این کار صفحه ای باز می شود که حاوی فونت های مشابه (نه دقیقا همان) فونت مورد نظر شما است:

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

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

ختم کلام

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

در این پست، ما سه روش فونت یابی وب سایت های مختلف را بررسی کردیم:

1.یافتن نام فونت با استفاده از ابزار Inspector مرورگر

2.فهمیدن اسم فونت با استفاده از ابزارهای اضافی مرورگر مانند WhatFont

3.پیدا کردن فونت تصاویر با استفاده از WhatTheFont