قلم‌های وب

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

قانون @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) اشاره کنید:

مثال
1 @font-face {
2   font-family: myFirstFont;
3   src: url(sansation_light.woff);
4 }
5 
6 div {
7   font-family: myFirstFont;
8 }


استفاده از متن برجسته (Bold)

باید قانون @font-face دیگری شامل توصیف کننده‌هایی برای متن‌های برجسته اضافه کنید:

مثال
1 @font-face {
2   font-family: myFirstFont;
3   src: url(sansation_bold.woff);
4   font-weight: bold;
5 }


فایل "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" است


منابع آموزشی