سوالاتی برای ساختن و برقرار کردن راهنمای FrontEnd (جلسه 17) : Font یا فونت

همونطور که اطلاع دارید در جلسه گذشته موارد مربوط به Media رو به پایان رسوندیم و حالا قصد داریم مواردی رو در مورد Fonts یا فونت ها در اختیارتون قرار بدیم.

Fonts یا فونت ها

• شما چطور فونتها رو لود و استفاده میکنید؟

همونطور که میدونید یکی از اجزای هر صفحه وب و رابط کاربری اون فونتها هستن که متن مورد نظر رو زیباتر میکنن و باعث میشن که خوانایی و ... اون بهتر بشه. یکی از موارد مهمی که در این رابطه وجود داره، نحوه لود کردن فونتها هست. ساده ترین روشی که وجود داره استفاده از @font-face به تنهایی هست که باعث به وجود اومدن مشکلاتی از قبیل FOUT (Flash of unstyled text) و FOIT (Flash of invisible text) میشه. FOUT مربوط به حالتی هست که شما سایتی رو باز میکنید و در ابتدا فونت دیگری نمایش داده میشه و زمانی که فونت مورد نظر بصورت کامل لود شد، فونت متن مورد نظر تغییر میکنه و کلا صفحه به هم میریزه و بالا پایین میشه و حالت بدی به وجود میاد. ترفندها و ابزارهای زیادی برای حل این مشکلات به وجود اومده که شما میتونین از اونا استفاده کنید. در این رابطه میتونین این لینکرو مطالعه کنید و بصورت کامل با این قضیه آشنا بشید. در این لینک روشهای مختلفی که وجود داره رو معرفی کرده و برای هر کدام دمویی رو قرار داده و برای هر کدام مزایا و معایبی رو بیان کرده که میتونه به شما کمک کنه.

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

ابزارها و سرویسهای بسیار زیادی در مورد فونت وجود داره که میتونین با استفاده از اونا کاراتون رو مدیریت کنید و با سرعت و کیفیت بیشتری از فونتها در سایتتون استفاده کنید. در اینجا ابزارهایی رو بهتون معرفی میکنم که میتونین از اونا در این رابطه استفاده کنید.

این تصویر مربوط به Google fonts هست که یکی از معروفترین ابزارهای موجود در زمینه فونت هست. در این سایت میتونین فونتهای مختلف رو ببینید و جستجو کنید و مواردی که خواستید دانلود کرده و از اونا بصورت رایگان استفاده کنید. این ابزار کدهایی رو تولید میکنه و در اختیارتون قرار میده که میتونین به راحتی از اونا استفاده کنید.

این تصویر مربوط به Typekitهست که یکی از محصولات Adobe هست. استفاده از اون خیلی ساده هست و کارهای حرفه ای رو میتونین با اون انجام بدین. این ابزار فونتهای چند سایت و سرویس دیگه رو در اختیاتون قرار میده و میتونین از میان اونا هر کدام رو که خواستید، انتخاب و استفاده کنید.

این تصویر مربوط به سایت Font Squirrel هست که میتونین با استفاده از اون فونتهای مورد نظرتون رو بسازید و تغییر بدید و بهینه سازی کنید و همچنین فونتهای مورد نظرتون رو دانلود کرده و استفاده کنید.

این تصویر مربوط به سایت fonts.com هست که با Google fonts در رابطه هست و نسخه های تحت Desktop متناسب با فونتهای Google fonts رو در اختیارتون قرار میده و میتونین از اونا استفاده کنید.

این تصویر مربوط به سایت DaFontهست و فونتهایی رو بصورت رایگان در اختیاتون قرار میده. این سایت امکانات متنوعی رو در اختیاتون قرار میده.

این تصویر مربوط به Font Library هست و فونتهای رایگان رو در اختیارتون قرار میده و میتونین از اونا در سایتتون و دیگر موارد استفاده کنید.

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source