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

frontend

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

Fonts یا فونت ها

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

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

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0