CSS @font-face قوانین

  • ਪਿਛਲਾ ਪੰਨਾ
  • ਅਗਲਾ ਪੰਨਾ

تعریف اور استعمال

@font-face قوانین کے استعمال سے، ویب ڈیزائنر کا استعمال کسی 'سیبر سیکورٹی' فونٹ کا استعمال نہیں کرنا پڑتا

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

تذکرہ:فونٹ کی URL کو چھوٹی حروف کے ساتھ لکھی جانی چاہئے۔ بڑی حروف کا استعمال آئی ای کا سائیبر سیکورٹی فونٹ کا استعمال کریں گے!

اگر آپ کا فونٹ کا استعمال HTML عناصر پر کریں تو فونٹ کا نام (myFirstFont) کے ذریعے font-family پر رجوع کریں:

div {
  font-family: myFirstFont;
}

ایک بار دیکھیئے:

CSS تعلیم:CSS Web ਫ਼ੰਡ

ਉਦਾਹਰਣ

ایک نام 'myFirstFont' والا فونٹ نامزد کریں اور اس کی URL کا تعین کریں:

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

ਆਪਣੇ ਅਨੁਭਵ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

تی ایچ آئی یو کے نیچے مزید مثال تلاش کریں

CSS گرامر

@font-face {
  font-properties
}
فونٹ کا وصف مقادیر وصف
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" ਹੈ。

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ

ਤੁਹਾਨੂੰ ਇੱਕ ਹੋਰ @font-face ਰੂਲ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਬੋਲਡ ਟੈਕਸਟ ਦੀ ਵਰਣਨਾ ਹੋਵੇ:

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

ਆਪਣੇ ਅਨੁਭਵ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

ਫਾਇਲ "sansation_bold.woff" ਹੋਰ ਇੱਕ ਫਾਂਟ ਫਾਇਲ ਹੈ, ਜਿਸ ਵਿੱਚ Sansation ਫਾਂਟ ਦੇ ਬੋਲਡ ਅੱਖਰ ਹਨ。

ਜਦੋਂ ਫੋਂਟ ਫੈਮਿਲੀ "myFirstFont" ਦੇ ਇੱਕ ਪ੍ਰਕਾਰ ਦੇ ਪਾਠ ਨੂੰ ਬੋਲਡ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਹੈ, ਤਾਂ ਬਰਾਉਜ਼ਰ ਇਸ ਨੂੰ ਵਰਤੇਗਾ。

ਇਸ ਤਰ੍ਹਾਂ, ਤੁਸੀਂ ਇੱਕ ਹੀ ਫਾਂਟ ਨੂੰ ਕਈ @font-face ਰੂਲਾਂ ਵਿੱਚ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ।

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

Internet Explorer, Firefox, Opera, Chrome ਅਤੇ Safari ਸਾਰੇ @font-face ਰੂਲ ਦੀ ਸਮਰਥਨ ਕਰਦੇ ਹਨ.

ਸਪਸ਼ਟੀਕਰਨ ਤੇਲਿਆ ਸਪਸ਼ਟੀਕਰਨ ਫਾਂਟ ਫਾਰਮੈਟ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਖਿਆ ਨੂੰ ਦਿਖਾਇਆ ਗਿਆ ਹੈ.

ਫਾਂਟ ਫਾਰਮੈਟ
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 ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਸਮਰਥਨ ਨਹੀਂ ਹੈ

* Edge ਅਤੇ IE: ਫਾਂਟ ਫਾਰਮੈਟ ਮਾਤਰ "installable" ਵਿੱਚ ਸੈਟ ਕੀਤੇ ਹੋਏ ਹੀ ਪ੍ਰਭਾਵੀ ਹੈ

* Firefox: ਮੂਲ ਰੂਪ ਵਿੱਚ ਨਾਬਾਲਗ ਹੈ, ਪਰ ਸਕਰੀਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (WOFF2 ਦੀ ਵਰਤੋਂ ਲਈ flag ਨੂੰ "true" ਸੈਟ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ).

  • ਪਿਛਲਾ ਪੰਨਾ
  • ਅਗਲਾ ਪੰਨਾ