فونت های وب به طراحان وب اجازه می دهند از فونت هایی که رو کامپیوتر کاربران نصب نشده است استفاده کنند
  • 1395/3/18 6/7/2016 4:36:46 PM 6/7/2016 4:36:46 PM
  • 0
  • 386

فونت های وب CSS3 – قانون @font-face

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


پشتیانی مرورگر

در جدول زیر اعداد نشان دهنده ی اولین نسخه ی مرورگری است که به طور کامل از خصوصیت پشتیبانی می کند. اعدادی که به همراه  -webkit-, -moz-, -o- آمده اند اولین نسخه ای از مرورگر را نشان می دهد که خصوصیت در صورت استفاده شدن با یک پیشوند توسط مرورگر پشتیبانی شده است.

Property

IE

Chrome

Firefox

Safari

Opera

@font-face

9.0

4.0

3.5

3.2

10.0

 


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

TrueType Fonts (TTF)

TrueType  یک استاندار فونت است که در اواخر سال 1980 توسط Apple  و مایکروسافت بوجود آمد. TrueType پراستفاده ترین فرمت فونت برای سیستم عامل های مک و ویندوز است.

OpenType Fonts (OTF)

یک فرمت برای فونت های کامپیوتر توزیع شده است، آن روی TrueType ساخته شده و با علامت تجاری مایکروسافت ثبت شده است. فونت های OpenType  معمولا امروز در سیستم عامل های کامپیوتر های بزرگ استفاده می شود.

The Web Open Font Format (WOFF)

WOFF یک فرمت فونت برای استفاده در صفحات وب است. آن در سال 2009 توسعه داده شده است و در  حال حاضر یک توصیه ی W3C  است. WOFF  اساسا همانOpenType  یا TrueType با فشرده سازی و متادیتای اضافی است. هدف آن پشتیبانی از توزیع فونت از یک سرور به یک سرویس گیرنده در یک شبکه با محدودیت پهنای باند است.

The Web Open Font Format (WOFF 2.0)

همان فونت TrueType/OpenType  است که فشرده سازی بهتری نسبت به WOFF 1.0  فراهم می می کند.

SVG Fonts/Shapes

فونت های SVG  این امکان را فراهم می کنند که در زمان نمایش متن، SVG همانند حروف استفاده شود. مشخصات SVG 1.1  یک ماژول فونت مشخص می کند که به ایجاد فونت ها در یک سند SVG  کمک می کنند. همچنین شما می توانید CSS  را با اسناد SVG  به کارببرید، و قانون @font-face  می تواند برای متن های اسناد SVG  به کار برده شود.

Embedded OpenType Fonts (EOT)

فونت های OET فرم فشرده ای از فونت های  OpenType  هستند که  توسط مایکروسافت برای استفاده به عنوان فونت های جاسازی شده رو صفحات وب  طراحی شده اند.


پشتیانی مرورگر

در جدول زیر اعداد نشان دهنده ی اولین نسخه ی مرورگری است که به طور کامل از خصوصیت پشتیبانی می کند. اعدادی که به همراه  -webkit-, -moz-, -o- آمده اند اولین نسخه ای از مرورگر را نشان می دهد که خصوصیت در صورت استفاده شدن با یک پیشوند توسط مرورگر پشتیبانی شده است.

فرمت فونت

IE

Chrome

Firefox

Safari

Opera

TTF/OTF

9.0*

4.0

3.5

3.1

10.0

WOFF

9.0

5.0

3.6

5.1

11.1

WOFF2

عدم پشتیبانی

36.0

 

35.0*

 

عدم پشتیبانی

 

26.0

SVG

عدم پشتیبانی

4.0

عدم پشتیبانی

3.2

9.0

EOT

6.0

عدم پشتیبانی

عدم پشتیبانی

عدم پشتیبانی

عدم پشتیبانی

IE*:فرمت فونت تنها وقتی که  installable ست شود کار می کند

Firefox*: به صورت پیش فرض پشتیبانی نمی شود، اما می تواند فعال شود ( برای استفاده از WOFF2  لازم است که یک فلگ مقدار “true” بگیرد)


استفاده کردن از فونت هایی که شما تمایل به استفاده از آن دارید

در قانون @font-face   CSS3 شما باید اول یک نام برای فونت تعریف کنید ( برای مثال. myFirstFont) ، سپس به فایل فونت اشاره کنید.

نکته: همیشه از کارکترهای حروف کوچک برای URL  فونت استفاده کنید.حروف بزرگ نتایج غیرمنتظره ای را در IE   می تواند به همراه داشته باشد.

برای استفاده فونت برای یک عنصر HTML ، در خصوصیت font-family  نام فونت (myFisrtFont) را بیاورید:
مثال

@font-face {

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

استفاده از متن Bold

برای استفاده از متن Bold شما باید قانون @font-face  دیگری که دارای توصیف کننده های متن Bold  است را اضافه کنید.

مثال

 

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

فایل “sensation_blod.woff” فایل فونت دیگری است، که شامل کاراکتر های Bold  برای فونت Sansation  است.

زمانی که که یک قطعه از متن با فونت “myFirstFont” باید به صورت Bold  ارائه شود مرورگرهای از این این فایل  استفاده می کنند. با این روش شما می توانید چندین قانون @font-face  را برای همان فونت داشته باشید.


توصیف کننده های فونت CSS3

شرح

مقدارها

توصیف کننده

الزامی است. یک نام برای فونت مشخص می کند.

Name

font-family

الزامی است. URL  فایل فونت را مشخص می کند

URL

src

اختیاری است. نحوه ی کشیده شدن فونت را مشخص می کند. پیش فرض آن

“normal” است

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

font-stretch

اختیاری است. چگونه سبک دادن فونت را مشخص می کند . پیش فرض آن “normal” است.

normal
italic
oblique

font-style

اختیاری است. وزن فونت را مشخص می کند. پیش فرض آن “normal” است.

normal
bold
100
200
300
400
500
600
700
800
900

font-weight

اختیاری است. بازه ی کارکترهای یونیکدی را که فونت پشتیبانی می کند را مشخص می کند. پیش فرض  "U+0-10FFFF" hsj.

unicode-range

unicode-range

 

محمد انصاری

من به عنوان طراح و برنامه نویس در شرکت توسن در حوزه ی بانکداری فعالیت می کنم. بیشتر زمانم رو به مطالعه پیرامون طراحی نرم افزار اختصاص میدم. همچنین علاقه ی زیادی به فعالیت های ورزشی دارم و زمان کافی به ورزش اختصاص می دهم.

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
فونت های CSS3
زیگماوب