در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی

در جلسه قبل در رابطه با استایل های متون در CSS صحبت کردیم دانستیم که چگونه می‌توان به راحتی یک متن را آنچنان که دوست داریم نمایش دهیم. ولی یکی از مهمترین استایل های متن فونت مربوط به متن است. فونت از اجزای کلیدی یک صفحه وب محسوب می شود. در HTML ورژن ۵ به پایین اینکار توسط خود HTML امکان‌پذیر بود اما با ظهور HTML5 این امکان حذف شد.

حال برای آنکه بهتر با این خاصیت ها در CSS آشنا شویدبا ما همراه باشید:

font-family: از مهمترین خاصیت های دستور font به حساب می آید توسط این خاصیت می توان تعیین کرد که متن توسط چه فونتی نمایش یابد.

p {
    font-family: "Times New Roman", Times, serif;
}

نکته مهم: در صورتی که نام فونت بیشتر از یک کلمه باشد باید آن فونت را در میان کوتیشن "” قرار دهید. مثل Times New Roman .

اگر تعداد فونت ها از یک عدد بیشتر بود با , کاما از همدیگر باید جدا شوند.

Font Style: شیوه نمایش فونت ها در بسیاری مواقع مهم هستند برای مثال زمانی که می خواهید متنی را مهم جلوه دهید باید آن قسمت از متن با بقیه متن تغییری از نظر ظاهری داشته باشد. این خاصیت می تواند به سادگی استایل متن را تغییر دهد:

p{
    font-style: normal;
}

p{
    font-style: italic;
}

p{
    font-style: oblique;
}

Font Size: متاسفانه برخی از دوستان بجای آنکه اندازه فونت را تغییر دهند همیشه از تگ های h1 تا h6 استفاده می کنند که این کار کاملا اشتباه است. خاصیت Font Size برای تعیین اندازه یک فونت بسیار دقیقتر و ظریف تر این کار را انجام می دهد.

واحد مقدار دهی این خاصیت px , em است. اما چه مواقعی بهتر است از کدام واحد استفاده کنیم!؟

px: واحد پیکسل واحدی آشنا برای مقدار دهی است و دست کم اغلب کاربران با این واحد اندازه گیری راحت تر هستند. به همین خاطر این واحد در مواقعی که ظرافت کاری خیلی خیلی مهم نیست استفاده می شود. استفاده از این واحد اندازه گیری را استاندارد W3C تایید نمی کند.

h1 {
    font-size: 16px;
}

em: مهمترین واحد اندازه گیری برای متون em می باشد. مطابق اصول هر یک em برابر 16px می باشد. این واحد زمانی استفاده می شود که اندازه دقیق متون بسیار مهم و کاربردی باشد. بیشتر طراحان رابط کاربری از این اندازه واحد اندازه گیری استفاده می کنند.

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

Font Weight: سنگینی متن در واقع می بایست قسمتی از خاصیت font-style باشد اما جدای آن نیز به کنترل بیشتر یک متن کمک کرده است. برای قوی کردن یک متن مقدار این خاصیت را برابر bold قرار می دهیم همچنین اگر می خواهید مقدار آن کمی بیشتر یا کمتر باشد از اعداد استفاده کنید.

h1
{
font-weight: bold;
}
h2
{
font-weight: 800;
}

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_گام_به_گام_css #آموزش_css #آموزش_سی_اس_اس #آموزش_مقدماتی_css
عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات رایگان
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS رایگان
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها رایگان
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها رایگان
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width رایگان
6 آموزش گام به گام CSS قسمت ششم: متون رایگان
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی رایگان
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها رایگان
9 آموزش گام به گام CSS قسمت نهم: جداول رایگان
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width رایگان
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow رایگان
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت رایگان
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت رایگان
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟ رایگان
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟ رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....