CSS ਵੈੱਬ ਫੰਟ

CSS @font-face ਰੂਲ

ਵੈੱਬ ਫੰਟ ਵੈਬ ਡਿਜ਼ਾਇਨਰਾਂ ਨੂੰ ਉਪਭੋਗਤਾ ਦੇ ਕੰਪਿਊਟਰ 'ਤੇ ਇੰਸਟਾਲ ਨਹੀਂ ਕੀਤੇ ਗਏ ਫੰਟ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਅਨੁਮਤੀ ਦਿੰਦਾ ਹੈ。

ਜਦੋਂ ਤੁਸੀਂ ਵਰਤਣ ਲਈ ਚਾਹੁੰਦੇ ਫੰਟ ਨੂੰ ਮਿਲਿਆ/ਖਰੀਦਿਆ ਤਾਂ ਫਿਰ ਤੁਸੀਂ ਫੰਟ ਫਾਈਲ ਨੂੰ ਤੁਹਾਡੇ ਵੈੱਬ ਸਰਵਰ 'ਤੇ ਸ਼ਾਮਲ ਕਰ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜਿਸ ਦੀ ਮੰਗ ਹੋਵੇ ਤਾਂ ਉਹ ਖ਼ੁਦ ਖ਼ਰਾਬੇ ਉੱਤੇ ਉਪਭੋਗਤਾ ਨੂੰ ਡਾਊਨਲਾਡ ਕਰ ਦਿੰਦੀ ਹੈ。

ਤੁਹਾਡੇ 'ਆਪਣੇ' ਫੰਟ CSS ਵਿੱਚ @font-face ਨਿਯਮਾਂ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਹੈ।

ਵੱਖ-ਵੱਖ ਫੰਟ ਫਾਰਮੈਟ

TrueType ਫੰਟ (TTF)

TrueType 1980 ਦੇ ਦਹਾਕੇ ਦੇ ਅੰਤ ਵਿੱਚ Apple ਅਤੇ Microsoft ਦੁਆਰਾ ਵਿਕਸਤ ਕੀਤਾ ਗਿਆ ਫੰਟ ਸਟੈਂਡਰਡ ਹੈ। TrueType ਮੈਕ OS ਅਤੇ Microsoft Windows ਓਪੇਰੇਟਿੰਗ ਸਿਸਟਮਾਂ ਦਾ ਸਭ ਤੋਂ ਆਮ ਫੰਟ ਫਾਰਮੈਟ ਹੈ。

OpenType ਫੰਟ (OTF)

OpenType ਸਾਈਜ਼ਾਬਦਿਤ ਕੰਪਿਊਟਰ ਫੰਟ ਦਾ ਫਾਰਮੈਟ ਹੈ। ਇਹ TrueType 'ਤੇ ਅਧਾਰਤ ਹੈ ਅਤੇ Microsoft ਦੀ ਰਜਿਸਟਰਡ ਟ੍ਰੇਡਮਾਰਕ ਹੈ। ਅੱਜ, OpenType ਫੰਟ ਪ੍ਰਮੁੱਖ ਕੰਪਿਊਟਰ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ ਹਨ。

ਵੈੱਬ ਓਪਨ ਫੰਟ ਫਾਰਮੈਟ (WOFF)

WOFF ਵੈੱਬ ਲਈ ਫੰਟ ਫਾਰਮੈਟ ਹੈ। ਇਹ 2009 ਵਿੱਚ ਵਿਕਸਤ ਕੀਤਾ ਗਿਆ ਸੀ ਅਤੇ ਹੁਣ ਇਹ W3C ਦੀ ਸਿਫਾਰਸ਼ ਸਟੈਂਡਰਡ ਬਣ ਚੁੱਕਾ ਹੈ। WOFF ਮੂਲ ਰੂਪ ਵਿੱਚ OpenType ਜਾਂ TrueType ਦਾ ਕੰਪ੍ਰੈਸਡ ਅਤੇ ਮੇਟਾ ਡਾਟਾ ਵਾਲਾ ਫੰਟ ਹੈ। ਟੀਚਾ ਹੈ ਕਿ ਬੈਂਡਵਿਡਥ ਸੀਮਤ ਨੈੱਟਵਰਕ 'ਤੇ ਸਰਵਰ ਤੋਂ ਕਲਾਉਂਟ ਤੱਕ ਫੰਟ ਵੰਡਣ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣਾ。

ਵੈੱਬ ਓਪਨ ਫੰਟ ਫਾਰਮੈਟ (WOFF 2.0)

TrueType/OpenType ਫੰਟ WOFF 1.0 ਨਾਲ ਬਿਹਤਰ ਕੰਪ੍ਰੈਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ。

SVG ਫੰਟ/ਸ਼ਰੂਟ

SVG ਫੰਟ ਸਮੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਟੈਕਸਟ ਵਿੱਚ SVG ਨੂੰ ਅਕਸ਼ਰ ਵਜੋਂ ਵਰਤਣ ਦੀ ਅਨੁਮਤੀ ਦਿੰਦਾ ਹੈ। SVG 1.1 ਸਟੈਂਡਰਡ ਵਿੱਚ ਇੱਕ ਫੰਟ ਮੌਡਿਊਲ ਦਾ ਪਤਾ ਲਗਾਇਆ ਗਿਆ ਹੈ ਜਿਸ ਦੀ ਮਦਦ ਨਾਲ SVG ਡਾਕੂਮੈਂਟ ਵਿੱਚ ਫੰਟ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। ਤੁਸੀਂ ਵੀ SVG ਡਾਕੂਮੈਂਟ ਉੱਤੇ CSS ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ @font-face ਰੂਲ ਵੀ SVG ਡਾਕੂਮੈਂਟ ਵਿੱਚ ਟੈਕਸਟ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

嵌入式 OpenType ਫੰਟ (EOT)

EOT فونٹ، میکروسافٹ کی ڈیزائن کردہ اوپن ٹائپ فونٹ کی ایک کانپرس کی شکل ہے، جو ویب پیج پر داخل کردہ فونٹ کے طور پر استعمال کی جاتی ہے

فونٹ فارمٹ کا براؤزر کی پشتیبندگی

جداول میں دیئے گئے اعداد، اس فونٹ فارمٹ کا پورا پشتیبندگی کا پہلا براؤزر ورژن کا نشان دہی کرتے ہیں

فونٹ فارمٹ
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG نہیں پشتیبند نہیں پشتیبند نہیں پشتیبند 3.2 نہیں پشتیبند
EOT 6.0 نہیں پشتیبند نہیں پشتیبند نہیں پشتیبند نہیں پشتیبند

*IE:فونٹ فارمٹ صرف 'installable' کے طور پر استعمال کیا جاسکتا ہے

*Firefox:دفعتی طور پر نہیں پشتیبند، لیکن چلانے کے لئے فعال کیاجاسکتا ہے (WOFF2 کا استعمال کریں تو علامت کو 'true' رکھنا پڑے گا)

آپ کی خواہش کی فونٹ استعمال کریں

@font-face قوانین میں: ابتدا میں فونٹ کا نام (مثلاً myFirstFont) تعریف کریں، بعد میں اس کا فونٹ فائل کا راستہ دکھائیں

نکاتی مشورہ:فونٹ URL کو ہمیشہ چھوٹی حروف کا استعمال کریں، بڑی حروف کا استعمال کیا جانا کسی بھی صورت میں ایک غیر متوقع نتیجہ پیدا کر سکتا ہے

اگر آپ چاہتے ہیں کہ فونٹ کو HTML عناصر پر استعمال کیا جائے، تو فونٹ کا نام (myFirstFont) font-family نمائش کریں

مثال

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}

آپ خود کا ایک تجربہ کریں

بولڈ متن استعمال کریں

آپ کو ایک اور @font-face قوانین کا اضافہ کرنا پڑے گا، جس میں بولڈ متن کا وصف کار شامل ہو:

مثال

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

آپ خود کا ایک تجربہ کریں

فائل 'sansation_bold.woff' ایک اور فونٹ فائل ہے، جس میں Sansation فونٹ کا بولڈ حروف شامل ہیں

جب کسی 'myFirstFont' فونٹ خاندان والی کلمے کو تیرا بولڈ نمودار کرنا چاہئی، تھوڑی بولر استعمال کرے گا

ایسے طریقے سے، آپ کسی ایک فونٹ کے لئے متعدد مقادیر قائم کرسکتے ہیں @font-face قوانین

CSS فونٹ وصف

درجہ بلندی میں، @font-face قوانین میں تعریف کئے فونٹ وصف کار (font descriptor) تمام:

وصف کار مقادیر وصف
font-family name ضروری ہے۔فونٹ کا نام تعریف کرنا
src URL ضروری ہے۔فونٹ فائل کی URL کا تعریف کرنا
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 可选。定义应如何拉伸字体。默认值是 "normal"。
font-style
  • normal
  • italic
  • oblique
 可选。定义字体的样式。默认值是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 可选。定义字体的粗细。默认值是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认值是 "U+0-10FFFF"。