مانند دیگر ابزارها در دنیای کامپیوتر, مرورگرها نیز این قابلیت را به کاربران می دهند تا اندازه فونت را برای خوانایی بهتر تغییر دهند. در اینجا در مورد zoom کردن صحبت نمی کنیم بلکه در مورد تغییر اندازه فونت از طریق هسته تنظیمات مرورگر بحث می کنیم.
نحوه انجام این تغییر در سه مرورگر زیر بیان شده است:
- گوگل کروم:
chrome://settingsسپسShow advanced settingsوWeb Content - فایر فاکس:
fonts and colors<content<preferences - اینترنت اکسپلورر: روی
pageکلیک کرده سپسtext-size
به عنوان یک طراح سایت باید این را در نظر داشته باشیم که درصدی از کاربران ما متاسفانه مشکلات بینایی دارند پس باید روی این موضوع وقت گذاشته و تست های مربوطه را انجام دهیم.
بحث چیه؟
در این مطلب نه تنها در مورد موضوع اهمیت دادن به کاربر صحبت می کنیم بلکه به دنبال راه حلی برای راحت کردن کار خودمان به عنوان طراح نیز هستیم. (هیچ موشی محض رضای خدا گربه نمیگیره :) )
مثال دنیای واقعی
برای درک موضوع بعد از تغییر اندازه فونت مرورگرتان حساب Gmail خود را باز کنید و به راحتی متوجه تغییر خواهید شد. مثلا من اندازه فونت مرورگر را به جای 16 پیکسل روی 20 پیکسل تنظیم کردم:
قبل از تغییر:
بعد از تغییر:
این یک نمونه طراحی صحیح است. حال اگر اکانت یاهو دارید آن را نیز چک کنید. اگر ندارید هم ناراحت نباشید من چک کردم و تغییر اندازه فونت بر روی طراحی سایت و اندازه فونت ها تاثیری نداشت! :(
یعنی یک برنامه با این همه کاربر در سراسر دنیا نباید مراقب چنین بحثی باشد؟ یعنی همه کاربرانی که مشکلات بینایی دارند باید فقط از Zoom استفاده کنند؟
( مثال رو از پر مخاطب ترین های دنیا زدم که اگر 10 سایت برتر فارسی رو چک کردین و همین مشکل رو داشتن ازشون خرده نگیرین :) )
مشکل از کجا آب می خوره؟
مشکل از دوجا متاسفانه آب نوش جان می کند:
1.استفاده از واحدهای مطلق
نمی گوییم به هیچ عنوان از واحدهای مطلق مثل px استفاده نکنید, بلکه آنها نیز کاربردهای به جای خود را دارند اما واحد مناسب تایپوگرافی در وب واحدهای نسبی مثل em و rem هستند.
اگر از واحدهای نسبی استفاده کنیم اتفاقی که می افتد این است که آنها نسبت به اندازه فونت پدرانشان محاسبه می شوند که در نهایت به همان اندازه فونت تنظیم شده برای مرورگر می رسد. پس با تغییر تنظیمات مرورگر نوشته ها در هر کجای سایت ما باشند تاثیر می پذیرند.
<html>
<body>
<header>
<h1>are you watching closely?</h1>
</header>
</body>
</html>
توجه داشته باشیم که در هرکجا از این حرکت به سمت بالا از px استفاده شود, آن مقدار, سنگ بنای اصلی محاسبه می شود و الا حرکت به بالا ادامه پیدا می کند تا به تنظیمات مرورگر برسیم.
نکته ای که باید مراقب باشیم این است که وقتی ما مانع این حرکت شویم دیگر تنظیمات مرورگر تاثیری بر روی اندازه فونت نوشته های ما که در این سلسله عناصر قرار بگیرند نخواهد داشت. حال می تواند نقطه مانع شدن, عنصر html باشد یا body و یا عناصر دیگر زیرمجموعه آنها.
2.تعیین ناصحیح اندازه فونت مبنا
گاهی اندازه فونت اولیه را برخی از طراحان برای body تعیین می کنند که از آنجایی که واحد rem فقط از اندازه فونت html تاثیر می پذیرد, کار درستی نیست.
اگر نیاز دارید تا اندازه فونت مبنا داشته باشید بهتر است آن را به html اختصاص دهید و همینطور از استفاده واحدهای مطلق برای آن اجتناب کنید. (به همان دلیلی که بالا توضیح داده شد)
می توانید از واحدهای نسبی و یا از درصد استفاده کنید. که از آنجایی که درصد پشتیبانی بهتری هم دارد, بهترین انتخاب است. و همینطور می دانیم که اندازه فونت پیشفرض عنصر ریشه و یا همان html مقدار 100% است که منظور همان 100 درصد اندازه فونت تنظیم شده برای مرورگر می باشد که بصورت پیشفرض 16 پیکسل است.
گربه ای که آقا موشه میگیره چیه؟
اگر ما تمام متن هایمان اندازه فونتی با واحدهای نسبی داشته باشند و در سلسله مراتب عناصر دقت کنیم که جایی از font-size با واحدهای مطلق استفاده نکنیم, هر زمان که تصمیم بگیریم اندازه متن ها در سراسر سایت را کوچک یا بزرگ کنیم, فقط کافی است تا مقدار اندازه فونت html را تغییر دهیم. و البته همیشه این کار را هم با درصد انجام می دهیم:
html {
}
@media (min-width: 1200px) {
html {
font-size: 115%;
}
}
گاهی شاید با کد زیر مواجه بشوید و برای خیلی از ما این نحوه نوشتن آشنا نیست. نکته ای که باید در مدل مختصر نویسی ویژگی font بدانید این است که در این ویژگی اگر بخواهید هم font-size و هم line-height را تعیین کنید باید از یک اسلش در بین آنها استفاده کنید.
html {
font: 110%/1.5;
}
پس در نتیجه کد بالا برابر است با:
html {
font-size: 110%;
line-height: 1.5;
}
خلاصه مطلب
1. همیشه برای ویژگی font-size از واحدهای نسبی مثل em و یا rem استفاده کنید.
2. اندازه فونت مبنا (فونت عنصر ریشه) را تغییر ندهید و بگذارید همان 100% که مقدار پیشفرض است بماند اما اگر نیاز به بزرگ یا کوچک کردن اندازه فونت بر اساس طرح داشتید مقدار را با واحد درصد به عنصر html اختصاص دهید.
بیشتر بدانیم
( نمی دونم چرا یاد کتابای مدرسه افتادم… یه لحظه بغض انگشتامو گرفت نتونستم تایپ کنم :) )
یک ساعت بعد از نوشتن این مطلب, مطلبی در اینجا پیدا کردم که خواندن آن خالی از لطف نیست, البته حتما قسمت نظرات را نیز کاملا بررسی کنید.
نکته دیگر اینکه خیلی از نکات با تجربه و اشتراک گذاری بدست می آیند پس اگر مطلبی هست (که قطعا هست) در قسمت توضیحات بنویسید تا همه این مطلب را بیشتر و بهتر بررسی کنیم.
و اینکه همیشه حرف آخر را طرح سایت و مخاطبان شما می زنند. پس احتمال دارد طرحی داشته باشید که متن زیادی در آن وجود نداشته باشد و ثبات طرح برایتان اهمیت زیادی دارد و همچنین نحوه استفاده از سایت را توسط کاربرانتان می شناسید, پس شاید برای شما راه حل خوبی باشد که به جای درصد قرار دادن برای html از px استفاده کنید.
همیشه باید با راه حل اصولی آشنا باشیم اما بنا بر شرایط تصمیم بگیریم.
خیلی متشکر
خواهش می کنم. ممنون از شما.
آقا عالی بود ممنونم. خیلی استفاده کردیم.
ممنون از لطف شما.
مرسی مجتبی جون
واسه مطلب مفیدت
استفاده کردیم قربان
خواهش می کنم. لطف دارین :)
خیلی جالب بود من فکرشم نمی کردم که با واحد های نسبی بشه به فونت ها مقدار داد. خیلی تشکر
ببخشید line-height:1.5 یعنی 1.5 بر چه نسبتی؟ (px-pt-em-%-rem) ؟
این مقدار ضرب در اندازه فونت عنصر میشه و حاصل اندازه line-height هستش. مطلب زیر با جزییات بیشتر توضیح داده این موضوع رو:
css-tricks.ir/reference/line-height
سلام استاااااد.
جسارتا لینکی که گذاشتین ارور 404 میده….
موفق ترین باشین
سلام، درست شد.
ممنونم استاد.
کامل و جامع بود. :)
موفق باشین
چه ضایع :-)
من یه سال پیش یه سایتی داشتم ، کسی واسم طراحی کرده بود؛
بعد خودم رفته بودم css رو عوض میکردم ، مثلا سایتمو خشکل کنم ؛
بنده خدا هرچی em کار کرده بود، حذف کردم بجاش پیکسل گذاشتم؛
آخرشم با خودم گفتم چه طراح نادونی بوده؛ اینا چیه بکار برده :-)))))))))
با تشکر از شما
و با پوزش از rem و em و آقای طراح :-P
هلاک طنز پردازیاتم مهندس، بغض انگشتامو گرفت خخخخ
خدا قوت، مث همیشه عالی و کاربردی