CSS ਫ਼ੰਟ

ਤੁਹਾਡੇ ਵੈੱਬਸਾਈਟ ਲਈ ਸਹੀ ਫੰਟ ਚੁਣਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ!

ਫੰਟ ਚੁਣਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ

ਸਹੀ ਫੰਟ ਚੁਣਨਾ ਵੈੱਬਸਾਈਟ ਦੇ ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਐਂਸ ਨੂੰ ਬਹੁਤ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ。

ਸਹੀ ਫੰਟ ਤੁਹਾਡੇ ਬ੍ਰਾਂਡ ਨੂੰ ਮਜ਼ਬੂਤ ਛਾਪ ਦਿੰਦੀ ਹੈ。

ਪੜ੍ਹਣ ਯੋਗ ਫੰਟ ਚੁਣਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਫੰਟ ਤੁਹਾਡੇ ਟੈਕਸਟ ਨੂੰ ਮੁੱਲ ਵਧਾਉਂਦਾ ਹੈ। ਫੰਟ ਦੇ ਸਹੀ ਰੰਗ ਅਤੇ ਟੈਕਸਟ ਦਰਜੇ ਦੀ ਚੋਣ ਵੀ ਮਹੱਤਵਪੂਰਨ ਹੈ。

ਆਮ ਫੰਟ ਪਰਿਵਾਰ

CSS ਵਿੱਚ ਪੰਜ ਆਮ ਫੰਟ ਪਰਿਵਾਰ ਹਨ:

  • ਸਰਲੀਨ ਫੰਟ (Serif) - ਹਰੇਕ ਅੱਖਰ ਦੇ ਬਾਹਰੀ ਕਿਨਾਰੇ 'ਤੇ ਛੋਟੀ ਲਿਖਤ ਹੁੰਦੀ ਹੈ। ਉਹ ਰੂਪ ਅਤੇ ਸੁੰਦਰਤਾ ਦਾ ਅਨੁਭਵ ਦਿੰਦੇ ਹਨ。
  • ਨਾ-ਸਰਲੀਨ ਫੰਟ (Sans-serif) - ਫੰਟ ਦੀਆਂ ਲਾਈਨਾਂ ਸਰਲ (ਛੋਟੇ ਬਿੰਦੂ ਨਹੀਂ ਹਨ)। ਉਹ ਆਧੁਨਿਕ ਅਤੇ ਸਰਲ ਦਿਸ਼ਾ ਬਣਾਉਂਦੇ ਹਨ。
  • ਸਮਾਨ ਖਾਕੇ ਫੰਟ (Monospace) - ਇੱਥੇ ਸਾਰੇ ਅੱਖਰ ਇੱਕ ਸਮਾਨ ਸਥਿਰ ਚੌਡਾਈ ਰੱਖਦੇ ਹਨ। ਉਹ ਮਸ਼ੀਨੀ ਦਿਸ਼ਾ ਬਣਾਉਂਦੇ ਹਨ。
  • ਗੋਥਿਕ ਫੰਟ (Cursive) - ਮਨੁੱਖੀ ਲਿਖਤ ਦਾ ਅਨੁਕਰਣ ਕਰਦਾ ਹੈ。
  • ਫਾਂਟੇਸੀ ਫੰਟ (Fantasy) - ਇੱਕ ਸਜਾਇਬ / ਮਜ਼ੇਦਾਰ ਫੰਟ ਹੈ。

ਸਾਰੇ ਵੱਖ-ਵੱਖ ਫੰਟ ਨਾਮ ਇਨ੍ਹਾਂ ਪੰਜ ਆਮ ਫੰਟ ਪਰਿਵਾਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹਨ。

ਸਰਲੀਨ ਅਤੇ ਨਾ-ਸਰਲੀਨ ਫੰਟਾਂ ਦਰਮਿਆਨ ਅੰਤਰ

ਸੈਰੀਫ ਵਿਰੁੱਧ ਸੈਂਸ ਸੈਰੀਫ

ਸੁਝਾਅ:ਕੰਪਿਊਟਰ ਸਕਰੀਨ 'ਤੇ, ਸਾਨੂੰ ਨਾ-ਸਰਲੀਨ ਫੰਟ ਨੂੰ ਸਰਲੀਨ ਫੰਟ ਤੋਂ ਅਧਿਕ ਪੜ੍ਹਣ ਯੋਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ。

ਕੁਝ ਫੰਟਾਂ ਦੇ ਉਦਾਹਰਣ

ਆਮ ਫੰਟ ਪਰਿਵਾਰ ਫੰਟ ਨਾਮ ਉਦਾਹਰਣ
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

CSS font-family ਪ੍ਰਤੀਯੋਗੀ

CSS ਵਿੱਚ ਅਸੀਂ font-family ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਟੈਕਸਟ ਦੇ ਫੰਟ ਵਜੋਂ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਾਂ。

font-family ਪ੍ਰਤੀਯੋਗੀ ਅਤੇ ਓਪ੍ਰੇਸ਼ਨ ਦਰਮਿਆਨ ਵੱਧ ਤੋਂ ਵੱਧ ਸਮਾਯੋਜਨਤਾ ਸੁਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਕਈ ਫੰਟ ਨਾਮ ਨੂੰ ਸਿਸਟਮ ਦੇ ਪ੍ਰਤੀਯੋਗੀ ਵਜੋਂ ਸ਼ਾਮਲ ਕਰੋ। ਤੁਸੀਂ ਜਿਸ ਫੰਟ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਉਸ ਤੋਂ ਸ਼ੁਰੂ ਕਰੋ ਅਤੇ ਆਮ ਕ੍ਰਮ ਦੇ ਸ਼੍ਰੇਣੀ ਨਾਲ ਸਮਾਪਤ ਕਰੋ (ਜੇਕਰ ਕੋਈ ਹੋਰ ਫੰਟ ਉਪਲੱਬਧ ਨਹੀਂ ਹੈ ਤਾਂ ਬਰਾਉਜ਼ਰ ਆਮ ਕ੍ਰਮ ਦੇ ਸ਼੍ਰੇਣੀ ਵਿੱਚ ਸਮਾਨ ਫੰਟ ਚੁਣੇ)। ਫੰਟ ਨਾਮ ਕੋਮਾ ਨਾਲ ਵੰਡੇ ਹੋਣ ਚਾਹੀਦੇ ਹਨ。

ਟਿੱਪਣੀ:ਜੇਕਰ ਫੰਟ ਨਾਮ ਇੱਕ ਸਿੱਧੇ ਸ਼ਬਦ ਨਹੀਂ ਹੈ ਤਾਂ ਉਸ ਨੂੰ ਕੋਟਿੰਗ ਵਿੱਚ ਲਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ, ਉਦਾਹਰਣ: "Times New Roman"。

ਉਦਾਹਰਣ

ਤਿੰਨ ਪੈਰਾਗ੍ਰਾਫਾਂ ਲਈ ਵੱਖ-ਵੱਖ ਫੰਟ ਨਿਰਧਾਰਿਤ ਕਰੋ:

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ