فونت CSS
CSS کاغذ کپیتل کا حصہ، کاغذ کا فونٹ، سائز، تیرتا، سٹائل (مثلاً کج سائز) اور تبدیلی (مثلاً چھوٹی بچولی) کا تعریف کرتا ہے۔
زبان فونت CSS
CSS میں، دو طرح کی فونٹ سلسلے کے نام دستیاب ہیں:
- عام فونٹ سلسلے - مماثل نظر کا فونٹ سلسلے کا گروپ (مثلاً "Serif" یا "Monospace")
- مخصوص فونٹ سلسلے - خاص فونٹ سلسلے (مثلاً "Times" یا "Courier")
مخصوص فونٹ سلسلے کے علاوہ، CSS میں 5 طرح کی عام فونٹ سلسلے دستیاب ہیں:
- Serif فونٹ
- Sans-serif فونٹ
- Monospace فونٹ
- Cursive فونٹ
- Fantasy فونٹ
اگر آپ کو فونٹ سلسلے کے بارے میں مزید معلومات حاصل کرنا چاہئیں تو پڑھیئے: زبان فونت CSS.
مخصوص فونٹ سلسلے
استعمال کریں font-family ضابطہ متن کی فونٹ سلسلے کا تعریف کرنا۔
عام فونٹ سلسلے کا استعمال
اگر آپ چاہتے ہیں کہ دستاویز sans-serif فونٹ کا استعمال کرسکے، لیکن آپ کو کوئی فونٹ کا انتخاب نہیں چاہئیے تو اس کا ایک مناسب دفعہ درج ذیل ہے:
body {font-family: sans-serif;}
استعمال کنندہ آگے، sans-serif فونٹ سلسلے سے ایک فونٹ کو منتخب کر سکتا ہے (مثلاً Helvetica) اور اس کو body عناصر پر لاگائی سکتا ہے۔ اس کی وجہ سے، اس فونٹ کا انتخاب body عناصر میں شامل تمام عناصر پر لاگائی جائے گا، مگر کسی خاص ترتیب کا نام نہیں لگایا جائے تو اس پر کسی بھی خاص ترتیب کا نام لگایا جائے گا جو اس کو ختم کر سکتی ہے۔
مخصوص فونٹ سلسلے
آپ عام فونٹ سلسلے کا استعمال کے علاوہ، font-family ضابطے کا استعمال کرسکتے ہیں تاکہ بہت خاص فونٹ کو طے کرسکتے ہیں۔
ایک مثال میں، تمام h1 عناصر کو Georgia فونٹ کو طے کیا گیا ہے:
h1 {font-family: Georgia;}
ایسا ضابطہ اور ایک دوسرے مسئلے کو پیدا کرتا ہے، اگر استعمال کنندہ آگے Georgia فونٹ کو نہیں نصب کیا ہوا تو صرف استعمال کنندہ آگے کی فونٹ کا دفعہ استعمال کیا جاسکتا ہے تاکہ h1 عناصر کو نمائش دی جاسکے۔
آپ اس کو حل کرسکتے ہیں، جب آپ کو خاص فونٹ کا نام اور عام فونٹ سلسلے کا کمبائن کرنا ہو:
h1 {font-family: Georgia, serif;}
اگر خوانندہ Georgia کو نہیں نصب کیا ہوا، لیکن Times فونٹ کو نصب کیا ہوا ہو (جس کو serif فونٹ سلسلے میں ایک فونٹ کہا جاتا ہے)، تو استعمال کنندہ آگے 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 قرار گیرد، باید از نقل قولی استفاده شود که در ویژگی font-family استفاده نشده باشد:
<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 کا نمبرتکلیف کا فونٹ کا سبک سیٹ کریں
بولڈ کلمات کا استعمال کریں تاکہ متن کو بولڈ کیا جائے
کلمات کا استعمال 100 ~ 900 فونٹ کی بولڈ کی شدت کو 9 درجے میں طے کرتی ہیں، اگر کسی فونٹ میں یہ درجے موجود ہیں تو یہ اعداد مستقیماً پچھلے درجے سے منسلک ہو جائیں گا، 100 سب سے چھوٹی فونٹ کی بولڈ کی شدت کا نمائندہ ہوگا، 900 سب سے بڑی فونٹ کی بولڈ کی شدت کا نمائندہ ہوگا، 400 کا نمائندہ normal اور 700 کا نمائندہ bold ہوگا.
اگر آپ کا عناصر کا بولڈ کیا جائے تو بلاگرون وہ فونٹ کی بولڈ کی شدت کو وہاں سے لے آئے گا جس سے وہ ورث کیا جائے گا، لیکن کیوں کہ لائٹر کی کلمات کا استعمال کیا جائے تو بلاگرون فونٹ کی بولڈ کی شدت کو کم کرے گا.
مثال
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
فونٹ سائز
font-size کا نمبرتکلیف سائز کو سیٹ کریں
توانائی کا استعمال کرنا، ویکسٹ کی سائز کو کماننے کا، ویکسٹ ڈیزائن کے شعبے میں بہت اہم ہے، لیکن آپ کو نہیں چاہئیے کہ آپ پاراگراف کو عنوان کی طرح دیکھائیں یا عنوان کو پاراگراف کی طرح دیکھائیں.
�میشہ صحیح ایچ ایم ال کا استعمال کریں، مثلاً <h1> - <h6> کا استعمال کریں تاکہ عنوانوں کو نشان دہ کریں، <p> کا استعمال کریں تاکہ پاراگرافوں کو نشان دہ کریں.
font-size کا مارکر مطلق یا نسبتی کا مارکر کرسکتا ہے
مطلق:
- تکلیف سائز کو طے کریں
- بلاگرون نہیں دیتی ہے تاکہ بلاگرون میں متن کی سائز کو تبدیل کرسکے (نمایاں کی کارآمدی کے لئے نا مفید)
- مطلق سائز، جب آؤٹ پٹری کی سائز کو طے کرنا ہوتا ہے، بہت مفید ہوتی ہے
نسبتی سائز:
- بعد کی عناصر کی نسبت میں سائز کو سیٹ کرنے کا
- بلاگرون کا استعمال کرکے بلاگرون میں متن کی سائز کو تبدیل کرنے کی اجازت دیتی ہے
توجہ:اگر آپ نے فونٹ سائز کو سیٹ نہیں کیا ہے تو عام متن (مثلاً پاراگراف) کی میروت سائز 16 پیکسلو (16px=1em) ہوتی ہے.
پیکسلو کا استعمال کرکے فونٹ سائز کو سیٹ کرنے کا
پیکسلو کا استعمال کرکے فونٹ سائز کو سیٹ کرنے سے، فونٹ سائز کو پورا کنٹرول کرسکتے ہیں:
مثال
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
فائر فاکس، کروم اور سافری میں، مذکورہ مثال کی بھاگا کی سائز کو دوبارہ سیٹ کرسکتے ہیں، لیکن آئنٹرنیٹ ایکسپلورر میں نہیں.
بھاگا کی سائز کو تبدیل کرنے کا ابزار کا استعمال کرکے بھاگا کی سائز کو تبدیل کرسکتے ہیں، لیکن یہ واقعی پورے پیج کو چننا ہوتا ہے، نہ کہ صرف متن.
ایم کا استعمال کرکے فونٹ سائز کو سیٹ کرنے کا
اگر چاہیئید کہ آئنٹرنیٹ ایکسپلورر میں متن کو چننے کا مسئلہ روک دیں، بہت سے ڈیولپر ای ایم اکائی کا استعمال کرتے ہیں.
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 | تنظیم ضخامت فونت. |
