قلم‌های وب

از موتو کد، دانشنامهٔ برنامه‌نویسی

قانون @font-face در CSS[ویرایش | ویرایش]

قلم‌های وب به طراحان وب اجازه استفاده از قلم‌هایی را می‌دهد که روی رایانه کاربر نصب نیستند.[۱]

زمانی که قلم مورد نظر خود را پیدا/خریداری می‌کنید، تنها فایل قلم را روی وب سرور قرار دهید، و آن در صورت نیاز بطور خودکار برای کاربر دانلود خواهد شد.

قلم‌های «خودتان» با قانون @font-face در CSS تعریف می‌شود.

فرمت‌های متفاوت قلم[ویرایش | ویرایش]

  • قلم‌های TrueType (TTF)
Truetype یک قلم استاندارد توسعه داده شده در اواخر دهه ۱۹۸۰، توسط Apple و Microsoft است. Truetype رایج‌ترین فرمت قلم برای سیستم عامل‌های Mac Os و Windows است.
  • قلم‌های OpenType (OTF)
OpenType یک فرمت برای قلم‌های قابل scale است. در TrueType ساخته شده‌است، و یک علامت تجاری ثبت شده از شرکت Microsoft است. قلم‌های OpenType امروزه بر روی اکثر پلتفرم‌های کامپیوتر استفاده می‌شوند.
  • فرمت قلم Web Open Font Format (WOFF)
WOFF یک فرمت قلم برای استفاده در صفحات وب است. این نوع قلم در سال ۲۰۰۹ توسعه داده شده‌است، امروزه یکی از توصیه‌های W3C است. WOFF در حقیقت از نوع OpenType یا TrueType با فشرده سازی و metadataهای اضافی است.
  • فرمت قلم Web Open Font Format (WOFF 2.0)
قلم TrueType/OpenType فشرده سازی بهتری نسبت به WOFF 1.0 فراهم می‌کند.
  • قلم‌های SVG / اشکال
قلم‌های SVG به فایل SVG اجازه می‌دهند به عنوان نماد هنگام نمایش متن استفاده شود. مشخصات SVG 1.1 یک ماژول قلم را تعریف می‌کند که اجازه ایجاد قلم‌ها درون یک سند SVG را می‌دهد. همچنین می‌توانید کدهای CSS را روی سندهای SVG اعمال کنید، و قانون @font-face می‌تواند برروی متن در اسناد SVG اعمال شود.
  • قلم‌های تعبیه شده Embedded OpenType (EOT)
قلم‌های EOT یک فرم فشرده از قلم‌های OpenType هستند که توسط Microsoft برای استفاده به عنوان قلم‌های تعبیه شده در صفحات وب طراحی شده‌اند.

پشتیبانی مرورگرها برای فرمت های قلم[ویرایش | ویرایش]

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

فرمت قلم Internet Explorer / Edge Chrome Firefox Safari Opera
TTF/OTF ۹٫۰[IE ۱] ۴٫۰ ۳٫۵ ۳٫۱ ۱۰٫۰
WOFF ۹٫۰ ۵٫۰ ۳٫۶ ۵٫۱ ۱۱٫۱
WOFF2 پشتیبانی نمی‌شود ۳۶٫۰ ۳۵٫۰[FF ۱] پشتیبانی نمی‌شود ۲۶٫۰
SVG پشتیبانی نمی‌شود ۴٫۰ پشتیبانی نمی‌شود ۳٫۲ ۹٫۰
EOT ۶٫۰ پشتیبانی نمی‌شود پشتیبانی نمی‌شود پشتیبانی نمی‌شود پشتیبانی نمی‌شود

توضیحات[ویرایش | ویرایش]

  1. فرمت فونت تنها زمانی کار می‌کند که روی گزینه "installable" تنظیم شده باشد.
  1. بصورت پیش‌فرض پشتیبانی نمی‌کند، اما می‌توان آن را فعال کرد (نیاز است تا برای استفاده از WOFF2 یک مقدار flag را به مقدار "true" تغییر دهید)

استفاده از قلم دلخواه شما[ویرایش | ویرایش]

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

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

برای استفاده قلم برای یک عنصر HTML، از طریق ویژگی font-family، به نام قلم (myFirstFont) اشاره کنید:

مثال
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

استفاده از متن برجسته (Bold)[ویرایش | ویرایش]

باید قانون @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 تعریف شوند را لیست می‌کند:

توصیف کننده مقادیر توضیحات
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

۱۰۰

۲۰۰

۳۰۰

۴۰۰

۵۰۰

۶۰۰

۷۰۰

۸۰۰

۹۰۰

اختیاری است، میزان bold بودن قلم را مشخص می‌کند. مقدار پیش‌فرض "normal" است
unicode-range unicode-range اختیاری است. محدوده کاراکترهای مورد پشتیبانی قلم را مشخص می‌کند. مقدار پیش‌فرض "U+0-10FFFF" است

منابع آموزشی[ویرایش]