تنظیمات فونت CSS

ویژگی‌های فونت CSS تعریف می‌کند سریه‌های فونت، اندازه، اضافه کردن فونت (مثلاً تیره‌تر) و سبک (مثلاً خمیده) و تغییرات (مثلاً کوچک‌تر از حروف بزرگ).

سری‌های CSS

در CSS، دو نوع مختلف از نام‌های مجموعه فونت‌ها وجود دارد:

  • مجموعه فونت‌های عمومی - مجموعه‌های فونت‌های سیستم‌های مشابه (مثلاً "Serif" یا "Monospace")
  • مجموعه فونت‌های خاص - مجموعه‌های فونت‌های خاص (مثلاً "Times" یا "Courier")

در CSS، دو نوع مختلف از نام‌های مجموعه فونت‌ها وجود دارد:

  • فونت‌های Serif
  • فونت‌های Sans-serif
  • فونت‌های Monospace
  • فونت‌های Cursive
  • فونت‌های Fantasy

اگر می‌خواهید اطلاعات بیشتری در مورد مجموعه فونت‌ها بدست آورید، لطفاً مطالعه کنید: سری‌های CSS.

مجموعه عمومی فونت‌ها

استفاده کنید ویژگی font-family مجموعه فونت‌های متن را تعریف کنید.

استفاده از مجموعه عمومی فونت‌ها

اگر می‌خواهید مستند از یک فونت sans-serif استفاده کند، اما به نوع فونت اهمیتی نمی‌دهید، این یک بیان مناسب است:

body {font-family: sans-serif;}

خودتان امتحان کنید

کاربرagent به فونتی از مجموعه فونت‌های sans-serif (مثلاً Helvetica) انتخاب می‌کند و آن را به عنصر body اعمال می‌کند. به دلیل ارث‌برداری، این انتخاب فونت به تمام عناصر داخل عنصر body نیز اعمال می‌شود، مگر اینکه یک انتخاب‌کننده خاص‌تر آن را پوشش دهد.

مجموعه عمومی فونت‌ها

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

در این مثال، تمام عناصر h1 با فونت Georgia تنظیم شده‌اند:

h1 {font-family: Georgia;}

خودتان امتحان کنید

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

ما می‌توانیم این مشکل را با ترکیب نام فونت خاص و مجموعه عمومی فونت‌ها حل کنیم:

h1 {font-family: Georgia, serif;}

خودتان امتحان کنید

اگر خواننده فونت Georgia را نصب نکرده باشد، اما فونت Times (یک فونت از خانواده فونت‌های serif) را نصب کرده باشد، کاربر ممکن است فونت Times را برای عنصر h1 استفاده کند. اگرچه Times با Georgia کاملاً مطابقت ندارد، اما حداقل به اندازه کافی شبیه است.

بنابراین، ما پیشنهاد می‌دهیم که در همه قوانین font-family یک مجموعه عمومی از فونت‌ها را ارائه دهید. این کار یک راه بازگشتی را فراهم می‌کند، به طوری که اگر کاربر نتواند فونتی که با این قوانین مطابقت دارد را ارائه دهد، می‌تواند یک فونت نامزد را انتخاب کند.

اگر شما با فونت‌ها بسیار آشنا هستید، می‌توانید یک سری از فونت‌های مشابه برای عنصر داده شده指定 کنید. برای انجام این کار، باید این فونت‌ها را به ترتیب اولویت قرار دهید و سپس آن‌ها را با کاما جدا کنید:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

خودتان امتحان کنید

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

استفاده از قیدها

شاید توجه کرده باشید که در مثال‌های بالا از قیدهای مجزا استفاده شده است. تنها زمانی که نام فونت شامل فضاهای خالی (مثلاً New York) باشد یا اگر نام فونت شامل نمادهایی مانند # یا $ باشد، باید در تعیین font-family از قیدها استفاده شود.

قیدهای مجزا یا دوگانه هم قابل پذیرش هستند. اما اگر یک ویژگی font-family در ویژگی style HTML قرار گیرد، باید از قیدهای خود این ویژگی استفاده شود:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

خودتان امتحان کنید

سبک فونت

خصوصیت font-styleمعمولاً برای تعیین متون italic استفاده می‌شود.

این ویژگی سه مقادیر دارد:

  • normal - نمایش متون عادی
  • italic - نمایش متون italic شده
  • oblique - نمایش متون کج شده

مثال

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

خودتان امتحان کنید

تفاوت italic و oblique

font-style بسیار ساده است: برای انتخاب بین متون normal، italic و oblique استفاده می‌شود. تنها نکته پیچیده این است که تفاوت بین متون italic و oblique را مشخص کنیم.

italic یک سبک فونت ساده است که تغییرات کوچکی در ساختار هر حرف ایجاد می‌کند تا ظاهر تغییر کرده را نشان دهد. برخلاف این، متون oblique نسخه‌ای کج شده از متون عمودی عادی است.

در شرایط معمولی، متون italic و oblique در مرورگرهای وب به نظر می‌رسند که کاملاً مشابه هستند.

تغییرات فونت

خصوصیت font-variantمی‌توان حروف بزرگ کوچک را تنظیم کرد.

حروف بزرگ کوچک حروف بزرگی نیستند که معمولی هستند، و همچنین حروف کوچک نیستند، این حروف از حروف بزرگ با اندازه‌های مختلف استفاده می‌کنند.

مثال

p {font-variant:small-caps;}

خودتان امتحان کنید

چگالی فونت

ویژگی font-weightچگالی متن را تنظیم کنید.

با استفاده از کلمه‌ی کلیدی bold می‌توان متن را به صورت چگال تنظیم کرد.

کلمات کلیدی 100 ~ 900 برای指定 9 مرحله‌ی فونت چگالی تعیین شده‌اند. اگر یک فونت این سطح‌های فونت چگالی را داشته باشد، این اعداد مستقیماً به سطح‌های پیش‌تعیین شده‌ی آن‌ها تطبیق داده می‌شوند، 100 به معنای نازک‌ترین تغییر فونت است و 900 به معنای چگال‌ترین تغییر فونت است. عدد 400 برابر با normal و 700 برابر با bold است.

اگر اندازه فونت یک عنصر به صورت bolder تنظیم شود، مرورگر اندازه فونت را به اندازه‌ای تنظیم می‌کند که از مقدار ارث‌برداری شده‌ی آن بیشتر باشد. برعکس، استفاده از کلمه‌ی کلیدی lighter باعث می‌شود که مرورگر اندازه فونت را کاهش دهد نه افزایش دهد.

مثال

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

خودتان امتحان کنید

اندازه فونت

ویژگی font-sizeاندازه متن را تنظیم کنید.

توانایی مدیریت اندازه متن در حوزه طراحی وب بسیار مهم است. اما، شما نباید اندازه متن را به گونه‌ای تنظیم کنید که پاراگراف به نظر برسد مانند عنوان یا عنوان به نظر برسد مانند پاراگراف.

همیشه از عناوین HTML صحیح استفاده کنید، مانند استفاده از <h1> - <h6> برای برچسب‌گذاری عنوان، استفاده از <p> برای برچسب‌گذاری پاراگراف.

مقدار font-size می‌تواند مطلق یا نسبی باشد.

مطلق:

  • متن را به اندازه مشخصی تنظیم کنید
  • اجازه ندهید کاربران در تمام مرورگرها اندازه متن را تغییر دهند (این برای دسترسی‌پذیری مضر است)
  • اندازه مطلق در تعیین اندازه فیزیکی خروجی بسیار مفید است

اندازه نسبی:

  • اندازه را در مقایسه با عناصر اطراف تنظیم کنید
  • اجازه دهید کاربران متن را در مرورگر تغییر دهند

توجه داشته باشید:اگر اندازه فونت تعیین نشده باشد، اندازه پیش‌فرض متن عادی (مثل پاراگراف) 16 پیکسل است (16px=1em).

از pixel برای تنظیم اندازه فونت استفاده کنید

با تنظیم اندازه متن به صورت pixel، می‌توان کاملاً کنترل اندازه متن را به دست آورد:

مثال

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

خودتان امتحان کنید

در Firefox، Chrome و Safari می‌توان اندازه متن مثال بالا را تنظیم کرد، اما در Internet Explorer نمی‌توان.

اگرچه می‌توان با استفاده از ابزار بزرگنمایی مرورگر اندازه متن را تنظیم کرد، اما این کار در واقع تنظیم کل صفحه است، نه فقط متن.

از em برای تنظیم اندازه فونت استفاده کنید

برای جلوگیری از مشکلات تنظیم متن در Internet Explorer، بسیاری از توسعه‌دهندگان از واحد em استفاده می‌کنند به جای pixels.

W3C توصیه می‌کند از واحد اندازه em استفاده شود.

1em برابر با اندازه فعلی فونت است. اگر اندازه فونت یک عنصر 16 پیکسل باشد، برای آن عنصر 1em برابر با 16 پیکسل است. در تنظیم اندازه فونت، اندازه em نسبت به اندازه فونت عنصر والد تغییر می‌کند.

اندازه پیش‌فرض متن در مرورگرها 16 پیکسل است. بنابراین اندازه پیش‌فرض 1em 16 پیکسل است.

می‌توان از این فرمول برای تبدیل پیکسل به em استفاده کرد:پیکسل‌ها/16=em

(توجه: 16 برابر اندازه پیش‌فرض فونت عنصر والد است، فرض کنید اندازه پیش‌فرض فونت عنصر والد 20px باشد، پس فرمول باید تغییر کند:پیکسل‌ها/20=em

مثال

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

خودتان امتحان کنید

در مثال‌های بالا، اندازه متن به واحد em با مثال قبلی که به واحد پیکسل است، مشابه است. اما اگر از واحد em استفاده شود، می‌توان اندازه متن را در همه مرورگرها تنظیم کرد.

متاسفانه، در IE هنوز مشکلاتی وجود دارد. در تغییر اندازه متن، ممکن است بزرگتر یا کوچکتر از اندازه عادی باشد.

استفاده از درصد و em

راهی که در همه مرورگرها مؤثر است این است که برای عنصر body (عنصر والد) اندازه پیش‌فرض font-size را به صورت درصد تنظیم کنیم:

مثال

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

خودتان امتحان کنید

کد ما بسیار مؤثر است. در تمام مرورگرها، می‌توان اندازه متن مشابهی را نمایش داد و اجازه می‌دهد که اندازه متن در تمام مرورگرها تغییر کند.

مثال CSS فونت:

فونت متن را تنظیم می‌کنیم
این مثال نشان می‌دهد که چگونه فونت متن را تنظیم می‌کنیم.
اندازه فونت را تنظیم می‌کنیم
این مثال نشان می‌دهد که چگونه اندازه فونت را تنظیم می‌کنیم.
سبک فونت را تنظیم می‌کنیم
این مثال نشان می‌دهد که چگونه سبک فونت را تنظیم می‌کنیم.
شکل فونت را تنظیم می‌کنیم
این مثال نشان می‌دهد که چگونه شکل فونت را تنظیم می‌کنیم.
تراکم فونت را تنظیم می‌کنیم
این مثال نشان می‌دهد که چگونه تراکم فونت را تنظیم می‌کنیم.
تمام ویژگی‌های فونت در یک تعریف
این مثال نشان می‌دهد که چگونه از ویژگی‌های کوتاه نوشته شده برای تنظیم ویژگی‌های فونت در یک تعریف استفاده می‌شود.

ویژگی‌های فونت CSS

ویژگی‌ها توضیحات
فونت ویژگی‌های کوتاه نوشته شده. عملکرد آن تنظیم تمام ویژگی‌های فونت در یک تعریف است.
font-family سری فونت را تنظیم کنید.
font-size اندازه فونت را تنظیم کنید.
font-size-adjust در صورت عدم موجودی فونت پیش‌فرض، فونت جایگزین را به صورت هوشمندانه کوچک یا بزرگ می‌کند. (این ویژگی در CSS2.1 حذف شده است.)
font-stretch کشش افقی فونت را تنظیم کنید. (این ویژگی در CSS2.1 حذف شده است.)
font-style تنظیم سبک فونت.
font-variant نمایش متن به صورت حروف کوچک یا عادی.
font-weight تنظیم ضخامت فونت.