atefenoorali
New Member
Fonts در CSS
منظور از فونت نحوه نوشتن متون ونوع شکل متن است که می توان برای ان رنگ ، اندازه ، نوع قلم و…را تعیین کرد.
ساختار اصلی فونت ها در css :
| font: font – style | font-variant | font-weight
| font-size |line-light | font-family
;font : italic normal bold 12px / 22px tahoma
فونت ها خواصیت های زیر را دارا می باشند:
font-style :
این خاصیت به منظور استایل دادن به متن استفاده می شود و دارای مقادیر زیر است.
font-variant :
این خاصیت اختصاصآ برای متون لاتین استفاده می شود و دارای مقادیر زیر است.
font-weight :
این خاصیت در کل ضخامت متون را مشخص می کند.
این خاصیت برای تعیین اندازه متن استفاده می شود. واز مقدار های px و em برای مقدار دادن بهش استفاده می شود.
line-height :
با این خاصیت می توان فاصله بین خطوط را تعیین کنیم .که شامل موارد زیر است:
مثال: یک صفحه وب داریم که از پیش استایل font : 16px / 25px tahoma را برای متون خود تطبیق کرده و ما میخواهیم تنها اندازه فونت را تغییر دهیم در این صورت با خاصیت font-size این کار را انجام می دهیم.
افزودن فونت های دلخواه به صفحات وب :
برای این کار باید ابتدا فونت مورد نظر را دانلود و به فایل css مان اضافه کنیم و سپس بالای متون تطبیق نماییم.
نکته) فونت هایی که در ویندوز استفاده می شود با فونت هایی که در وب استفاده می شوند تفاوت دارند.
نحوه افزودن فونت های دلخواه در css :
پس از دانلود فایل باید فونت را انتخاب و از فولدر fonts کپی کنید و در فولدر خودتان (سایت تان) paste کنید.
ما فونت byekan را برای مثال در نظر بگیرید همانند کد زیر فونت مورد نظر تان را در ابتدای فایل css فراخوانی کنید.
توسط کد زیر می توانید فونت بالا را بالای متن تان تطبیق نمایید.
توجه: برای فونت های فارسی نمی توانید هر اندازه را انتخاب نمایید.
تعیین رنگ برای فونت ها :
برای تعیین رنگ مورد نظر برای فونت ها از خاصیت color استفاده می کنیم .
مثال) اگر بخواهیم از رنگ سیاه برای فونت استفاده کنیم می توانیم به اشکال زیر این کار را انجام بدهیم.
به همین صورت برای تمام رنگ ها نیز می توان استفاده کرد.
-----------------------------------
آموزش کامل CSS
آموزش کامل HTML
طراحی سایت با کمترین قیمت و کیفیت عالی
سئو تضمینی سایت
منظور از فونت نحوه نوشتن متون ونوع شکل متن است که می توان برای ان رنگ ، اندازه ، نوع قلم و…را تعیین کرد.
ساختار اصلی فونت ها در css :
| font: font – style | font-variant | font-weight
| font-size |line-light | font-family
;font : italic normal bold 12px / 22px tahoma
فونت ها خواصیت های زیر را دارا می باشند:
font-style :
این خاصیت به منظور استایل دادن به متن استفاده می شود و دارای مقادیر زیر است.
- normal : پیش قرض مرور گر است.
- italic : این مقدار استایل فونت را به شکل کج تبدیل می کند.
- oblique : درست مانند italic است.
- initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.
- inherit : در صورتی که برای عنصر فرزند این مقدار تطبیق کنید این استایل فونت عنصر والد را به خودش اختصاص می دهد.
font-variant :
این خاصیت اختصاصآ برای متون لاتین استفاده می شود و دارای مقادیر زیر است.
- normal : پیش قرض مرور گر است.
- small-caps : این مقدار تمامی حروف را به حروف بزرگ تبدیل می کند.
- initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.
- inherit : در صورتی که برای عنصر فرزند این مقدار تطبیق کنید font-variant فونت عنصر والد را به خودش اختصاص می دهد.
font-weight :
این خاصیت در کل ضخامت متون را مشخص می کند.
- normal : پیش قرض مرور گر است.
- bold : این مقدار متن را با ضخامت بیشتر نمایش می دهد.
- border : این مقدار هم مانند bold است.
- lighter : مرور گر متن را با ضخامت پیش فرض نمایش می دهد.
- initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.
- inherit : در صورتی که برای عنصر فرزند این مقدار تطبیق کنید font-weight فونت عنصر والد را به خودش اختصاص می دهد.
این خاصیت برای تعیین اندازه متن استفاده می شود. واز مقدار های px و em برای مقدار دادن بهش استفاده می شود.
- Xx-small : سه برابر کوچکتر از اندازه پیشفرض فونت را نمایش می دهد.
- X-small : دو برابر کوچکتر از اندازه پیشفرض فونت را نمایش می دهد.
- small : یک برابر کوچکتر از اندازه پیشفرض فونت را نمایش می دهد.
- medium : به صورت medium و نصف اندازه پیش فرض فونت را نمایش می دهد.
- large : یک برابر بزرگتر از اندازه پیش فرض فونت را نمایش می دهد.
- X-large : دو برابر بزرگتر از اندازه پیش فرض فونت را نمایش می دهد.
- Xx-large : سه برابر بزرگتر از اندازه پیش فرض فونت را نمایش می دهد.
- smaller : با اندازه ما بین X-small و Xx-small فونت را نمایش می دهد.
- larger : با اندازه ما بین X-large و Xx-large فونت را نمایش می دهد.
- px با واحد پیکسل فونت را نمایش می دهد. در صفحات وب در صوورتی که از tahoma استفاده کنیم ، فونت استاندارد ۱۲px است
- initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.
- inherit : در صورتی که برای عنصر فرزند این مقدار تطبیق کنید font-size فونت عنصر والد را به خودش اختصاص می دهد.
line-height :
با این خاصیت می توان فاصله بین خطوط را تعیین کنیم .که شامل موارد زیر است:
- length : این مقدار با واحدهای em , cm , pt , px استفاده می شود و می توان فاصله خطوط را تعیین کرد.
- initial : این مقدار استایل پیش فرض مرور گرتان را تطبیق میکند.پس تطبیق ان در موارد بسیار اندکی استفاده می شود.
- inherit : در صورتی که برای عنصر فرزند این مقدار تطبیق کنید font-height فونت عنصر والد را به خودش اختصاص می دهد.
مثال: یک صفحه وب داریم که از پیش استایل font : 16px / 25px tahoma را برای متون خود تطبیق کرده و ما میخواهیم تنها اندازه فونت را تغییر دهیم در این صورت با خاصیت font-size این کار را انجام می دهیم.
افزودن فونت های دلخواه به صفحات وب :
برای این کار باید ابتدا فونت مورد نظر را دانلود و به فایل css مان اضافه کنیم و سپس بالای متون تطبیق نماییم.
نکته) فونت هایی که در ویندوز استفاده می شود با فونت هایی که در وب استفاده می شوند تفاوت دارند.
نحوه افزودن فونت های دلخواه در css :
پس از دانلود فایل باید فونت را انتخاب و از فولدر fonts کپی کنید و در فولدر خودتان (سایت تان) paste کنید.
ما فونت byekan را برای مثال در نظر بگیرید همانند کد زیر فونت مورد نظر تان را در ابتدای فایل css فراخوانی کنید.
}font-font@
;”font-family: “byekan
;(“src:url (“font / byekan.eot?#”)format(“eot
(“url(“font/byekan”) format (“woff
(“url(“font/byekan”) format (“true type
{
;”font-family: “byekan
;(“src:url (“font / byekan.eot?#”)format(“eot
(“url(“font/byekan”) format (“woff
(“url(“font/byekan”) format (“true type
{
توسط کد زیر می توانید فونت بالا را بالای متن تان تطبیق نمایید.
;font : 13px / 22px byekan , tahoma
توجه: برای فونت های فارسی نمی توانید هر اندازه را انتخاب نمایید.
تعیین رنگ برای فونت ها :
برای تعیین رنگ مورد نظر برای فونت ها از خاصیت color استفاده می کنیم .
مثال) اگر بخواهیم از رنگ سیاه برای فونت استفاده کنیم می توانیم به اشکال زیر این کار را انجام بدهیم.
;color :black
;color :#000000
;(color :rgb(0,0
;(color :rgba (0,0,0,1
;color :#000000
;(color :rgb(0,0
;(color :rgba (0,0,0,1
به همین صورت برای تمام رنگ ها نیز می توان استفاده کرد.
-----------------------------------
آموزش کامل CSS
آموزش کامل HTML
طراحی سایت با کمترین قیمت و کیفیت عالی
سئو تضمینی سایت
