چگونه می توان از FontFace استفاده نمود؟
چهارشنبه, ۲۲ فروردين ۱۳۹۷، ۱۲:۲۲ ب.ظ
فونت چیست ؟
به
مجموعه ای از حروف که به حالت خاصی نوشته میشوند و با استفاده از رابط های
گرافیکی به صورت حروف در می آیند فونت گفته میشود . در زبان فارسی کلمه
قلم به جای فونت استفاده میشود. اما در بین افرادی که با کامپیوتر کار
میکنند و یا آشنایی دارند بیشتر از کلمه انگلیسی فونت به جای قلم استفاده
میگردد.
Fontface چیست ؟
برای استفاده از نوع خاصی از فونت ها در وب سایت خود می بایست از دستوری در CSS به نام Fontface استفاده کرد. با استفاده از font face برنامه نویسان دیگر مجبور به استفاده از یک فونت معمولی و پیشفرض برای وب سایت هایی که طراحی میکنند نیستند .
در جدول زیر ردیف دوم نشاندهنده ورژنی از مرورگر است که FontFace را پشتیبانی میکند .
انواع مختلفی از فونت ها :
- TrueType Fonts (TTF)
TrueType یک فونت استاندارد است که در اواخر دهه 1980 میلادی توسط Apple و Microsoft ارائه گردید. این نوع فونت متداول ترین نوع فونت مورد استفاده در سیستم عامل های Mac و Windows می باشد .
- OpenType Fonts (OTF)
OpenType نوع خاصی از فونت است که بر مبنای TrueType ساخته شده است. این نوع از فونت برای سیستم عامل ویندوز و توسط Microsoft ارائه گردیده است و برای کارهایی که نیاز به دقت بالایی دارند استفاده میگردد.
- The Web Open Font Format (WOFF)
WOFF یک نوع از فونت می باشد که برای وب ساست ها از آن استفاده می شود. این نوع از فونت از سال 2009 به وجود آمد و در حال حاضر W3C استفاده از آن را الزام می داند. WOFF نوعی از فونت برگرفته از OpenType و TrueType است که دارای فراداده های (Metadata) اضافی می باشد، هدف از این کار ارتباط سرور با کاربر است بطوری که انتقال با استفاده از پهنای باند پائینی صورت بگیرد.
- SVG Fonts/Shapes
SVG نوع خاصی از فونت می باشد که به صورت گرافیکی ارائه میگردد. SVG 1.1 یک ماژول است که اجازه استفاده از فونت را در یک فایل از نوع SVG می دهد. این فونت ها می توانند در CSS ارائه شوند و در بردارنده سایر عناصر مبتنی بر فونت ها باشد که در زیر توضیح داده شده اند.
- Embedded OpenType Fonts (EOT)
نوع خاصی از فونت های OpenType می باشد که توسط Microsoft ابداء شده است که برای استفاده از فونت در حالت embedded در مرورگر Internet Explorer کاربرد دارد.
جدول زیر نوع ساپورت انواع فونت ها در مرورگرهای مختلف را نشان میدهد .
قوانین استفاده از FontFace
برای
این کار می توانید فونت دانلود/خریداری شده را در فضای هاست خود آپلود
کنید و با آدرس دهی به آن در هنگام لزوم موقع استفاده کاربر فونت بصورت
اتوماتیک دانلود می شود .
برای استفاده از این نوع فونت ها بایستی از دستور @font-face در CSS3 استفاده کنید .
در تگ های جدید font face بعد از باز کردن تگ ابتدا باید یک نام برای font خود انتخاب کنید و بعد از آن میتوانید با اشاره به فایل font به راحتی از آن استفاده کنید .
نکته مهم : توجه داشته باشید برای آدرس دهی به فونت حتما از حروف کوچک استقاده کنید چون در Internet Explorer با مشکل مواجه خواهید شد.
اگر نیاز دارید علاوه بر نوع فونت ازعناصر دیگر HTML استفاده کنید حتما بایستی قبل از بستن تگ از این عناصر استفاده کنید .
همچنین علاوه بر CSS میتوانید از fontface در HTML هم استفاده کنید . برا این کار میتوانید از دستوری شبیه به دستور زیر استفاده کنید :
@font-face {
font-family: MyFont;
src: url(arial_font.woff);
}
div {
font-family: MyFont;
}
در جدول زیر میتوان عناصری که در زیر تگ فونت به کار می روند را مشاهده کنید .
|
توصیف فونت
|
مقدار
|
توضیحات
|
|
font-family
|
نام
|
یک نام را برای فونت مشخص میکند.
|
|
src
|
آدرس
|
اشاره به مکانی دارد که فونت باید از آنجا دانلود شود .
|
|
font-stretch
|
normal
condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
مقدار انتخابی . مشخص میکند که فونت چقدر باید کشش داشته باشد ، مقدار پیشفرض "Normal" می باشد.
|
|
font-style
|
normal
italic oblique |
مقدار انتخابی . مشخص می کند که استایل فونت باید چگونه باشد ، مقدار پیشفرض می باشد.
|
|
font-weight
|
normal
bold 100 200 300 400 500 600 700 800 900 |
مقدار انتخابی . مشخص می کند که فونت باید چه مقدار بولد باشد ، مقدار پیشفرض "Normal" می باشد.
|
|
unicode-range
|
unicode-range
|
مقدار unicode و کاراکترهایی که فونت ساپورت میکند را مشخص میکند ، مقدار پیشفرض "U+0-10FFFF" می باشد.
|
با
استفاده از جدول بالا علاوه بر انتخاب نوع فونت میتوانید از عناصر دیگر
برای زیباسازی این نوع از فونت استفاده کنید ، همچنین می توانید برای نگارش
فونت به صورت خاص Bold بودن یا داشتن کششی خاص از این عناصر بهره ببرید .
برای مثال دستور زیر علاوه بر Fonface تعیین میکند که فونت Bold هم باشد .
@font-face {
font-family: YekanFont;
src: url(yekan_font_for_my_site.woff);
font-weight: bold;
}
در مثال بالا " yekan_font_for_my_site.woff" نام یک فایل فونت است ، که با استفاده از عنصر “font-weight” به صورت Bold در آمده است . در این حالت مرورگر با رسیدن به یک دستور و متنی که تکه ای از "YekanFont " باشد آن را به صورت Bold نمایش می دهد.
همچنین برای استفاده از FontFace بایستی MIME Type زیر را در Control Panel ایجاد کنید :
Extension = .WOFF MIME Type = application/x-font-woff
برای آگاهی از طریقه ساختن MIME Type میتوانید از آموزش های زیر استفاده کنید :
