ایجاد واکنش پذیری در سایز فونت ها + FitText

دسته‌ها : آموزش, جی کوئری علی میرزائی 11 دیدگاه‌ها

آموزش استفاده از اسکریپت FitText

طراحی واکنش گرا (Responsive Web design)، – همونطور که اکثر دوستان مستحضر اند – تقریبا یک موضوع جدید و چند سالی بیشتر از عمرش نمیگذره (May 2010). ولی با توجه به گسترش روز افزون انواع موبایل و تبلت و مبادرت کاربران به استفاده از این دستگاه ها (در وبگردی و انجام انواع امورات اینترنتی)، روز به روز به اهمیت استفاده از طراحی های واکنش گرا (در صفحات وب) افزوده میشه.

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

ببینید دوستان عزیز من، بحث واکنش گرایی، تنها شامل مقدار دهی های درصدی (%)، تعریف media و… نیست! به طور کلی، پوسته ای که شما طراحی میکنید؛ از هر نظر باید ساختارهای درستی داشته باشه و همواره در مخاطب این حس رو ایجاد کنه که -با تغییر سایز مرورگر- وبسایت شما کاملا در وضعیتی طبیعی قرار داره و هیچ مشکلی در نظم ساختاری قالب به وجود نیومده! حالا، یک نمونه از مواردی که باعث شکسته شدن این ساختار منظم میشه، ناهماهنگی سایز فونت هاست! یعنی چی؟!

یعنی اینکه، وقتی شما یک سایز رو در CSS (مثلا ۳۰px)، به عنوان (title) مطالبتون اختصاص میدید، این سایز در ابعاد کوچکتر مرورگر هم حفظ میشه و مسلما در این حالت، سبک نمایش خوبی رو نخواهید داشت (چرا که به شکلی قالب شما از توازن خارج شده)! اما، برای رفع این مشکل، راه حل های مختلفی هم وجود داره. یک مورد ساده و کاربردی، استفاده از اسکریپت های جی کوئری تغییر سایز (فونت) که به صورت خودکار – با نسبت گیری از ابعاد محل – اندازه فونت رو تغییر میدن.

من با چند مورد از این اسکریپت ها تا به حال کار کردم. یک نمونه ای که به نظرم از حجم کم و کارایی بالایی برخورداره اسکریپت FitText که در ادامه نحوه استفاده اش رو با هم بررسی می کنیم…

اولین بخش کار، فراخوانی کتابخانه جی کوئری و اسکریپت FitText در قالب (بهتره که فراخوانی، قبل از پایان تگ body باشه):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://demo.alimir.ir/fittext-example/jquery.fittext.js"></script>

و در مرحله بعد نوبت به استفاده از تابع fitText میرسه. برای این منظور، کافیه تا از یک (یا چند) سلکتور، پیش از فراخوانی تابع استفاده کنید. به عنوان نمونه:

JQUERY:

$("#fittext1").fitText();
$("#fittext2").fitText(2.1);
$("#fittext3").fitText(1.2, { minFontSize: '30px', maxFontSize: '75px' });

در قطعه کد بالا، ۳ حالت وجود داره:

  1. حالت اول >> استفاده ساده و بدون هیچ تنظیمی از تابع fitText.
  2. حالت دوم >> همراه با یک عدد در تابع که مقدار حاشیه رو مشخص میکنه. (با افزایش این عدد، به خاطر بیشترشدن حاشیه، فونت کوچکتر میشه)
  3. حالت سوم >> علاوه بر حاشیه، میتونید مقدار ماکزیمم و مینیمم رو هم مشخص کنید تا حدود تغییر سایزها دست خودتون باشه.

و دیگر هیچ… :)

امیدوارم که آموزش مفید بوده باشه!
منبع : دنیای وردپرس و برنامه نویسی – alimir.ir

دیدگاه کاربران در مورد این نوشته

  1. ممنون از مطالب خوبتان ، عالی بود

    توسط طرح توجیهی پاسخ

  2. سلام . خسته نباشید . مثل همیشه عالی بود …

    توسط وب سایت وردپرس پاسخ

    1. زنده باشی دوست من {گل}

      توسط علی میرزائی پاسخ

  3. بسیار خوب و آموزنده بود، متشکرم ادمین عزیز

    توسط بهینه سازی پاسخ

    1. خواهش میکنم،
      قابلی نداشت دوست من {گل}

      توسط علی میرزائی پاسخ

  4. علی جون داداش روی طراحی پوسته های و افزون های جدید کار کنی بهتر! من که تو اون مطالب حال میکنم! از ما گفتن از تو نشنیدن! گرافیک سایت زیاد طرف دار نداره همش روش کار میکنی! ثانیاً تخصص خاصی نمی خواد! ملت تو منابع انگلیسی یه سرچ بزنن یک میلیارد مطلب هست!:P

    توسط mohammad پاسخ

    1. نه عزیز من! اتفاقا بیشتر دوستان ما، در ایمیل ها و کامنت هاشون درخواست آموزش های کاربردی در حوزه وب و برنامه نویسی رو دارند. (البته بماند که این پست هم ارتباطی به گرافیک نداشت)
      یک مسأله ای که شما بهش توجه نمیکنید اینه که خیلی از هم وطن هامون، از سطح زبان (انگلیسی) بالایی برخوردار نیستند و به جهت تخصصی بودن برخی موضوعات، نمیتونند از منابع انگلیسی استفاده کنند. حالا در این بین، اگه من یا شما اطلاعاتمون رو به زبانی ساده در اختیار دوستانمون قرار بدیم، فک نمیکنید گامی مؤثر در توسعه وب پارسی برداشتیم؟!؟

      توسط علی میرزائی پاسخ

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

        توسط نفیسه پورنجار پاسخ

        1. ممنونم نفیسه خانوم،
          من به شخصه با فرهنگ انتقاد و پیشنهاد هیچ مشکلی ندارم… اما اینکه برخی دوستان -در یک فضای متن باز- کمتر موقعی از کلمات مثبت و انگیزه بخش استفاده میکنند، ناراحت کننده هست ولی ناامید کننده نیست…
          با وجود کاربرانی که از مطالب این سایت استفاده مفید دارند و عزیزانی مثل شما که با لطفشون، دمه ما رو گرم میکنند :) انگیزه کافی برای ادامه فعالیت در این سایت، همچنان با من خواهد بود… 😉

          توسط علی میرزائی پاسخ

  5. سلام
    فایل جاوااسکریپت که در پوشه است روهم باید در هاست قرار بدیم؟
    چیزی که من فهمیدم اینه:
    فایل قالب رو برای ویرایش بازکنیم ، به دنبال تگ body اخر باشیم و کد دوم رو که قرار دادی بنویسیم و پس ازون کد اول رو که نوشتی قرار بدیم درسته؟
    بعدشم ذخیره؟

    توسط غلامی پاسخ

    1. سلام،
      1- بله میتونید فایل اسکریپت رو در هاستتون بارگذاری و سپس آدرس دهیش کنید.
      2- ببینید شما پس از فراخوانی اسکریپت (که میتونه در تگ head یا داخل body باشه)، باید یک عنوان رو مشخص کنید و سپس در یک فایل js یا داخل تگ `script`،سلکتورش (که میتونه شامل نام کلاس، آی دی یا تگ عناوین باشه) رو پیش از فراخوانی تابع قرار بدید.
      به عنوان نمونه:

      <script>
      $(".main-title,h2").fitText();
      </script>

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید