ایجاد واکنش پذیری در سایز فونت ها + 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