CSS فونت سائز

ਫੰਟ ਆਕਾਰ

font-size ਪ੍ਰਤੀਯੋਗਿਤਾ ਸੈੱਟ ਕਰੋ ਟੈਕਸਟ ਆਕਾਰ

ਵੈੱਬਸਾਈਟ ਡਿਜਾਇਨ ਵਿੱਚ ਟੈਕਸਟ ਆਕਾਰ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਬਹੁਤ ਜ਼ਰੂਰੀ ਹੈ। ਪਰ ਟੈਕਸਟ ਆਕਾਰ ਸੋਧਣ ਨਾਲ ਪੈਰਾਗ੍ਰਾਫਸ ਨੂੰ ਹੈਡਿੰਗ ਵਾਂਗ ਦਿਖਾਉਣ ਜਾਂ ਹੈਡਿੰਗ ਨੂੰ ਪੈਰਾਗ੍ਰਾਫਸ ਵਾਂਗ ਦਿਖਾਉਣ ਨਹੀਂ ਚਾਹੀਦਾ

ਹਮੇਸ਼ਾ ਸਹੀ ਐੱਚਟੀਐੱਮਐੱਲ ਟੈਗ ਵਰਤੋਂ ਕਰੋ ਜਿਵੇਂ ਕਿ <h1> - <h6> ਹੈਡਿੰਗ ਲਈ ਅਤੇ <p> ਪੈਰਾਗ੍ਰਾਫਸ ਲਈ ਹੈ

font-size ਮੁੱਲ ਸਥਾਈ ਜਾਂ ਸਬੰਧਤ ਮਾਪ ਹੋ ਸਕਦੇ ਹਨ

ਸਥਾਈ ਮਾਪ:

  • ਨਿਰਧਾਰਿਤ ਆਕਾਰ ਨਾਲ ਟੈਕਸਟ ਨੂੰ ਸੁਆਦਿਤ ਕਰੋ
  • ਯੂਜ਼ਰ ਨੂੰ ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਟੈਕਸਟ ਆਕਾਰ ਸੋਧਣ ਦੀ ਆਗਿਆ ਨਹੀਂ ਦਿੰਦਾ (ਪਹੁੰਚ ਨਾਲ ਸਮੱਸਿਆ)
  • ਜਦੋਂ ਆਉਟਪੁਟ ਦਾ ਫਿਜੀਕਲ ਆਕਾਰ ਜਾਣਿਆ ਹੋਵੇ ਤਾਂ ਸਥਾਈ ਮਾਪ ਬਹੁਤ ਉਪਯੋਗੀ ਹੁੰਦਾ ਹੈ

ਸਬੰਧਤ ਮਾਪ:

  • ਆਸਪਾਸ ਦੇ ਇਲਾਕੇ ਦੇ ਅਨੁਸਾਰ ਆਕਾਰ ਸੁਆਦਿਤ ਕਰੋ
  • ਯੂਜ਼ਰ ਨੂੰ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਟੈਕਸਟ ਆਕਾਰ ਸੋਧਣ ਦੀ ਆਗਿਆ ਦੇਣ

ਟਿੱਪਣੀ:ਤੁਸੀਂ ਫੰਟ ਆਕਾਰ ਨਾ ਸੁਝਾਏ ਹੋਏ ਤਾਂ ਆਮ ਟੈਕਸਟ (ਜਿਵੇਂ ਕਿ ਪੈਰਾਗ੍ਰਾਫਸ) ਦਾ ਮੂਲ ਆਕਾਰ 16px ਹੈ (16px = 1em)。

ਪਿਕਸਲ ਦੇ ਮਾਪ ਨਾਲ ਫੰਟ ਆਕਾਰ ਸੁਆਦਿਤ ਕਰੋ

ਪਿਕਸਲ ਦੇ ਮਾਪ ਨਾਲ ਟੈਕਸਟ ਆਕਾਰ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਿਯੰਤਰਿਤ ਕਰ ਸਕਦੇ ਹੋ

مثال

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

آپ خود بچارو

ਸੁਝਾਅ:ਤੁਸੀਂ ਪਿਕਸਲ ਦਾ ਇਸਤੇਮਾਲ ਕਰਦੇ ਹੋਏ ਵੀ ਸਾਰੇ ਪੰਨੇ ਦਾ ਆਕਾਰ ਸੋਧਣ ਦੀ ਸਮਰੱਥਾ ਰੱਖਦੇ ਹੋ ਸਕਦੇ ਹੋ

em ਦੇ ਮਾਪ ਨਾਲ ਫੰਟ ਆਕਾਰ ਸੁਆਦਿਤ ਕਰੋ

ਯੂਜ਼ਰ ਨੂੰ ਟੈਕਸਟ ਆਕਾਰ ਸੋਧਣ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ (ਬਰਾਉਜ਼ਰ ਮੇਨੂ ਵਿੱਚ), ਕਈ ਵਿਕਾਸਕਾਰ ਈਮ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਨਾ ਕਿ ਪਿਕਸਲ。

W3C ਨੇ em ਮਾਪ ਇਕਾਈ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਹੈ。

1em ਇਕਾਈ ਮੌਜੂਦਾ ਫੰਟ ਆਕਾਰ ਨੂੰ ਮੁਤਲਬ ਕਰਦੀ ਹੈ। ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਮੂਲ ਟੈਕਸਟ ਆਕਾਰ 16px ਹੈ। ਇਸ ਲਈ ਮੂਲ ਆਕਾਰ 1em 16px ਹੈ。

ਇਸ ਫਾਰਮੂਲੇ ਨਾਲ ਪਿਕਸਲ ਤੋਂ ਈਮ ਵੱਲ ਮਾਪ ਕਰ ਸਕਦੇ ਹਾਂ: pixels/16=em。

مثال

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

آپ خود بچارو

ਉਸ ਉਦਾਹਰਣ ਵਿੱਚ ਈਮ ਇਕਾਈ ਦਾ ਟੈਕਸਟ ਆਕਾਰ ਪਿਛਲੇ ਉਦਾਹਰਣ ਵਿੱਚ ਪਿਕਸਲ ਆਕਾਰ ਨਾਲ ਮੁਤਲਬ ਹੈ। ਪਰ ਈਮ ਮਾਪ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਟੈਕਸਟ ਆਕਾਰ ਸ਼ਾਇਦ ਨਾ ਬਦਲੇ。

ਦੁਖ ਦਾ ਕਾਰਨ ਹੈ ਕਿ ਪੁਰਾਣੇ ਵਰਜਨ ਦਾ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਅਜੇ ਵੀ ਮੁਦਦੇ ਵਿੱਚ ਹੈ। ਟੈਕਸਟ ਵੱਧ ਕਰਨ ਦੇ ਸਮੇਂ ਉਹ ਜ਼ਿਆਦਾ ਵੱਧ ਹੁੰਦਾ ਹੈ ਜਿੰਨਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਘੱਟ ਕਰਨ ਦੇ ਸਮੇਂ ਘੱਟ ਹੁੰਦਾ ਹੈ。

ਪ੍ਰਤੀਸ਼ਤ ਅਤੇ ਈਮ ਦੇ ਮਿਸ਼ਰਣ ਦੀ ਵਰਤੋਂ

مثال

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

آپ خود بچارو

اپنے کد اب چل رہا ہے! وہ تمام براوزروں میں اسی طرح کا متن نمائش کرتا ہے، اور تمام براوزروں کو متن کا حجم بچتا یا تیار کراتا ہے!

ریسپانسوئس فونٹ حجم

اس کا استعمال کرسکتا ہے vw یونٹ نصاب کا حجم، اس کا مطلب 'ویزو چوڑائی' ('viewport width') ہوتا ہے۔

اس طرح، متن کا حجم بروزر وینڈو کا حجم کے مطابق رہتا ہے، لطفاً بروزر وینڈو کا حجم کو تیار کریں تاکہ متن کا حجم کس طرح بچتا جائے دیکھ سکتے ہیں:

مثال

<h1 style="font-size:10vw">Hello World</h1>

آپ خود بچارو

ویزو (Viewport) بروزر وینڈو کا حجم ہوتا ہے۔ 1vw = ویزو کی چوڑائی کا 1％。 اگر ویزو 50 سینٹی میٹر چوڑا ہوا تو 1vw 0.5 سینٹی میٹر ہوتا ہے۔