متغیر فونٹ استعمال کرنے کے لئے 4 اقدامات

Sep 11, 2025
کيسے
Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.
(تصویری کریڈٹ: مستقبل)

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

ایک مثال کے طور پر ماخذ سینسر پرو کا استعمال کرتے ہوئے، فونٹ کے متغیر ورژن تقریبا 394 کلو میٹر اور وسیع پیمانے پر وزن میں آتا ہے. اگر ہم ان فونٹ وزن انفرادی طور پر معیاری فونٹ فائلوں کے طور پر استعمال کرتے ہیں، تو وہ اوسط، 234 کلو گرام ہر ایک کے نتیجے میں تقریبا 1856 کلو گرام کے ایک مشترکہ فائل کے سائز میں ہیں. یقینا، اس حساب سے یہ فرض ہوتا ہے کہ تمام فونٹ وزن انفرادی طور پر ایک معیاری فونٹ کے طور پر موجود ہیں، جو وہ نہیں کرتے ہیں. (اگرچہ آپ صرف باقاعدگی سے فونٹ تلاش کر رہے ہیں، تو ہماری پوسٹ کو چیک کریں بہترین فانٹ دستیاب.)

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

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font.

فونٹ ماخذ سینز پرو کے معیاری اور متغیر ورژن کے درمیان فونٹ وزن کی ایک حد کے فائل کے سائز کے مقابلے میں ایک موازنہ (تصویری کریڈٹ: منڈی مائیکل)

متغیر فونٹ ایک محور کے ساتھ ماسٹر مختلف حالتوں میں مداخلت کرتے ہوئے کام کرتے ہیں، بنیادی طور پر نئے پوائنٹس کے درمیان درمیان میں تعمیر کرتے ہیں. اس کا مطلب یہ ہے کہ آپ کسی بھی بڑی تعداد میں شیلیوں اور مختلف حالتوں کی پیشکش کرنے والے محور کے ساتھ خود مختار پوائنٹس پر فونٹ وزن قائم کرسکتے ہیں. اس کے علاوہ، یہ ہے کیونکہ متغیر فونٹ مداخلت کی جاسکتی ہے کہ ہم ہر متغیر کے درمیان متحرک کرنے کے قابل ہیں، ہموار ٹرانزیشن کو ایک جرات مندانہ وزن میں ایک پتلی وزن سے کہہ سکتے ہیں - جو کچھ ہم نے پہلے کبھی بھی کامیاب نہیں کیا

متغیر فونٹ بھی زیادہ دلچسپ بناتا ہے کہ ڈیزائنرز صرف ایک محور سے محدود نہیں ہیں. متغیر فونٹ مختلف قسم کے مختلف شیلیوں کی نمائندگی کرنے والے بہت سے مختلف محور پر مشتمل ہوسکتے ہیں. اس میں کنسرسی، اٹلی، نظری سائز یا دیگر زیادہ تخلیقی یا اپنی مرضی کے اختیارات شامل ہوسکتے ہیں.

نئی ویب سائٹ پر اپنے فونٹ رکھنا چاہتے ہیں؟ ویب ڈیزائن وسائل کے لئے، ہمارے سب سے بہترین پر سر ویب سائٹ بلڈر راؤنڈ اپ اور سب سے اوپر کا انتخاب ویب میزبانی خدمات یا اسٹوریج اپ گریڈ کے لئے، ان کو چیک کریں کلاؤڈ اسٹوریج اختیارات.

01. متغیر فونٹ میں محور سمجھتے ہیں

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right.

وزن اور چوڑائی محور میں متغیر فونٹ کی مداخلت کو دیکھ کر حسب ضرورت کی حد سے پتہ چلتا ہے کہ دستیاب ہے (تصویری کریڈٹ: منڈی مائیکل)

ہمارے سی ایس ایس میں متغیر فونٹ کا استعمال کرتے ہوئے بہت اسی طرح ہے کہ ہم عام طور پر ویب پر فونٹ استعمال کریں گے: کا استعمال کرتے ہوئے @ فونٹ-چہرے پر حکمرانی . تاہم، ہم سب سے پہلے ایک متغیر فونٹ کے اندر مختلف قسم کے محور کو سمجھنے کی ضرورت ہے کیونکہ اس بات کا تعین کرتا ہے کہ جس میں ہم سی ایس ایس کی خصوصیات استعمال کرتے ہیں.

متغیر فونٹ میں دو قسم کے محور ہیں: ایک رجسٹرڈ محور اور ایک اپنی مرضی کے محور. ایک رجسٹرڈ محور ایک محور سے مراد ہے جو کافی عام ہے کہ یہ معیاری قابل قدر تھا. فی الحال پانچ رجسٹرڈ محور ہیں؛ وزن، چوڑائی، سلیٹ، اٹلی اور آپٹیکل سائز اور یہ اکثر موجودہ سی ایس ایس کی خصوصیات، جیسے فونٹ وزن میں نقشہ لگایا جاتا ہے.

اپنی مرضی کے مطابق محور typeface ڈیزائنرز کی طرف سے وضاحت کی جاتی ہیں، کسی بھی قسم کی تبدیلی ہوسکتی ہے اور صرف فونٹ فائل کے اندر چار خط کی شناخت کی ضرورت ہوتی ہے، جو سی ایس ایس میں حوالہ دیا جاسکتا ہے.

02. رجسٹرڈ محور کا استعمال کریں

A range of variable font weights along an axis from light (200) to black (900).

وزن مختلف حالتوں کو ایک محور پر، روشنی (200) سے سیاہ (900) سے بیان کیا جاتا ہے. (تصویری کریڈٹ: منڈی مائیکل)

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

ہم اس کا استعمال کرتے ہوئے اپنے فونٹ قائم کرسکتے ہیں @ فونٹ-چہرے پر حکمرانی جیسا کہ ہم عام طور پر کریں گے؛ تبدیلی یہ ہے کہ ہم کس طرح متنوع، فونٹ-مسلسل اور فونٹ سٹائل کی طرح تشریحات کے لئے مختلف حالتوں کی وضاحت کرتے ہیں. پہلے ہم نے 200 کا فونٹ وزن مقرر کیا اور اس نے فونٹ کے لائٹ ورژن کے طور پر بیان کیا تھا، پھر ہم نے بولڈ ورژن اور باقاعدگی سے ورژن کے لئے ایک اور فونٹ چہرہ بلاک قائم کیا جب تک کہ ہم سب وزن کے لئے ضروری تھے ڈیزائن. متغیر فونٹ کے ساتھ، ہم صرف ایک فونٹ چہرہ بلاک کی ضرورت ہے. لہذا ایک سے زیادہ مثال کے طور پر استعمال کرنے کے بجائے، ہم ایک قسم کی اقدار کی وضاحت کرتے ہیں جو کم از کم اور زیادہ سے زیادہ اقدار کے مطابق ہیں جو فونٹ محور پر بیان کی جاتی ہیں. 

 @ فونٹ چہرہ {
فونٹ-خاندان: "ماخذ سینس متغیر"؛
SRC: URL ("ماخذ-سینن-متغیر. woff") فارمیٹ ("woff-vortiations")؛
فونٹ وزن: 200 700؛
}

اس مثال میں، ہم 200 سے 700 کے فونٹ وزن قائم کرتے ہیں. ایک بار جب ہماری رینج کی وضاحت کی جاتی ہے تو، ہم اس رینج کے اندر اندر کسی بھی نمبر کو منتخب کرسکتے ہیں، مثال کے طور پر 658. اہم بات یہ ہے کہ اگر آپ اپنے فونٹ وزن کی حد 200 سے 700 تک مقرر کرتے ہیں اور پھر 900 کے وزن کی وضاحت کرنے کی کوشش کریں، یہاں تک کہ اگر فونٹ اس کے محور میں 900 وزن کی وضاحت نہیں کرے تو آپ اسے استعمال نہیں کر سکیں گے. رینج آپ کے سی ایس ایس میں تک رسائی حاصل کرنے کی وضاحت کرتا ہے.

03. اپنی مرضی کے مطابق محور قائم کریں

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

 H1 {
فونٹ-خاندان: 'میرا متغیر فونٹ'؛
فونٹ مختلف حالتوں کی ترتیبات: 'WHTT' 375، 'انلی' 88؛
}

مثال کے طور پر، WhTT وزن کے رجسٹرڈ محور سے مراد ہے اور انلی ان لائن کے نام سے ایک اپنی مرضی کے مطابق محور سے مراد ہے، ہر ایک متغیر کی محور کے ساتھ ایک نقطہ نظر کے مطابق ایک منسلک تعداد کے ساتھ. جب آپ فونٹ مختلف حالتوں کی ترتیبات کے لئے ایک قدر کے طور پر رجسٹرڈ محور کا حوالہ دیتے ہیں تو، اس کی سفارش کی جاتی ہے کہ آپ اس کے بجائے ان کے نقشے سی ایس ایس کی خصوصیات کا استعمال کریں.

پرانے براؤزرز میں حمایت کو یقینی بنانے کے لئے، ہم سی ایس ایس کی خصوصیت کا پتہ لگانے کے استعمال کے ذریعہ غیر معاون براؤزرز کے لئے fallback فونٹ استعمال کرسکتے ہیں. 

 H1 {
  فونٹ-خاندان: "ماخذ سینس"، سینس سیرف؛
  فونٹ وزن: 700؛
}

Supports (فونٹ مختلف حالتوں کی ترتیبات: عمومی) {
H1 {
 فونٹ-خاندان: "ڈیووور"؛
 فونٹ مختلف حالتوں کی ترتیبات: "انلی" 88؛
 }
}

فونٹ مختلف حالتوں کی ترتیبات کی جانچ پڑتال کی طرف سے، ہم سی ایس ایس بلاک کی حمایت کے اندر ہمارے متغیر فونٹ شیلیوں میں شامل کر سکتے ہیں، اس بات کو یقینی بناتے ہیں کہ وہ صرف براؤزرز میں استعمال کیے جائیں گے جو متغیر فونٹ کی حمایت کرسکتے ہیں.

04. جاوا اسکرپٹ اور متغیر فونٹ کو یکجا

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts.

متغیر فونٹ سے ہموار ٹرانزیشن کو فعال کریں، کہو، ایک جرات مندانہ وزن میں پتلی؛ یہ آپ کو جاوا اسکرپٹ متغیر کا استعمال کرتے ہوئے ہموار تبدیلیوں کو تخلیق کرنے کی اجازت دیتا ہے (تصویری کریڈٹ: منڈی مائیکل)

ہم حالات کے لئے جاوا اسکرپٹ کے واقعات کا استعمال کرسکتے ہیں جہاں ہم زیادہ ٹھیک طے شدہ کنٹرول چاہتے ہیں یا اس واقعات پر مبنی فونٹ کو تبدیل کرنے کے لئے جو ہم صرف سی ایس ایس کے ساتھ رسائی نہیں کرسکتے ہیں. ایک سادہ مثال ہمارے فونٹ کے وزن کے سائز میں ہمارے فونٹ وزن سے مل کر مل جائے گا - جیسا کہ Viewport چھوٹا ہو جاتا ہے، فونٹ وزن بھاری ہو جاتا ہے.

سیال پیمانے پر پیدا کرنے کے لئے، ہمیں دو سیٹ اقدار اور یونٹس کو سیدھا کرنا ضروری ہے - فونٹ وزن اور Viewport سائز. ہم ونڈوز کا استعمال کرتے ہوئے موجودہ Viewport چوڑائی تک رسائی حاصل کرسکتے ہیں اور 0-0.99 کی ایک حد میں تبدیل کرکے ایک نیا فیصد پر مبنی پیمانے بنا سکتے ہیں. کم از کم اور زیادہ سے زیادہ Viewport سائز سمیت ہم اثر کی حد کو کنٹرول کر سکتے ہیں. 

 وار Viewportscale =.
(ونڈو. annerwidth - minwindowsize) / (maxwindowsize - minwindowsize)؛

پھر ہم اپنے Viewport سائز پر مبنی فونٹ وزن کا تعین کرتے ہیں. 

 var fonteweightscale = viewportscale * (Minfontweight - Maxfontweight) + Maxfontweight؛

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

 p.Sylele.SetProperty ("وزن"، FonteWightscale)؛

جب یہ ایک فنکشن میں مشترکہ ہے اور سائز کے ایونٹ سننے والے سے منسلک ہوتا ہے، تو ہم ونڈو کے نئے سائز پر مبنی فونٹ وزن کو اپ ڈیٹ کرسکتے ہیں.

اس بنیادی نقطہ نظر کے ساتھ، ہم اپنے نوع ٹائپ کے تمام واقعات اور تجربات کی بنیاد پر ترمیم کرسکتے ہیں. جہاں Viewport وسیع ہے ہم زیادہ تفصیل کر سکتے ہیں؛ اس کے برعکس، جب یہ چھوٹا ہے اور زیادہ محدود جگہ میں، ہم فونٹ کی چوڑائی کو کم کرنے یا وزن میں اضافہ کر سکتے ہیں، ہماری مواد اور نوع ٹائپ کی شفاعت، استعمالی اور ڈیزائن کے لحاظ سے بہتر کنٹرول فراہم کرتے ہیں.

تم کر سکتے ہو کوڈ دیکھیں اس کے لئے کوڈڈین پر.

یہ مضمون اصل میں مسئلہ 318 میں شائع کیا گیا تھا نیٹ ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کی بہترین فروخت میگزین. یہاں نیٹ ورک سبسکرائب کریں .

سی ایس ایس پیدا میں متغیر فونٹ کے بارے میں مزید دریافت کریں

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September.

(تصویری کریڈٹ: گیٹی / بینکا برننگ / مستقبل)

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

اگر آپ اس اور دیگر عظیم مذاکرات کو پکڑنا چاہتے ہیں تو، اب آپ کے ٹکٹوں کو اپنانے کے قابل ہے. اگر آپ 15 اگست کو 5 بجے UTC کی طرف سے آپ کو پکڑ لیا تو، آپ £ 50 بچا سکتے ہیں، صرف £ 199 + VAT ادا کر سکتے ہیں. اب آپ کی ٹکٹ خریدیں !

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

  • 3 طریقوں کی قسم بدل رہی ہے
  • سی ایس ایس میں متغیر فونٹ کے ساتھ شروع کریں
  • متغیر فونٹ کے ساتھ اپنی قسم آن لائن کو تبدیل کریں

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

Instagram پر کیسے رپوٹ

کيسے Sep 11, 2025

(تصویری کریڈٹ: Repost: Instagram کے لئے) اگر آپ Instagram پر دوبارہ دیکھنا چاہ�..

ونڈوز، میکوس اور لوڈ، اتارنا Android کے لئے ویب اطلاعات کو کیسے بند کرنا

کيسے Sep 11, 2025

(تصویری کریڈٹ: مستقبل) اگر آپ باقاعدگی سے ویب صارف ہیں، تو آپ کو ک�..

ورڈپریس کے ساتھ ایک کلائنٹ پورٹل کی تعمیر

کيسے Sep 11, 2025

(تصویری کریڈٹ: ویب ڈیزائنر) ایسے علاقے میں جو صارفین کو لاگ ان کرن..

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

کيسے Sep 11, 2025

یہ صرف کل کی طرح محسوس ہوتا ہے جب میں ہائی اسکول کے دوستوں کے ساتھ کردار ادا کرتا تھا جو تصورات، جادوگروں، ..

گوگل کے ویب اوزار کے لئے ایک گائیڈ

کيسے Sep 11, 2025

صفحہ 1 کا 5: ایچ ٹی ایم ایل، سی ایس ایس اور AMP دیکھیں اور تبد..

14 زبرش کام فلو تجاویز

کيسے Sep 11, 2025

تمام فنکاروں کو زبرش میں 3D آرٹ بنانے کے بعد ان کے اپنے منفرد کام کا بہاؤ ..

سی ایس ایس متغیرات کے ساتھ سائٹ تھیم قائم کرنے کے لئے کس طرح

کيسے Sep 11, 2025

سی ایس ایس اپنی مرضی کے مطابق خصوصیات، عام طور پر سی ایس ایس متغیر کے طو�..

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

کيسے Sep 11, 2025

برسٹول کے عظیم مشرقی بھاپ شپ شپ کی یہ تصویر برسٹول میں نئے £ 7 ملین میوزی..

اقسام