فونت ها در CSS3

بااستفاده از css3 ، توسعه دهندگان وب مجبور نیستند فقط از فونت های مطمئن وب استفاده کنند.

فونت های وب در css3 - دستور font-face@

فونت های وب به کاربران امکان استفاده از فونت هایی را می دهند که در کامپیوترشان ذخیره نشده است.
زمانی که فونتی را که دوست دارید استفاده کنید پیدا می کنید/می خرید ، کافی است فایل فونت مورد نظر را روی سرور ذخیره و تنظیم کنید تا زمانی که نیاز بود بصورت اتوماتیک برای کاربر دانلود شود.
فونتفونت های مخصوص شما با استفاده از دستور font-face@ در css3 تعریف می شود.

 

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

اعداد داخل جدول نشان دهنده اولین نسخه از مرورگر است که از این صفت پشتیبانی می کند.

    فرمت   کروم   اکسپلورر   فایرفاکس   سافاری   اپرا
@font-face 4.0 9.0 3.5 3.2 10.0

 

 

 

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

(TrueType Fonts (TTF
true type یک استاندارد فونت است که در اواخر دهه 1980 میلادی توسط مایکروسافت و اپل توسعه یافت. این استاندارد معمول ترین فرمت مورد استفاده در مک و ویندوز است.

(OpenType Fonts (OTF
open font فرمتی برای فونت های کامپیوتری مقیاس پذیر است که بر اساس TTF ساخته شده است و یک نشان تجاری ثبت شده برای مایکروسافت است. OTF این امروزه بر روی بسیاری از پلت فرم های کامپیوتری اصلی استفاده می شود.

(The Web Open Font Format (WOFF
WOFF فرمت فونت برای استفاده از صفحات وب است و گزینه اصلی توصیه شده توسط  W3C می باشد. WOFF اساساً یک OTF یا TTF با تراکم و ابرداده های افزوده شده است. هدف از استفاده این فرمت پشتیبانی از توزیع فونت از سرور تا یک کاربر از طریق یک شبکه است.

(The Web Open Font Format (WOFF 2.0
فونت های true typ/open type که تراکم بهتری نسبت به WOFF 1.0 ارائه می کند.

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

(Embedded OpenType Fonts (EOT
فونتهای EOT نوع متراکمی از فونت های Open Type هستند که توسط مایکروسافت به عنوان فونت های جاسازی شده در صفحات وب ، طراحی شده است.


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

اعداد داخل جدول نشان دهنده اولین ورژن از مرورگر است که بطور کامل فرمت مورد نظر را پشتیبانی می کند.

    فرمت   کروم   اکسپلورر   فایرفاکس   سافاری   اپرا
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 Not supported 36.0 35.0* Not supported 26.0
SVG Not supported 4.0 Not supported 3.2 9.0
EOT 6.0 Not supported Not supported Not supported Not supported

 

 

 

 

 

 

 

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


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

در دستور font-face@ باید ابتدا یک نام برای فونت مورد نظر تعریف کنید. و بعد به فایل فونت اشاره کنید.

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

برای استفاده از فونت برای یک عنصر HTML ، در داخل صفت font-family به نام فونت اشاره کنید.

مثال :

فونت دلخواه
@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}
مشاهده مثال

استفاده از متن ضخیم

برای این کار باید یک دستور جدید font-face@ اضافه کرده و مشخصات متن ضخیم را در آن قرار دهید.

مثال :

فونت ضخیم
@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}
مشاهده مثال


در مثال بالا فایل sansation_bold.woff ، فایل دیگری است که حاوی کاراکتر های ضخیم فونت مورد نظر است. زمانی که نیاز باشد هر قسمتی از متن با خانواده-فونت myFirstFont ضخیم شود ، مرورگر از این فایل استفاده خواهد کرد.
با این روش می توانید font-face@ زیادی برای همان فونت داشته باشید.

 

 

 

نظر شما

یادگیری CSS یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز