آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش فونت قلم Font در css

دوره های مرتبط با این مقاله

دستور @font-face

در CSS3 امکان نوینی معرفی شده که طراح وب با کمک آن می تواند از فونت هایی در طراحی خود بهره بگیرد که روی رایانه ی کاربر از پیش نصب نیست.
هنگامی که فونت دلخواه را پیدا کردید, تنها کافی است فایل فونت مربوطه را روی سرویس دهنده ی (server) وب خود لحاظ کنید (قرار دهید) تا در صورت نیاز به صورت خودکار بر روی رایانه ی کاربر دانلود شده و نصب گردد.
فونت های خود طراح وب (شما) نیز با استفاده از قانون @font-face که جزء ویژگی های نوین CSS3 می باشد, تعریف می گردد.

فرمت های مختلف فونت

  • استاندارد TrueType:
    Truetype یک استاندارد مربوط به فرمت قلم نوشته یا فوت است که در اواخر دهه ی 80 سال 1900 توسط دو شرکت Microsoft و Apple برای اولین بار اختراع شد. Truetype در حقیقت پرکاربرد ترین فرمت فونت در هر دو سیستم عامل Mac و windows می باشد.
  • استاندارد OpenType:
    استانداردی است برای فونت هایی که قابلیت پشتیبانی از چندین زبان را دارند و همچنین مقیاس پذیر هستند. این فونت بر پایه ی قالب Truetype تعبیه شده است (مشترکاً توسط Microsoft و Adobe بعنوان نسخه الحاقی فرمت TrueType شرکت Apple ساخته شده است). OpenType امروزه بر روی بسیاری از محیط های کامپیوتری (computer platform) کاربرد دارند.
  • Web Open Font Format (WOFF):
    یک نوع قالب فونت که در صفحات وب بکار می رود. برای بار نخست در سال 2009 اختراع شد و اکنون استفاده از آن توسط کنسرسیوم وب جهانی توصیه می شود. WOFF اساساً همان OpenType یا TrueType است که metadata ی اضافه بر سازمان بر آن افزوده شده است و همچنین نسبت به قبل فشرده تر گردیده. هدف اصلی این است که قابلیت پشتیبانی از توزیع و ارسال فونت از سرویس دهنده (server) به سرویس گیرنده (client) از طریق شبکه ولی با محدودیت های پهنای باند صورت گیرد.
  • Web Open Font Format (WOFF 2.0):
    قلم نوشته یا فونت TrueType/OpenType که امکانات بیشتری را نسبت به ویرایش قبلی خود ارائه می دهد (نسبت به نسخه ی قبلی خود فشرده تر بوده و از پهنای باند شبکه ی کمتری بهره می گیرد).
  • فونت ها / اشکال SVG (Scalable vector graphics : نگاره سازی برداری مقیاس پذیر):
    فونت های SVG قادرند فرمت های گرافیکی SVG را هنگام نمایش متن به عنوان glyph (تصویر یک نماد در سامانه ی نوشتاری) استفاده کنند. مشخصات SVG 1.1, یک ماژول فونت تعریف می کند که امکان ایجاد فونت ها درون یک سند SVG را فراهم می سازد. همچنین می توان CSS به سندهای SVG اعمال کرد و قانون @font-face را روی نوشته در سندهای SVG پیاده کرد (اعمال کرد).
  • Embedded OpenType Fonts (EOT):
    فونت های EOT فرم فشرده ی قلم نوشته های OpenType هستند که برای استفاده به عنوان فونت های گنجانده شدهembedded) fonts) روی صفحات وب توسط مایکروسافت معرفی و توسعه داده شدند.

*IE : فرمت فونت تنها زمانی کار می کند که روی "installable" تنظیم شده باشد.
* Firefox: به صورت پیش فرض پشتیبانی نمی شود, اما می توان آن را فعال سازی کرد (باید flag را روی "true" تنظیم کرد تا بتوان از فرمت WOFF2 استفاده کرد).

استفاده از فونت دلخواه

هنگام استفاده از دستور @font-face ابتدا باید یک اسم برای فونت تعریف کرد (برای مثال (myFirstFont, سپس به فایل فونت اشاره کرد (ارجاع داد).

نکته:

به خاطر داشته باشید که همیشه از حروف کوچک به عنوان فونت URL استفاده کنید. استفاده از حروف بزرگ در URL ممکن است نتایج غیر قابل قبول را در IE بدست دهد.

به منظور استفاده از فونت برای عنصر HTML, ابتدا به اسم فونت (myFirstFont) از طریق خاصیت font-family ارجاع دهید.

 
                    @font-face {
                    font-family: myFirstFont;
                    src: url(sansation_light.woff);
                    } 
                    div {
                    font-family: myFirstFont;
                    }
                

استفاده از نوشته ی پررنگ (bold text)

ویژه ی نوشته پررنگ لازم است یک دستور @font-face دیگر که دربردارنده ی توصیف گرهایی برای bold text است اضافه کنید:

 
                    @font-face {
                    font-family: myFirstFont;
                    src: url(sansation_bold.woff);
                    font-weight: bold;
                    }
                

فایل "sansation_bold.woff" فایل فونت دیگری است که دربردارنده ی کاراکترهای پررنگ (bold) ویژه ی فونت Sansation می باشد. مرورگرها همیشه هنگامی که باید نوشته ی با خاصیت font-family و اسم "myFirstFont" به صورت پررنگ ارائه و نمایش داده شود از این فایل فونت استفاده می کنند.
از این طریق می توان چندین قانون @font-face برای یک فونت تعریف کرد.

توصیف گر های قلم نوشته (font descriptors) در CSS3 :

جدول زیر تمامی توصیف گرهای فونت که باید داخل قانون @font-face تعریف شوند را فهرست می کند:

Descriptor / توصیف گر
مقادیر
شرح
font-family
name
الزامی. اسم برای فونت مورد نظر تعریف می کند
src
URL
الزامی. URL فایل فونت را تعریف می کند
font-stretch
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
اختیاری . تعیین می کند چگونه فونت یا قلم نوشته کشیده شوند (بسط داده شوند). "normal" پیش فرض است.
font-style
normal
italic
oblique
اختیاری. نحوه ی سبک دهی (styling) به فونت را تعیین می کند. "normal" مقدار پیش فرض می باشد.
font-weight
normal
bold
100
200
300
400
500
600
700
800
900
اختیاری. میزان پررنگی (boldness) قلم نوشته / فونت را تعریف می کند. مقدار پیش فرض "normal"می باشد.
unicode-range
unicode-range
اختیاری. دامنه یا رینج کاراکترهای UNICODE که فونت از آن پشتیبانی می کند را مقداردهی می کند. مقدار پیش فرض "U+0-10FFFF می باشد.
  • 2523
  •    942
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .