فهرست سرفصل‌های CSS
خانه (Home) CSS مقدمه CSS (Introduction) سینتکس CSS (Syntax) انتخاب گرهای CSS (Selectors) نحوه استفاده از CSS (How To) کامنت ها در CSS (Comments) ارورها در CSS (Errors) رنگ ها در CSS (Colors) رنگ ها - RGB و RGBA رنگ ها - هگز (HEX Colors) رنگ ها - HSL و HSLA پس زمینه (Backgrounds) پس زمینه - تصویر (Backgrounds Image) پس زمینه - تکرار تصویر (Backgrounds Image Repeat) پس زمینه - پیوست (Background Attachment) پس زمینه - کوتاه نویسی (Background Shorthand) کادرها (Borders) کادرها - عرض (Borders Width) کادرها - رنگ (Borders Color) کادرها - کناره ها (Borders Sides) کادرها - کوتاه نویسی (Shorthand Border Property) کادرها - گرد (Rounded Borders) لایه (Padding) ارتفاع، عرض و حداکثر عرض (Height, Width and Max-width) مدل جعبه ای (Box Model) خط پیرامونی (Outline) خط پیرامونی - ضخامت (Outline Width) خط پیرامونی - رنگ (Outline Color) خط پیرامونی - کوتاه نویسی (Outline Shorthand) خط پیرامونی - آفست (Outline Offset) متن - رنگ (Text Color) متن - چینش (Text Alignment) متن - تزئینات (Text Decoration) متن - تبدیل حروف (Text Transformation) متن - فاصله گذاری (Text Spacing) متن - سایه (Text Shadow) فونت ها (Fonts) فونت های وب سیف (Font Web Safe) فونت - جایگزین ها (Font Fallbacks) فونت - سبک (Font Style) فونت - اندازه (Font Size) فونت - گوگل (Font Google) فونت - کوتاه نویسی (Font Shorthand)
CSS

CSS — فونت - کوتاه نویسی (Font Shorthand)

آخرین بروزرسانی: 1404/07/13

کوتاه نویسی فونت (Font Shorthand) در CSS

ویژگی «کوتاه نویسی فونت» یا font shorthand به شما اجازه می دهد همه خواص فونت را در یک اعلان خلاصه کنید. با این روش، کد تمیزتر می شود و نگه داری ساده تر خواهد شد.

ویژگی font؛ چه چیزهایی را پوشش می دهد؟

در CSS، ویژگی font کوتاه نویسیِ این خواص است:

  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • font-size
  • line-height
  • font-family

قوانین استفاده از کوتاه نویسی فونت

  1. وجود font-size و font-family الزامی است. بقیه در صورت عدم ذکر، مقدار پیش فرض می گیرند.
  2. اگر تعریف شوند، font-style، font-variant و font-weight باید قبل از font-size بیایند.
  3. اگر تعریف شود، line-height باید بلافاصله بعد از font-size و با اسلش / نوشته شود؛ مثل 15px/30px.
  4. font-family باید آخرین مقدار باشد.

نمونه های کوتاه نویسی فونت

چند نمونه برای تنظیم چندین خاصیت در یک اعلان:

p.a{ font:20px Arial, sans-serif; }
p.b{ font:italic bold 16px Arial, sans-serif; }
p.c{ font:italic small-caps bold 15px/30px Georgia, serif; }

نکته: ترتیب را دقیق رعایت کنید تا مرورگر همه مقادیر را درست تشخیص دهد.

الگوی امن و قابل نگه داری

برای خوانایی، ابتدا پایه ها را با خواص مجزا تنظیم کنید و سپس در اجزای تکراری از کوتاه نویسی فونت استفاده کنید.

body{ font-family:Arial, sans-serif; font-size:16px; }
h1{ font:italic 700 32px/1.25 Georgia, serif; }
p.note{ font:normal 14px/1.7 Arial, sans-serif; }

کوتاه نویسی فونت را به عنوان مرجع سریع نشانه گذاری کنید و در کنار آن، صفحات فونت - سبک و فونت - اندازه را نیز ببینید.