سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه قبل آموختیم که چگونه با ویژگی font کار کنیم؛ ویژگی font یک ویژگی مختصر برای font-style، font-variant، font-weight ، font-size/line-height و font-family است.
در این جلسه شما را به آموزش کار با ویژگی font-face@ در CSS دعوت می کنیم.
آموزش کار با ویژگی font-face@ در CSS
به مثال زیر توجه نمایید؛ در این مثال یک فونت به نام “myFirstFont” را مشخص کرده ایم و URL را در آن پیدا کرده ایم.
مثال :
| @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } |
تعریف و کاربرد
با استفاده از قانون font-face@ طراحان وب دیگر مجبور به استفاده از “web-safe” نیستند. در قانون font-face@ ابتدا باید نامی را برای فونت (مثلاً myFirstFont) تعیین کنید و سپس به پرونده فونت اشاره کنید.
نکته
از URL حروف کوچک استفاده کنید. حروف بزرگ می توانند نتایج غیرمنتظره را در اینترنت اکسپلورر رقم بزنند!
برای استفاده از فونت برای یک عنصر HTML ، باید از طریق ویژگی font-family به نام قلم (myFirstFont) اقدام کنید:
مثال :
| div { font-family: myFirstFont; } |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی font-face@ در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| Font format |  |  |  |  |  |
| TTF/OTF | ۴٫۰ | ۳٫۵ | ۱۰٫۰ | ۳٫۱ | ۹٫۰* |
| WOFF | ۵٫۰ | ۳٫۶ | ۱۱٫۱ | ۵٫۱ | ۹٫۰ |
| WOFF2 | ۳۶٫۰ | ۳۵٫۰* | ۲۶٫۰ | پشتیبانی نمی شود | پشتیبانی نمی شود |
| SVG | ۴٫۰ | پشتیبانی نمی شود | ۹٫۰ | ۳٫۲ | پشتیبانی نمی شود |
| EOT | پشتیبانی نمی شود | پشتیبانی نمی شود | پشتیبانی نمی شود | پشتیبانی نمی شود | ۶٫۰ |
* Edge و IE: فرمت فونت فقط وقتی تنظیم می شود که “قابل نصب” باشد.
* Firefox: به طور پیش فرض غیرفعال است ، اما می تواند فعال شود (برای استفاده از WOFF2 باید یک flag را روی “true” قرار دهید).
سینتکس
مثال :
| @font-face { font-properties } |
مقدار ویژگی
| توضیحات فونت | مقدار | توضیحات |
|---|
| 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 | اختیاری است. استایل فونت را تعریف می کند. مقدار پیش فرض “normal” است. |
| font-weight | normal
bold
۱۰۰
۲۰۰
۳۰۰
۴۰۰
۵۰۰
۶۰۰
۷۰۰
۸۰۰
۹۰۰ | اختیاری است. میزان بولد بودن و درشتی فونت را تعریف می کند. مقدار پیش فرض “normal” است. |
| unicode-range | unicode-range | اختیاری است. محدوده کاراکترهای یونیکد را که فونت پشتیبانی می کند تعریف می کند. مقدار پیش فرض “U + 0-10FFFF” است. |
مثال های بیشتر
مثال یک
افزودن یک font-face@ دیگر به منظور تعریف میزان بولد بودن متن:
مثال :
| @font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; } |
فایل “sansation_bold.woff” یکی دیگر از فایل های فونت است که شامل کاراکترهای بولد برای فونت Sansation است. و هر گاه که font-family یا فونت دسته خانواده “myFirstFont” به عنوان بولد رندر شوند؛ مرورگر ها از آن استفاده می کنند.
کلام آخر
در این جلسه به آموزش کار با ویژگی font-face@ در CSS پرداختیم؛ با استفاده از قانون font-face@ طراحان وب دیگر مجبور به استفاده از “web-safe” نیستند. در قانون font-face@ ابتدا باید نامی را برای فونت (مثلاً myFirstFont) تعیین کنید و سپس به پرونده فونت اشاره کنید.
در جلسه آینده به آموزش ویژگی font-family می پردازیم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
