خانواده فونت
خانواده فونت یک متن با استفاده از خاصیت font-familyمشخص می شود. خاصیت font-family چند نام
از فونت ها را در بر می گیرد که اگر از مرورگر نتوانست اولین فونت را پشتیبانی کند به سراغ بعدی برود.اگر نام یک فونت بیش از یک لغت باشد باید آن را در دو دابل کوتیشن(") قرار دهید. همچنین بیش از یک فونت را در این خاصیت
با استفاده از کاما(,) جدا می کنیم:
P {
Font-family: “Times New Roman”, Times, serif;
}
سبک فونت
خاصیت font-style اکثرا برای italic کردن متن استفاده می شود. کد زیر نمونه ای از کاربرد این خاصیت است:
p.italic {
font-style: italic;
}
اندازه فونت
خاصیتfont-style برای تنظیم کردن اندازه متن به کار می رود. توانایی مدیریت اندازه متن در طراحی
وب بسیار مهم می باشد.اگر چه شما نباید از این خاصیت برای نشان دادن پاراگراف ها به اندازه عناصر عنوان
ویا نشان دادن اندازه عناصر عنوان به اندازه پاراگراف ها به کار ببرید.
همیشه از تگ های مناسب در Htmlاستفاده کنید، <h1>تا <h6>برای عناوین و <p>برای متون وپاراگراف ها.
Font-size می تواند مقادیری مطلق ویا نسبی داشته باشد.
در باره اندازه مطلق می توان گفت:
متن را بر اساس یک اندازه مشخص تنظیم می کند.
در تمامی مرورگرها به کاربر اجازه تغییر اندازه متن را نمی دهد.
در باره اندازه نسبی می توان گفت:
متن را بر اساس یک اندازه نسبی با توجه به عناصر اطراف آن تنظیم می کند.
در مرورگر ها به کاربر اجازه تغییر اندازه متن را می دهد.
اگر شما اندازه فونت را مشخص نکرده اید،اندازه پیش فرض برای یک متن معمولی مثل پاراگراف ها
16 پیکسل(16px) می باشد.
اندازه دادن به فونت بر اساس واحد پیکسل
تنظیم اندازه نوشته ها در صفحه براساس پیکسل، کنترل کامل اندازه متن را در اختیار شما می گذارد.
H1 {
Font-size: 40px;
}
H2 {
Font-size: 30px;
}
P {
Font-size: 14px;
}
در همه مرورگرها می توان متن را با استفاده از ابزار بزرگ نمایی نیز تغییر اندازه داد.
اندازه دادن به فونت بر اساس واحدem
بسیاری از توسعه دهندگان برای اجتناب از مشکلات نسخه های قدیمی اینترنت اکسپورر با سایز دهی
به متن ها،از واحد em به جای پیکسل استفاده می کنند. واحد اندازه گیری em توسط کنسرسیوم جهانی وب
توصیه می شود.
1em برابر با سایزکنونی فونت می باشد.اندازه پیش فرض متن در مرورگر ها برابر با16 پیکسل می باشد.
بنابراین به صورت پیش فرض 1em برابر است با 16 پیکسل.
می توان em رابا فرمول اندازه مورد نظر به پیکسل تقسیم بر16 بدست آورد:
H1 {
Font-size: 2.5em; /* 40px/16=2.5em */
}
H2 {
Font-size: 1.875em; /* 30px/16=1.875em */
}
P {
Font-size: 0.875em; /* 14px/16=0.875em */
}
استفاده ترکیبی از درصد وem
راهکاری که در اکثر مرورگر ها کار می کند،تنظیم یک اندازه فونت پیش فرض با واحد درصد برای عنصر <body>
می باشد:
Body {
Font-size: 100%;
}
H1 {
Font-size: 2.5em;
}
H2 {
Font-size: 1.875em;
}
P{
Font-size: 0.875em;
}
این کد متن ها را در صفحه در تمام مرورگر ها به یک شکل نشان می دهد.
خانواده فونت
خانواده فونت یک متن با استفاده از خاصیت font-familyمشخص می شود. خاصیت font-family چند نام
از فونت ها را در بر می گیرد که اگر از مرورگر نتوانست اولین فونت را پشتیبانی کند به سراغ بعدی برود.اگر نام یک فونت بیش از یک لغت باشد باید آن را در دو دابل کوتیشن(") قرار دهید. همچنین بیش از یک فونت را در این خاصیت
با استفاده از کاما(,) جدا می کنیم:
P {
Font-family: “Times New Roman”, Times, serif;
}
سبک فونت
خاصیت font-style اکثرا برای italic کردن متن استفاده می شود. کد زیر نمونه ای از کاربرد این خاصیت است:
p.italic {
font-style: italic;
}
اندازه فونت
خاصیتfont-style برای تنظیم کردن اندازه متن به کار می رود. توانایی مدیریت اندازه متن در طراحی
وب بسیار مهم می باشد.اگر چه شما نباید از این خاصیت برای نشان دادن پاراگراف ها به اندازه عناصر عنوان
ویا نشان دادن اندازه عناصر عنوان به اندازه پاراگراف ها به کار ببرید.
همیشه از تگ های مناسب در Htmlاستفاده کنید، <h1>تا <h6>برای عناوین و <p>برای متون وپاراگراف ها.
Font-size می تواند مقادیری مطلق ویا نسبی داشته باشد.
در باره اندازه مطلق می توان گفت:
متن را بر اساس یک اندازه مشخص تنظیم می کند.
در تمامی مرورگرها به کاربر اجازه تغییر اندازه متن را نمی دهد.
در باره اندازه نسبی می توان گفت:
متن را بر اساس یک اندازه نسبی با توجه به عناصر اطراف آن تنظیم می کند.
در مرورگر ها به کاربر اجازه تغییر اندازه متن را می دهد.
اگر شما اندازه فونت را مشخص نکرده اید،اندازه پیش فرض برای یک متن معمولی مثل پاراگراف ها
16 پیکسل(16px) می باشد.
اندازه دادن به فونت بر اساس واحد پیکسل
تنظیم اندازه نوشته ها در صفحه براساس پیکسل، کنترل کامل اندازه متن را در اختیار شما می گذارد.
H1 {
Font-size: 40px;
}
H2 {
Font-size: 30px;
}
P {
Font-size: 14px;
}
در همه مرورگرها می توان متن را با استفاده از ابزار بزرگ نمایی نیز تغییر اندازه داد.
اندازه دادن به فونت بر اساس واحدem
بسیاری از توسعه دهندگان برای اجتناب از مشکلات نسخه های قدیمی اینترنت اکسپورر با سایز دهی
به متن ها،از واحد em به جای پیکسل استفاده می کنند. واحد اندازه گیری em توسط کنسرسیوم جهانی وب
توصیه می شود.
1em برابر با سایزکنونی فونت می باشد.اندازه پیش فرض متن در مرورگر ها برابر با16 پیکسل می باشد.
بنابراین به صورت پیش فرض 1em برابر است با 16 پیکسل.
می توان em رابا فرمول اندازه مورد نظر به پیکسل تقسیم بر16 بدست آورد:
H1 {
Font-size: 2.5em; /* 40px/16=2.5em */
}
H2 {
Font-size: 1.875em; /* 30px/16=1.875em */
}
P {
Font-size: 0.875em; /* 14px/16=0.875em */
}
استفاده ترکیبی از درصد وem
راهکاری که در اکثر مرورگر ها کار می کند،تنظیم یک اندازه فونت پیش فرض با واحد درصد برای عنصر <body>
می باشد:
Body {
Font-size: 100%;
}
H1 {
Font-size: 2.5em;
}
H2 {
Font-size: 1.875em;
}
P{
Font-size: 0.875em;
}
این کد متن ها را در صفحه در تمام مرورگر ها به یک شکل نشان می دهد.
