بروز رسانی بهمن ۱ام, ۱۳۹۹ ۳:۳۴ بعد از ظهر
فروردین ۱۱, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
مانند دیگر ابزارها در دنیای کامپیوتر, مرورگرها نیز آن قابلیت را به کاربران می دهند تا مقدار و اندازه فونت را جهت خوانایی بهتر تغییر دهند. در اینجا در مورد zoom کردن صحبت نمی کنیم بلکه در مورد تغییر مقدار و اندازه فونت از طریق هسته تنظیمات نرم افزار مرورگر اینترنتی بحث می کنیم.
نحوه انجام آن تغییر در سه نرم افزار مرورگر اینترنتی زیر گفتن شده می باشد:
chrome://settings
سپس Show advanced settings
و همچنین Web Content
fonts and colors
content preferencespage
کلیک کرده سپس text-size
به عنوان یک طراح وبسایت و مرکز خبرهای جدید بایستی و حتما آن را در نظر داشته باشیم که درصدی از کاربران ما متاسفانه معظلات و مسائل و مشکلات بینایی دارند پس بایستی و حتما روی آن موضوع وقت گذاشته و همچنین تست های مربوطه را انجام دهیم.
در آن مطلب نه تنها در مورد موضوع اهمیت دادن به کاربر صحبت می کنیم بلکه به دنبال راه حلی جهت راحت کردن کار خودمان به عنوان طراح نیز هستیم. (هیچ موشی محض رضای خداوند تبارک و تعالی گربه نمیگیره )
جهت درک موضوع بعد از تغییر مقدار و اندازه فونت مرورگرتان حساب Gmail خود را باز کنید و همچنین به راحتی متوجه تغییر خواهید شد. مثلا من مقدار و اندازه فونت نرم افزار مرورگر اینترنتی را به جای ۱۶ پیکسل روی ۲۰ پیکسل تنظیم کردم:
قبل از تغییر:
بعد از تغییر:
آن یک نمونه طراحی صحیح می باشد. حال در صورتی که اکانت یاهو دارید آن هم را نیز چک کنید. در صورتی که ندارید هم ناخوش و غمگین نباشید من چک کردم و همچنین تغییر مقدار و اندازه فونت بر روی طراحی وبسایت و مرکز خبرهای جدید و همچنین مقدار و اندازه فونت ها تاثیری نداشت!
یعنی یک برنامه جذاب و جالب و خوب با آن همه کاربر در سراسر دنیا نباید مراقب چنین بحثی باشد؟ یعنی همه کاربرانی که معظلات و مسائل و مشکلات بینایی دارند بایستی و حتما تنها و فقط از Zoom بهره بری و استفاده کنند؟
( مثال رو از پر مخاطب ترین های دنیا زدم که در صورتی که ۱۰ وبسایت و مرکز خبرهای جدید برتر فارسی رو چک کردین و همچنین همین مشکل رو داشتن ازشون خرده نگیرین )
مشکل از دوجا متاسفانه آب نوش جان می کند:
نمی گوییم به هیچ عنوان از واحدهای مطلق مثل px
بهره بری و استفاده نکنید, بلکه آنها نیز کاربردهای به جای خود را دارند ولی باید توجه داشت واحد مناسب تایپوگرافی در وب واحدهای نسبی مثل em و همچنین rem خواهند بود.
در صورتی که از واحدهای نسبی بهره بری و استفاده کنیم اتفاقی که می افتد آن می باشد که آنها نسبت به مقدار و اندازه فونت پدرانشان محاسبه می شوند که در نهایت به آن هم مقدار و اندازه فونت تنظیم شده جهت نرم افزار مرورگر اینترنتی می رسد. پس با تغییر تنظیمات نرم افزار مرورگر اینترنتی نوشته ها در هر کجای وبسایت و مرکز خبرهای جدید ما باشند تاثیر می پذیرند.
توجه داشته باشیم که در هرکجا از آن حرکت به سمت بالا از px
بهره بری و استفاده می شود, آن هم مقدار, سنگ بنای اصلی محاسبه می می شود و همچنین الا حرکت به بالا ادامه پیدا می کند تا به تنظیمات نرم افزار مرورگر اینترنتی برسیم.
نقطه ای که بایستی و حتما مراقب باشیم آن می باشد که هنگام و زمانی که ما مانع آن حرکت شویم دیگر تنظیمات نرم افزار مرورگر اینترنتی تاثیری بر روی مقدار و اندازه فونت نوشته های ما که در آن سلسله عناصر قرار بگیرند نخواهد داشت. حال می تواند نقطه مانع شدن, عنصر html
باشد یا body
و همچنین یا عناصر دیگر زیرمجموعه آنها.
گاهی مقدار و اندازه فونت ساز ابتدایی و اولیه را بعضی از طراحان جهت body
مشخص کردن می کنند که از آنجایی که واحد rem
تنها و فقط از مقدار و اندازه فونت html
تاثیر می پذیرد, کار درستی نیست.
در صورتی که مستلزم و نیاز دارید تا مقدار و اندازه فونت مبنا داشته باشید بهتر می باشد آن هم را به html
اختصاص دهید و همچنین همینطور از بهره بری و استفاده واحدهای مطلق جهت آن هم اجتناب کنید. (به آن هم دلیلی که بالا توضیح داده شد)
می توانید از واحدهای نسبی و همچنین یا از قسمت و بخش بهره بری و استفاده کنید. که از آنجایی که قسمت و بخش پشتیبانی بهتری هم دارد, بهترین انتخاب می باشد. و همچنین همینطور می دانیم که مقدار و اندازه فونت پیشفرض عنصر ریشه و همچنین یا آن هم html مقدار ۱۰۰%
می باشد که منظور آن هم ۱۰۰ قسمت و بخش مقدار و اندازه فونت تنظیم شده جهت نرم افزار مرورگر اینترنتی می باشد که بصورت پیشفرض ۱۶ پیکسل می باشد.
در صورتی که ما تمام متن هایمان مقدار و اندازه فونتی با واحدهای نسبی داشته باشند و همچنین در سلسله مراتب عناصر دقت کنیم که جایی از 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;
۱٫ دائما جهت ویژگی font-size
از واحدهای نسبی مثل em و همچنین یا rem بهره بری و استفاده کنید.
۲٫ مقدار و اندازه فونت مبنا (فونت عنصر ریشه) را تغییر ندهید و همچنین بگذارید آن هم ۱۰۰% که مقدار پیشفرض می باشد بماند ولی باید توجه داشت در صورتی که مستلزم و نیاز به پهناور و بزرگ یا کوچک کردن مقدار و اندازه فونت بر اساس طرح داشتید مقدار را با واحد قسمت و بخش به عنصر html
اختصاص دهید.
( نمی دونم چرا یاد کتابای مدرسه افتادم… یه لحظه بغض انگشتامو گرفت نتونستم تایپ کنم )
یک ساعت بعد از نوشتن آن مطلب, مطلبی در اینجا پیدا کردم که خواندن آن هم خالی از لطف نیست, البته حتما قسمت نظرات را نیز کاملا بررسی کردن کنید.
نقطه دیگر آنکه خیلی از موارد و نکات با تجربه و همچنین اشتراک گذاری بدست می آیند پس در صورتی که مطلبی هست (که قطعا هست) در قسمت توضیحات بنویسید تا همه آن مطلب را اکثرا و بیشتر و همچنین بهتر بررسی کردن کنیم.
و همچنین آنکه دائما حرف آخر را طرح وبسایت و مرکز خبرهای جدید و همچنین مخاطبان تو می زنند. پس احتمال دارد طرحی داشته باشید که متن بسیاری در آن هم وجود نداشته باشد و همچنین ثبات طرح برایتان اهمیت بسیاری دارد و همچنین همچنین نحوه بهره بری و استفاده از وبسایت و مرکز خبرهای جدید را توسط کاربرانتان می شناسید, پس شاید جهت تو راه حل خوبی باشد که به جای قسمت و بخش قرار دادن جهت html
از px
بهره بری و استفاده کنید. دائما بایستی و حتما با راه حل اصولی آشنا باشیم ولی باید توجه داشت بنا بر شرایط اراده و تصمیم راسخ بگیریم.
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0