CSS లో ఫాంట్లను ఉత్తమంగా ఎలా ఉపయోగించాలి?

ఈ వ్యాసం మీకు ఫాంట్స్ ఇన్ అనే సరళమైన ఇంకా ముఖ్యమైన అంశాన్ని పరిచయం చేస్తుంది మరియు ఈ అంశంపై మీకు ఆచరణాత్మక ప్రదర్శనను కూడా ఇస్తుంది. ఈ వ్యాసంలో క్రింది గమనికలు కవర్ చేయబడతాయి,

• CSS లోని ఫాంట్‌లు
• CSS ఫాంట్‌లో గుణాలు
• ఫాంట్-శైలి లక్షణం
• ఫాంట్-బరువు లక్షణం
• ఫాంట్-పరిమాణ లక్షణం
• ఫాంట్-కుటుంబ లక్షణం

వెబ్ సైట్లు చిత్రాలు, ఆడియో, వీడియో మరియు వచన కంటెంట్ రూపంలో కంటెంట్ను కలిగి ఉంటాయి. అయినప్పటికీ, చాలా వెబ్ పేజీలు ఇప్పటికీ టెక్స్ట్‌పై ప్రధాన ఆకృతిపై ఆధారపడతాయి. ఎందుకంటే సాదా వచనం కొన్ని ముఖ్యమైన ప్రయోజనాలను అందిస్తుంది.

చొరబడని రీడబిలిటీ - మీరు కార్యాలయంలో ఉన్నప్పుడు తాజా మ్యాచ్ స్కోర్‌ను తనిఖీ చేయాలనుకుంటున్నారు. స్పష్టంగా మీకు శీఘ్ర వచన నవీకరణ కావాలి, ధ్వనించే వీడియో కాదు!
తక్కువ నెట్‌వర్క్ బ్యాండ్‌విడ్త్ అవసరం - పేలవమైన ఇంటర్నెట్ కనెక్టివిటీ ప్రాంతాలలో కూడా టెక్స్ట్ కంటెంట్‌ను లోడ్ చేయవచ్చు, అయితే గొప్ప మీడియా సాధ్యం కాదు.
స్నేహపూర్వకంగా శోధించండి - సెర్చ్ ఇంజన్లలో వెబ్ సైట్లు వారి కంటెంట్ ఎంత తేలికగా గుర్తించబడుతుందో ఎల్లప్పుడూ గమనించండి. టెక్స్ట్ దీనికి బాగా సరిపోతుంది, కనీసం AI పూర్తిగా ఇంటర్నెట్‌ను తీసుకునే వరకు!

టెక్స్ట్ కంటెంట్‌ను ఫార్మాట్ చేస్తున్నప్పుడు, వెబ్ డిజైనర్లకు పని చేయడానికి కొన్ని పారామితులు మాత్రమే ఉన్నాయి - ఫాంట్, అలైన్‌మెంట్, హైలైటింగ్ మరియు కలర్. మీ టెక్స్ట్ కోసం సరైన ఫాంట్‌ను ఎంచుకోవడం క్లిష్టమైన ఎంపిక. HTML పేజీలలోని టెక్స్ట్ కోసం ఫాంట్లను నిర్వచించడానికి CSS ఫాంట్ ట్యాగ్‌లను ఉపయోగించడం ప్రామాణిక పద్ధతి.
మీరు HTML ప్రోగ్రామింగ్ ప్రపంచానికి కొత్తగా ఉంటే, ఇక్కడ ప్రాథమిక స్టార్టర్ టూర్ పొందండి. CSS ఫాంట్‌ల గురించి తెలుసుకోవడానికి ముందు మీరు CSS ప్రాథమికాలను చదవాలనుకోవచ్చు.

సమగ్ర CSS ట్యుటోరియల్ కోసం, బిగినర్స్ కోసం ఎడురేకా CSS ట్యుటోరియల్‌ను సందర్శించండి. HTML వెబ్ డిజైన్‌ను పెంచడానికి CSS ఉపయోగించాల్సిన మార్గంలో మీరు అద్భుతమైన హెడ్-అప్ పొందుతారు.

CSS లోని ఫాంట్‌లపై ఈ కథనంతో కదులుతోంది

CSS లోని ఫాంట్‌లు

ఫాంట్ ప్రాథమికంగా టెక్స్ట్ యొక్క ప్రదర్శనతో అనుబంధించబడిన లక్షణాల సమితి. ఫాంట్‌లు వాటి పరిమాణం, ఇండెంటేషన్, వెడల్పు, స్లాంట్ మొదలైన వాటి ద్వారా ఒకదానికొకటి వేరు చేయబడతాయి. వేర్వేరు ఫాంట్లలో ప్రాథమిక వచన ప్రదర్శనతో ప్రారంభిద్దాం.

ఉదాహరణ 1: వివిధ ఫాంట్లలో శీర్షికలు మరియు పేరా

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: ఇటాలిక్ బోల్డ్ 12px / 30px జార్జియా, సెరిఫ్}
ఇటాలిక్ బోల్డ్ జార్జియా ఫాంట్‌లోని పేరా
 

 ఉదాహరణ 1: అవుట్పుట్ 

ఉదాహరణ 1 లో, మనకు వేర్వేరు ఫాంట్లలో 3 వేర్వేరు పంక్తులు ఉన్నాయి. ప్రతి ఫాంట్‌లు వాటి అక్షరాల వెడల్పులు, ఇండెంటేషన్‌లు మొదలైన వాటిలో మారుతూ ఉంటాయని మీరు గమనించవచ్చు.

CSS లోని ఫాంట్‌లపై ఈ కథనంతో కదులుతోంది

CSS ఫాంట్‌లో గుణాలు

CSS ఫాంట్లలో 4 ప్రాధమిక లక్షణాలు ఉన్నాయి - శైలి, బరువు, పరిమాణం మరియు కుటుంబం. శైలి లక్షణం సాధారణ లేదా ఇటాలిక్‌ను సూచిస్తుంది. బరువు ఫాంట్‌ను సాదా లేదా బోల్డ్‌గా చూపిస్తుంది. బరువును సంఖ్యాపరంగా కూడా వ్యక్తీకరించవచ్చు. పరిమాణం కేవలం ఫాంట్ పరిమాణం పెద్ద పరిమాణం, ప్రదర్శనలో పెద్ద టెక్స్ట్. ఫాంట్ పరిమాణాన్ని కేటాయించటానికి బహుళ మార్గాలు ఉన్నాయి, తరువాత విభాగాలలో వివరణాత్మక వివరణలు ఇవ్వబడ్డాయి. ఫాంట్ పేరును వచనానికి కేటాయించడం కుటుంబ లక్షణం.

ఉదాహరణ 1 లో, మేము శీర్షికలు మరియు పేరా కోసం వేర్వేరు ఫాంట్ పేర్లను ఉపయోగించాము. H1 మరియు p ట్యాగ్‌ల క్రింద, మేము రెండు ఫాంట్ పేర్లను జాబితా చేయడాన్ని చూస్తాము, అయితే H2 ట్యాగ్ పేర్లు ఒకే ఫాంట్ మాత్రమే. ఇది ఫాంట్ కుటుంబం యొక్క నిర్వచనం, దీని గురించి తరువాత.

CSS లోని ఫాంట్‌లపై ఈ కథనంతో కదులుతోంది

డబుల్‌ను పూర్ణాంకానికి ఎలా మార్చాలి

ఫాంట్-శైలి లక్షణం:

రెండు ప్రాధమిక శైలులను ‘సాధారణ’ మరియు ‘ఇటాలిక్’ సెట్ చేయవచ్చు. ఇటాలిక్స్ ప్రకృతిలో స్లాంట్‌తో కర్సివ్‌గా ఉండాలి. సాధారణం అనేది డిఫాల్ట్ ఎంపిక. చాలా తక్కువ ఫాంట్లలో ఇటాలిక్ ఎంపికను పోలి ఉండే ‘వాలుగా’ అని పిలువబడే మరొక తక్కువ ఎంపిక ఉంది. మీరు శైలిని ‘వారసత్వంగా’ సెట్ చేయవచ్చు, తద్వారా ఇది ఫాంట్ శైలిని దాని మాతృ మూలకం నుండి తీసుకుంటుంది.

CSS లోని ఫాంట్‌లపై ఈ కథనంతో కదులుతోంది

ఫాంట్-బరువు లక్షణం:

ఈ లక్షణం ఫాంట్ మందంగా లేదా సన్నగా కనిపించాలా అని నిర్ణయిస్తుంది. దీన్ని ‘సాధారణ’ లేదా ‘బోల్డ్’ గా సెట్ చేయవచ్చు. డిఫాల్ట్ విలువ సాధారణం. ఈ విలువను సంఖ్యాపరంగా కూడా సెట్ చేయవచ్చు. 400 బరువు సాధారణం మరియు 700 బోల్డ్ కోసం. మరికొన్ని సెట్టింగులు ఉన్నాయి (100 నుండి - చాలా కాంతి నుండి 900 వరకు - చాలా బోల్డ్), కానీ వాటికి అన్ని ఫాంట్‌లు మద్దతు ఇవ్వవు. అన్ని బరువు ఎంపికలు ఉదాహరణ 3 లో చూపబడ్డాయి.

CSS లోని ఫాంట్‌లపై ఈ కథనంతో కదులుతోంది

ఫాంట్-పరిమాణ లక్షణం:

పరిమాణ లక్షణాన్ని బహుళ మార్గాల్లో సెట్ చేయవచ్చు. ఈ మార్గాలను క్రింద జాబితా చేద్దాం.
Medium ‘మీడియం’, ‘పెద్దది’ వంటి లెక్కించిన విలువ. వాస్తవానికి దుస్తులు పరిమాణాల మాదిరిగానే, విలువలు XX చిన్న నుండి XX పెద్ద వరకు ఉంటాయి!
Parent దాని మాతృ మూలకానికి సంబంధించి ‘పెద్దది’ లేదా ‘చిన్నది’ గా సెట్ చేయండి.
మూలకం యొక్క పరిమాణం యొక్క శాతం.
The మాతృ మూలకం యొక్క పరిమాణాన్ని నేరుగా స్వీకరించడానికి ‘వారసత్వంగా’ సెట్ చేయండి.
X px (పిక్సెల్స్), pt (పాయింట్లు) లేదా cm (సెంటీమీటర్) యొక్క యూనిట్లలో సంపూర్ణ విలువగా
‘మీడియం’ ఈ పరామితి కోసం సెట్ చేయబడిన డిఫాల్ట్ విలువ.

CSS లోని ఫాంట్‌లపై ఈ కథనంతో కదులుతోంది

ఫాంట్-కుటుంబ లక్షణం:

HTML లో, CSS ఫాంట్ కుటుంబం ఫాంట్ పేరును సెట్ చేయడం కోసం. మీరు ట్యాగ్‌తో ఒకే ఫాంట్ పేరును ఉంచవచ్చు. లేదా మీరు బహుళ విలువలను ఫాంట్-కుటుంబ జాబితాగా కేటాయించవచ్చు, అది బ్రౌజర్ ఫాంట్‌ను ఎన్నుకోవాల్సిన ప్రాధాన్యతను నిర్వచిస్తుంది.
పతనం-వెనుక వ్యవస్థ రూపంలో జాబితా ఎడమ నుండి కుడికి ప్రాధాన్యత ఇవ్వబడుతుంది. అందుబాటులో ఉంటే మొదటి విలువ ఎంచుకోబడుతుంది, లేదా జాబితా ముగింపుకు చేరుకునే వరకు నియంత్రణ తదుపరిదానికి వెళుతుంది. డిఫాల్ట్ ఫాంట్ కుటుంబం బ్రౌజర్ ప్రాధాన్యతల ద్వారా నిర్వచించబడుతుంది.
CSS ఫాంట్ కుటుంబాలు 2 రకాలు - సాధారణ కుటుంబాలు మరియు ఫాంట్ కుటుంబాలు.
సాధారణ కుటుంబాలు - కొన్ని సాధారణ లక్షణాల ఆధారంగా, ఫాంట్‌లను ‘సెరిఫ్’, ‘సాన్స్ సెరిఫ్’, ‘మోనోస్పేస్’ మొదలైనవిగా వర్గీకరించారు. ఉదాహరణకు, సాన్స్ సెరిఫ్ అంటే సెరిఫ్ స్టైల్ లేని ఫాంట్‌లు.
Names కుటుంబ పేర్లు - నిర్దిష్ట కుటుంబ సోపానక్రమాలకు చెందిన ఫాంట్‌లు. టైమ్స్, ఏరియల్, కొరియర్ అన్నీ ఫాంట్ కుటుంబాలు మరియు టైమ్స్ న్యూ రోమన్ టైమ్స్ కుటుంబానికి ఉదాహరణ ఫాంట్.
వివిధ ఫాంట్ కుటుంబ వినియోగ ఎంపికలు దిగువ ఉదాహరణ 4 లో ఇవ్వబడ్డాయి.

గమనించవలసిన కొన్ని సాధారణ అంశాలు

జావాలో mvc అప్లికేషన్ ఉదాహరణ

Other అనేక ఇతర CSS లక్షణాల మాదిరిగా, కొన్ని ఫాంట్ సెట్టింగులు వేర్వేరు బ్రౌజర్‌లలో మారుతూ ఉంటాయి. కొన్ని అరుదైన ఫాంట్ సెట్టింగులను ఉపయోగించే ముందు బ్రౌజర్ మద్దతు కోసం తనిఖీ చేయండి.
Font మీరు ఫాంట్-స్టైల్, ఫాంట్-వెయిట్ మొదలైన వ్యక్తిగత ట్యాగ్‌లను ఉపయోగించి విడిగా ఫాంట్ సెట్టింగులను సెట్ చేయవచ్చు. ప్రత్యామ్నాయంగా మీరు కాంపాక్ట్ కోడ్‌ను కావాలనుకుంటే, మీరు ఒకే విలువలోని అన్ని విలువలతో సంక్షిప్తలిపి ఫాంట్ లక్షణాన్ని ఉపయోగించవచ్చు.
The బ్రౌజర్ పరిమాణాన్ని బట్టి ఫాంట్ పరిమాణంలో తేడా ఉండాలని మీరు కోరుకునే వినియోగదారు దృశ్యాలలో, ప్రతిస్పందించే ఫాంట్ సెట్టింగ్ అని పిలువబడే ఉపయోగకరమైన ఫాంట్ సైజ్ సెట్టింగ్ ఉంది. దీనిని vw యూనిట్‌తో సెట్ చేయవచ్చు, అంటే “వ్యూపోర్ట్ వెడల్పు”. ఆ విధంగా టెక్స్ట్ పరిమాణం బ్రౌజర్ విండో పరిమాణాన్ని అనుసరిస్తుంది.

CSS లోని ఫాంట్లలో మీరు వెతుకుతున్న సమాచారాన్ని మీరు కనుగొన్నారని ఆశిస్తున్నాము. దిగువ వ్యాఖ్యల విభాగంలో మీ అనుభవాన్ని మాతో పంచుకోండి. హ్యాపీ డిజైనింగ్!

వెబ్-అభివృద్ధి గురించి మరింత తెలుసుకోవడానికి మీకు ఆసక్తి ఉంటే, చూడండి ఎడురేకా చేత. వెబ్ డెవలప్‌మెంట్ సర్టిఫికేషన్ శిక్షణ HTML5, CSS3, ట్విట్టర్ బూట్‌స్ట్రాప్ 3, j క్వెరీ మరియు గూగుల్ API లను ఉపయోగించి ఆకట్టుకునే వెబ్‌సైట్‌లను ఎలా సృష్టించాలో తెలుసుకోవడానికి మరియు అమెజాన్ సింపుల్ స్టోరేజ్ సర్వీస్ (S3) కు ఎలా అమలు చేయాలో తెలుసుకోవడానికి మీకు సహాయం చేస్తుంది.