تبلیغات متنی و بنر

آموزش CSS 3 > قلم نوشته ( font ) در CSS 3

قلم نوشته ( font ) :

قبل از به وجود آمودن CSS 3 ، طراحان وب مجبور بودند از font هایی استفاده نمایند که بر روی کامپیوتر کاربران نصب شده بود . اگر فونتی که شما تعیین می کردید و بر روی کامپیوتر کاربر وجود نداشت ، مرورگر از یک فونت پیش فرض برای نمایش متن استفاده می کرد .
اما در CSS 3 ، طراحان می توانند هر نوع فونت دلخواهی که خود می خواهند را مورد استفاده قرار دهند . اگر فونت تعیین شده از سوی طراح بر روی کامپیوتر کاربر وجود نداشته باشد ، مرورگر آن فونت را از سرور سایت دانلود کرده و استفاده می نماید . به همین دلیل هیچ گاه مشکلی پیش نخواهد آمد .
در CSS 3 ، فونت های مورد نظر به وسیله خاصیت font-face @ ، تعیین می شوند .

پشتیانی در مرورگر های مختلف :

مرورگرهای firefox ، کروم و اپرا از هر دو نوع فونت( ttf ( True Type Fonts و نوع ( oft ( Open Type Fonts ، پشتیبانی می کنند .
مرورگر اکسپلورر از ورژن 9 به بالا، از خاصیت font-face @ پشتیبانی می کند ، ولی فقط از نوع ( eot ( Embedded Open Type .
نکته : مرورگر اکسپلور CSS 3 و ورژن پاینتر آن از خاصیت font-face @ پشتیانی نمی کنند .

مثال های عملی :

در مثال های زیر نحوه استفاده از خاصیت font-face @ را در CSS 3 نمایش داده ایم :
مثال 1 : در مثال زیر ، یک نوع فونت با دو قالب را برای نمایش متن خود در نظر گرفته ایم . اگر این فونت ها در کامپیوترتان نباشد ، مرورگر آنها را از سرور سایت دریافت می کند :

مثال 1
<!DOCTYPE html>
<html>
   <head>
        <style>
             @font-face
                  {
                       font-family: myFont ;
                       src: ur l('Sansation_Light.ttf')
                     ,url('Sansation_Light.eot'); /* IE9+ */
                 }
                div
                      {
                         font-family : myFont ;
                       }
        </style>
    </head>
<body>
    <div> With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts. </div>
</body>
</html> 		کد
مشاهده خروجی مثال خروجی

مثال 2 : در مثال دوم ، مثال قبل را بازنویسی کرده ایم ، با این تفاوت که علاوه بر تعیین نوع فونت متن ، توپر بودن و استرچ شدن متن را نیز تعیین کرده ایم . در جدول زیر ، لیست کامل خواص قابل استفاده در خاصیت font-face @ را نشان داده ایم :

مثال 2
<!DOCTYPE html>
<html>
   <head>
        <style>
             @font-face
                  {
                       font-family: myFont ;
                       src: ur l('Sansation_Light.ttf')
                     ,url('Sansation_Light.eot'); /* IE9+ */
                      font-weight : bold;
                      font-stretch : expanded
                 }
                div
                      {
                         font-family : myFont ;
                       }
        </style>
    </head>
<body>
    <div> With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts. </div>
</body>
</html> 		کد
مشاهده خروجی مثال خروجی

پارامترهای خاصبت font-face @
نام خاصيت نوع خاصيت شرح
font-family نام
name
 نام فونت یا فونت های مورد نظر را تعیین می کند . استفاده از این خاصیت اجباری است .
src آدرس اینترنتی
url
 مکان فایل فونت را بر روی سرور سایت مشخص می کند . استفاده از این خاصیت اجباری است .
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded 		میزان کش آمدن ( استرج شدن ) فونت را مشخص می کند .
استفاده از این خاصیت اختیاری است .
font-style normal
italic
oblique 		استایل خاصی مثل کج بودن را برای متن تعیین می کند. 
استفاده از این خاصیت اختیاری است .
font-weight normal
bold
100
200
300
400
500
600
font-face @00
CSS 300
900 		میزان توپر بودن متن را مشخص می کند و هر چه عدد بزرگتر باشد ، متن توپر تر خواهد بود .
استفاده از این خاصیت اختیاری است .

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟