یہ بلاگ CSS @font-face اصول کے استعمال کے بارے میں بات کرے گا۔
CSS @font-face اصول کیا ہے؟
CSS میں @font-face اصول کو ہمارے پروجیکٹس کے لیے حسب ضرورت فونٹس بنانے کے لیے استعمال کیا جاتا ہے۔ یہ فونٹس سرور یا سسٹم کے انسٹال کردہ فونٹس سے لوڈ کیے جا سکتے ہیں۔
CSS @font-face اصول کا استعمال کیسے کریں؟
CSS @font-face اصول کو استعمال کرنے کے لیے نحو کا ذکر ذیل میں کیا گیا ہے۔
@font-face {
فونٹ فیملی : مائی نیو فونٹ ;
src : یو آر ایل ( )
}
@font-face اصول کی وضاحت فونٹ فیملی پراپرٹی میں ایک قدر اور متعلقہ یو آر ایل کو بتا کر کی جاتی ہے جہاں سے یہ فونٹ src وصف کے طور پر واقع ہے۔
مثال
ذیل کی مثال میں، ہم فونٹس کو اپنی مرضی کے مطابق بنائیں گے۔ ایسا کرنے کے لیے، پہلے براؤزر سے فونٹس ڈاؤن لوڈ کریں اور انہیں اپنے پروجیکٹ کے فولڈر میں شامل کریں۔ اگر آپ سرور سے فونٹ استعمال کر رہے ہیں تو آپ لنکس بھی استعمال کر سکتے ہیں۔
سب سے پہلے،
اور ٹیگز شامل کریں، پھر ان میں سے ہر ایک کے فونٹ کو اپنی مرضی کے مطابق کرنے کے لیے درخواست دیں۔ آئیے اوپر بیان کردہ منظر نامے کو تین مراحل میں نافذ کریں۔
مرحلہ 1: HTML فائل میں عناصر شامل کریں۔
مرحلہ 1: HTML فائل میں عناصر شامل کریں۔
HTML میں،
سیکشن کے اندر، ویب صفحہ سے متعلق کچھ مواد شامل کرنے کے لیے اور شامل کریں:
< h2 > Linuxhint میں خوش آمدید! < / h2 >
< h1 > Linuxhint میں خوش آمدید! < / h1 >
مرحلہ 2: CSS میں @font-face رول کی وضاحت کریں۔
< h2 > Linuxhint میں خوش آمدید! < / h2 >
< h1 > Linuxhint میں خوش آمدید! < / h1 >
مرحلہ 2: CSS میں @font-face رول کی وضاحت کریں۔
اصول کی وضاحت کرنے کے لیے، کلیدی لفظ ' @font-face CSS میں استعمال کیا جاتا ہے۔ اس کے گھنگھریالے بریکٹ کے اندر، فونٹ فیملی پراپرٹی شامل کریں اور فونٹ کا نام اس کی قدر کے طور پر شامل کریں۔ پھر، ڈاؤن لوڈ کردہ فونٹ کے URL کا راستہ بتانے کے لیے src پراپرٹی کا استعمال کریں:
@font-face {
فونٹ فیملی : myfont ;
src : یو آر ایل ( '/fonts/Batuphat\ Script.otf' ) ;
}
اسی طرح، ہم ایک اور حسب ضرورت فونٹ بلاک شامل کریں گے:
@font-face {فونٹ فیملی : myfont2 ;
src : یو آر ایل ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
اب،
اور عناصر پر اسٹائل لگائیں۔
انداز h2 عنصر
h2 {
فونٹ فیملی : myfont ;
حرف کا سائز : 50px ;
}
انداز h2 عنصر
h2 {فونٹ فیملی : myfont ;
حرف کا سائز : 50px ;
}
عنصر پر لاگو خصوصیات ذیل میں بیان کی گئی ہیں:
- ' فونٹ فیملی 'قدر کے ساتھ مقرر کیا گیا ہے' myfont جس کا ہم نے @font-face اصول میں اعلان کیا ہے۔
- ' حرف کا سائز پراپرٹی فونٹ کا سائز 50px پر سیٹ کرتی ہے۔
انداز h1 عنصر
h1 {
فونٹ فیملی : myfont2 ;
حرف کا سائز : 70px ;
رنگ : براؤن ;
}
یہاں ' رنگ ” پراپرٹی کو فونٹ کو رنگنے کے لیے استعمال کیا جاتا ہے۔
ذیل میں فراہم کردہ تصویر سے دیکھا جا سکتا ہے کہ
اور ٹیگز کو نئے اعلان کردہ فونٹس کے ساتھ کامیابی سے اسٹائل کیا گیا ہے۔
ہم نے CSS @font-face اصول استعمال کرنے کا طریقہ فراہم کیا ہے۔
نتیجہ
فونٹ کی طرزیں کسی بھی ایپلیکیشن کو جمالیاتی طور پر دلکش بنانے میں اہم کردار ادا کرتی ہیں۔ ہمارے سسٹم میں فونٹ کے محدود انداز ہیں، جبکہ ایک ڈویلپر کو اپنی ویب ایپس میں خوبصورتی شامل کرنے کے لیے مختلف فونٹس کی ضرورت ہوتی ہے۔ ایسا کرنے کے لیے، CSS ہمیں اپنی مرضی کے فونٹس کو شامل کرنے کے لیے @font-face اصول استعمال کرنے کی اجازت دیتا ہے۔ اس مضمون نے @font-face اصول کا مظاہرہ کیا ہے جس کے ذریعے آپ ہماری درخواست میں فونٹ کے انداز کو اپنی مرضی کے مطابق بنا سکتے ہیں۔