Fonts در CSS

شروع موضوع توسط atefenoorali ‏7 آوریل 2019 در انجمن زبان HTML

  1. atefenoorali

    atefenoorali New Member

    ارسال‌ها:
    11
    تشکر شده:
    1
    امتیاز دستاورد:
    1
    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 :
    این خاصیت به منظور استایل دادن به متن استفاده می شود و دارای مقادیر زیر است.

    • 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 فونت عنصر والد را به خودش اختصاص می دهد.
    font-size :
    این خاصیت برای تعیین اندازه متن استفاده می شود. واز مقدار های 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 فراخوانی کنید.

    }[email protected]
    ;”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​

    به همین صورت برای تمام رنگ ها نیز می توان استفاده کرد.
    -----------------------------------
    آموزش کامل CSS
    آموزش کامل HTML
    طراحی سایت با کمترین قیمت و کیفیت عالی
    سئو تضمینی سایت
     
    نوشته شده توسط atefenoorali در ‏7 آوریل 2019

به اشتراک بگذارید