ویب فانٹ کیسے استعمال کریں

Sep 16, 2025

کيسے

برام سٹین کی ویبفونٹ ہینڈ بک سے مندرجہ ذیل ایک اقتباس ہے. اسے خریدیں .

ویب فانٹ اس کے ذریعے سی ایس ایس میں بیان کیا جاتا ہے @ فونٹ-چہرہ اصول اگر آپ ویب ڈویلپر ہیں تو، آپ کو زیادہ تر ممکنہ طور پر لکھا، کاپی اور پیسٹ کیا ہے، یا کم از کم ایک دیکھا @ فونٹ-چہرہ اصول

مکمل طور پر کے لئے، اگرچہ، فوری طور پر ایک بنیادی مثال کے ذریعے چلتے ہیں:

 @ فونٹ چہرہ {
  فونٹ-خاندان: ایلینا؛
  ایس آر سی: یو آر ایل (ایلینا - باقاعدگی سے.)؛
}

یہ ایک نیا ویب فونٹ خاندان بناتا ہے جو اس کے ذریعے حوالہ دیا جا سکتا ہے فونٹ خاندان یا فونٹ آثار قدیمہ کی جائیداد لیکن یہاں کچھ غائب ہے. جب ایک فونٹ اسٹیک میں ایک ویب فونٹ کا حوالہ دیتے ہوئے، ہمیشہ اس بات کو یقینی بنانا یقینی بنائیں کہ ویب فونٹ لوڈ کرنے میں ناکام ہوجائے.

یہاں، اگر ایلینا لوڈ کرنے میں ناکام ہو تو، براؤزر عام طور پر واپس آ جائے گا سیرف فونٹ خاندان:

 p {
  فونٹ-خاندان: ایلینا، سیرف؛
}

fallback فونٹ کے لئے زیادہ ہے، لیکن اب کے لئے، ہم صرف ہمارے فونٹ اسٹیک کو صرف عام طور پر بھی شامل کرتے ہیں سیرف اور سینز سیرف فونٹ خاندان.

فونٹ خاندان

ایک سے زیادہ شیلیوں کے ساتھ ایک فونٹ خاندان بنانا ایک تخلیق کرکے @ فونٹ-چہرہ ہر سٹائل کے لئے حکمرانی اور اسی کا استعمال کرتے ہوئے فونٹ خاندان نام مندرجہ ذیل @ فونٹ-چہرہ قوانین ایک عام اور جرات مندانہ انداز کے ساتھ ایک خاندان بناتے ہیں:

 @ فونٹ چہرہ {
     فونٹ-خاندان: ایلینا؛
     ایس آر سی: یو آر ایل (ایلینا - باقاعدگی سے.)؛
     فونٹ وزن: عمومی؛
}
   @ فونٹ-چہرہ {
     فونٹ-خاندان: ایلینا؛
     SRC: URL (ایلینا-بولڈ.)؛
     فونٹ وزن: بولڈ؛
}

آپ اپنے CSS میں اس فونٹ کے خاندان کو اپنے منتخب کرنے والوں میں خاندان کے نام اور وزن کا حوالہ دیتے ہوئے اپنے سی ایس ایس میں استعمال کرسکتے ہیں. یہ باقاعدہ انداز پیراگراف اور جرات مندانہ طرز پر لاگو ہوتا ہے مضبوط پیراگراف:

 p {
  فونٹ-خاندان: ایلینا، سیرف؛
}

پی مضبوط {
  فونٹ وزن: بولڈ؛
}

اس کے علاوہ فونٹ وزن ، @ فونٹ-چہرہ بھی قبول کرتا ہے لکھائی کا انداز اور فونٹ مسلسل پراپرٹی کی وضاحت کرنے والے، جو اطالوی اور کنسرسی جیسے شیلیوں کی وضاحت کرتی ہیں. تمام تین جائیداد کی تشریحات ایک سے زیادہ شیلیوں کے ساتھ ایک فونٹ خاندان بنانے کے لئے استعمال کیا جا سکتا ہے. نظریاتی طور پر، اس سے آپ کو ایک خاندان بنانے میں 243 انفرادی شیلیوں (نو فونٹ وزن اقدار × تین لکھائی کا انداز اقدار × نو فونٹ مسلسل اقدار).

عملی طور پر، تاہم، آپ 27 اقدار تک محدود ہیں، کیونکہ کچھ براؤزر کی حمایت نہیں کرتے فونٹ مسلسل . مندرجہ ذیل میز پر ایک نظر ڈالیں کہ آپ کون سا براؤزر استعمال کرسکتے ہیں، اور نظر آتے ہیں یہاں مزید تفصیلی معلومات کے لئے.

Click the icon in the top right to enlarge the image — تصویر کو بڑھانے کے لئے سب سے اوپر دائیں میں آئکن پر کلک کریں

قسمت کے ساتھ، باقی براؤزرز کو لاگو کریں گے فونٹ مسلسل جائیداد جلد ہی، اور آپ کو 243 فونٹ درجہ بندی کا استعمال کرنے کے قابل ہو جائے گا.

فونٹ فارمیٹس

The. SRC. Descriptor ایک براؤزر بتاتا ہے جہاں فونٹ فائل حاصل کرنے کے لئے. پچھلے مثالیں ایک سنگل فونٹ کی شکل کا استعمال کرتے تھے، لیکن آپ اکثر URLs کو فارمیٹ اشارے کے ساتھ مل کر ایک سے زیادہ فونٹ فارمیٹس پر دیکھیں گے، جو URL کے استعمال سے منسلک ہوتے ہیں. شکل ("قیمت") نحو

فارمیٹ اشارے براؤزر کو بتائیں کہ کسی بھی یو آر ایل میں فونٹ فائل کی شکل کیا ہے.

 @ فونٹ چہرہ {
  فونٹ-خاندان: ایلینا؛
  SRC: URL (ایلینا-باقاعدگی سے. woff2) فارمیٹ ("WOFF2")
       یو آر ایل (ایلینا - باقاعدگی سے.) فارمیٹ ("WOFF")؛
}

اگر آپ ایک سے زیادہ فارمیٹس کی فہرست کرتے ہیں تو، جدید براؤزر ان کی پہلی شکل منتخب کریں گے جسے وہ شکل میں اشارہ کرتے ہیں. لہذا، کم از کم کم سے کم کمپریشن کے آرڈر میں ویب فونٹ فارمیٹس کی فہرست ضروری ہے.

اگرچہ فارمیٹ اشارے اختیاری ہیں، ہمیشہ ان میں شامل ہیں - وہ براؤزر کو فونٹ ڈاؤن لوڈ کرنے کی ضرورت کے بغیر فارمیٹ کے بارے میں معلومات کے بارے میں جانتا ہے. مثال کے طور پر، اگر ایک براؤزر WOFF2 کی حمایت نہیں کرتا ہے، لیکن اس کی حمایت کرتا ہے، یہ فارمیٹ اشارہ پر مبنی WOFF2 فونٹ فائل کو چھوڑ سکتا ہے.

براؤزر کئی ویب فونٹ فارمیٹس کی حمایت کرتے ہیں: Opentype (TrueType)، EOT، Woff، اور WOFF2. کچھ براؤزر بھی SVG فونٹ کی حمایت کرتے ہیں، لیکن وہ ضائع کر رہے ہیں اور اب استعمال نہیں کیا جانا چاہئے (اور اس کے ساتھ الجھن نہیں ہونا چاہئے نیا Opentype-SVG فارمیٹ ).

EOT، WOFF، اور WOFF2 تکنیکی طور پر فونٹ فارمیٹس نہیں ہیں. وہ کمپریشن کے مختلف ڈگری کے ساتھ OpenStype فائلوں کو کمپریسڈ ہیں. WOFF2 بہترین کمپریشن پیش کرتا ہے، اس کے بعد WOFF اور EOT.

تمام براؤزرز کے لئے کوریج کی تحقیق میں، آپ کو کچھ کہا جا سکتا ہے بلٹ پروف @ فونٹ-چہرہ نحو فانٹ کی طرف سے.

بلٹ پروف نحو: زیادہ سے زیادہ براؤزر کوریج کے لئے EOT، WOFF2، WOFF، خام Opentype، اور SVG فونٹ فائلوں کا استعمال کرتا ہے:

 @ فونٹ چہرہ {
  فونٹ-خاندان: ایلینا؛
  SRC: URL (elena.eot؟ #iefix) فارمیٹ ("ایمبیڈڈ اوپنٹائپ")،
       URL (elena.woff2) فارمیٹ ("WOFF2")
       URL (elena.woff) فارمیٹ ("Woff")
       URL (elena.otf) فارمیٹ ("opentype")،
       URL (elena.svg # ایلینا) کی شکل ("SVG")؛
}

پہلا URL لائن آپ کو تھوڑا سا عجیب نظر آتا ہے. انٹرنیٹ ایکسپلورر 8 کے ورژن اور ذیل میں ایک سے زیادہ فونٹ فارمیٹس کے لئے نحو کی حمایت نہیں کرتے، اور پوری قیمت کا علاج کرتے ہیں SRC. یو آر ایل کے طور پر جائیداد.

Bulletproof Syntax Tricks انٹرنیٹ ایکسپلورر 8 اور ذیل میں سوچنے کے لئے کہ باقی URLs پہلے یو آر ایل کے ٹکڑے کی شناخت کنندہ کا حصہ ہیں. کیونکہ فائلوں کو ڈاؤن لوڈ کرنے کے بعد فرجنگ کی شناختی کاروائیوں کو نظر انداز کر دیا جاتا ہے، انٹرنیٹ ایکسپلورر 8 اور اس سے نیچے صرف پہلے یو آر ایل کا استعمال کرتے ہیں.

انٹرنیٹ ایکسپلورر کے علاوہ براؤزر لائن کو چھوڑ دیں گے کیونکہ وہ EOT کی حمایت نہیں کرتے ہیں.

باقی اندراج آپ کی توقع کریں گے: ترجیحات کے مطابق درج کردہ فونٹ فارمیٹس.

لیکن بلٹ پروف مطابقت پذیری اب بھی متعلقہ ہے؟ نہیں. حقیقت میں، مجھے لگتا ہے کہ یہ نقصان دہ ہے. SVG فونٹ کو خارج کر دیا جاتا ہے اور صرف براؤزرز کی طرف سے حمایت کی جاتی ہے جو اب استعمال میں نہیں ہیں.

سب سے زیادہ ویب سائٹس انٹرنیٹ ایکسپلورر 9 اور اپ کی حمایت کرتے ہیں، لیکن سب سے پہلے ترجیحی فونٹ کی شکل کے طور پر نحو کی فہرستوں کی فہرست. اگرچہ انٹرنیٹ ایکسپلورر 9 اور اپ سپورٹ وف، ان ورژن اب بھی EOT فائل ڈاؤن لوڈ کریں گے، صرف اس وجہ سے کہ یہ سب سے پہلے درج کی گئی ہے.

کیونکہ زیادہ تر ویب سائٹس اب پرانے براؤزر کی حمایت نہیں کرتے ہیں، میں انتہائی آسان مطابقت پذیری کا استعمال کرتے ہوئے مشورہ دیتا ہوں. یہ آسان مطابقت پذیر تمام جدید براؤزرز، اس کے ساتھ ساتھ تھوڑا سا بوڑھا ہے جو اب بھی فعال استعمال میں ہیں، جیسے لوڈ، اتارنا Android 4.4 اور اس سے پہلے:

 @ فونٹ چہرہ {
  فونٹ-خاندان: ایلینا؛
  SRC: URL (elena.woff2) فارمیٹ ("WOFF2")
       URL (elena.woff) فارمیٹ ("Woff")
       URL (elena.otf) فارمیٹ ("opentype")؛
}

اگرچہ بڑی عمر کے لوڈ، اتارنا Android کے ورژن اب بھی استعمال کیے جاتے ہیں، دنیا بھر میں ان براؤزرز پر انحصار تیزی سے کم ہے. جلد ہی آپ شاید خام OpenStype فارمیٹ کو بھی چھوڑ سکیں گے، اور اس کے علاوہ ہم آہنگی کو بھی آسان بنائے جائیں گے:

 @ فونٹ چہرہ {
  فونٹ-خاندان: ایلینا؛
  SRC: URL (elena.woff2) فارمیٹ ("WOFF2")
       URL (elena.woff) فارمیٹ ("woff")؛
}

اس صورت میں، کسی کو ایک پرانے براؤزر چل رہا ہے صرف ویب فونٹ کے بجائے آپ کے فال بیک فونٹ کو دیکھتا ہے. ٹھیک ہے؛ وہ اب بھی fallback فونٹ میں مواد پڑھ سکتے ہیں.

اس کے لئے ایک اور ممکنہ قدر ہے SRC. Descriptor. The. مقامی فنکشن ایک مقامی فونٹ خاندان کا نام لیتا ہے. اگر فونٹ نظام پر نصب ہوجائے تو، براؤزر اس کے بجائے اس کا استعمال کرے گا، اس طرح اضافی ڈاؤن لوڈ سے بچنے کے لۓ.

 @ فونٹ چہرہ {
  فونٹ-خاندان: ایلینا؛
  SRC: مقامی ("ایلینا")،
       یو آر ایل (ایلینا - باقاعدگی سے. woff2) فارمیٹ ("WOFF2")
       یو آر ایل (ایلینا - باقاعدگی سے.) فارمیٹ ("WOFF")؛
}

جبکہ یہ ایک عظیم اصلاح کی طرح لگتا ہے، کچھ بھی اس بات کی ضمانت دیتا ہے کہ مقامی فونٹ آپ کے ویب فونٹ سے ملتا ہے.

آپ فونٹ کا ایک مختلف ورژن، مختلف زبان کی حمایت کے ساتھ ایک فونٹ، یا یہاں تک کہ ایک مکمل طور پر مختلف فونٹ حاصل کر سکتے ہیں. اس وجہ سے، میں عام طور پر استعمال نہیں کرتے مقامی تقریب تک جب تک آپ ان ڈراپائڈز قابل قبول نہیں ہوتے ہیں.

یہ برم سٹین کی طرف سے ایک اقتباس ہے Webfont ہینڈ بک ، ایک کتاب سے الگ. اس میں، وہ ویب فونٹ کو منتخب کرتے وقت غور کرنے کے بارے میں کیا خیال کرتا ہے، مؤثر طریقے سے استعمال کرنے کے لئے کس طرح، اور کارکردگی کے لئے کس طرح بہتر بنانے کے لئے.

متعلقہ مضامین:

بلاکچین کیا ہے؟
ویب ڈیزائنرز اور ڈیو کے لئے 30 کروم کی توسیع
20 حیرت انگیز مفت گوگل ویب فانٹ

ویب فانٹ کیسے استعمال کریں

فونٹ خاندان

فونٹ فارمیٹس

کيسے - انتہائی مشہور مضامین

Svelte اور Sapper کے ساتھ ایک تیز رفتار رد عمل بلاگ کی تعمیر

Shapr3d کے ساتھ جانے پر کتنی کٹسبش

Get started with Assets in Affinity Designer

سخت سطح ماڈلنگ کے لئے 10 تجاویز

سٹائلڈ گیم آرٹ ورک کیسے بنائیں

تیل میں ایک متحرک سیوسکپ پینٹ

Illustrator میں 3D خط کس طرح بنانے کے لئے

ایک وشد پری رانی کیسے بنانا

اقسام