వెబ్ అభివృద్ధిలో, ఫాంట్ స్టైలింగ్ యొక్క సరైన ఉపయోగం అనువర్తనానికి ఆకర్షణీయమైన రూపాన్ని అందిస్తుంది. ఈ ఫాంట్ స్టైల్స్ డాక్యుమెంట్ రీడింగ్ ఆర్డర్ గురించి విజువల్ క్లూలను అందిస్తాయి. ఉదాహరణకు, పత్రం శీర్షిక యొక్క ఫాంట్ శైలి ఇతరుల నుండి బోల్డ్ మరియు ముఖ్యమైనదిగా ఉండాలి. స్టైలింగ్ ముఖ్యమైన కంటెంట్‌ను ఇతరుల నుండి వేరు చేయడానికి కూడా సహాయపడుతుంది.
ఈ వ్యాసం యొక్క అభ్యాస ఫలితాలు:
- Google వెబ్ ఫాంట్‌లు అంటే ఏమిటి?
- HTMLలో Google ఫాంట్‌లను ఎలా దిగుమతి చేయాలి?
- CSS ఫైల్‌లో Google ఫాంట్‌లను ఎలా ఉపయోగించాలి?
Google వెబ్ ఫాంట్‌లు అంటే ఏమిటి?
Google వెబ్ ఫాంట్ అనేది వందలాది ఫాంట్ శైలులు లేదా కుటుంబాలను కలిగి ఉన్న ఓపెన్ సోర్స్ లైబ్రరీ. ఇది Android మరియు CSSతో వెబ్ ఫాంట్‌లను ఉపయోగించడానికి మాకు సహాయపడే APIలను కూడా అందిస్తుంది. Google ఫాంట్‌లు ఇతర ఫాంట్ లైబ్రరీల కంటే చాలా తేలికైనవి మరియు వ్యాపార వినియోగానికి ఉచితంగా లభిస్తాయి. వీటిని ఏ వెబ్‌సైట్‌లోనైనా అమలు చేయడం సులభం.
డిఫాల్ట్‌గా, CSS ఫాంటసీ, సెరిఫ్, సాన్స్ సెరిఫ్, కర్సివ్ మరియు మోనోస్పేస్ ఫాంట్ శైలులను అందిస్తుంది. మీరు కొన్ని ఇతర ఫాంట్ శైలులను ఉపయోగించాలనుకుంటే Google ఫాంట్‌లను ఉపయోగించవచ్చు.
HTMLలో Google ఫాంట్‌లను ఎలా దిగుమతి చేయాలి?
HTML పేజీలో Google ఫాంట్‌లను ఉపయోగించడానికి, క్రింది దశలను అనుసరించండి.
దశ 1: ఫాంట్ ఫ్యామిలీని ఎంచుకోండి
మొదట, తెరవండి Google ఫాంట్‌లు అధికారిక వెబ్‌సైట్ మరియు మీకు నచ్చిన ఫాంట్‌ను ఎంచుకోండి. ఉదాహరణకు, మేము ఎంచుకున్నాము ' లోబ్స్టర్ రెండు ' ఫాంట్ కుటుంబం:
దశ 2: శైలులను ఎంచుకోండి
తరువాత, శైలుల జాబితాను వీక్షించడానికి క్రిందికి స్క్రోల్ చేయండి. వాటిని క్లిక్ చేయడం ద్వారా మీ సేకరణకు జోడించండి + ” గుర్తు:
దశ 3: ఎంచుకున్న కుటుంబాలను వీక్షించండి
ఎంచుకున్న కుటుంబాలను వీక్షించడానికి, దిగువ హైలైట్ చేయబడిన చిహ్నంపై క్లిక్ చేయండి:
దశ 4: HTMLలో పొందుపరచడానికి లింక్‌ను కాపీ చేయండి
ఆ తర్వాత, క్రిందికి స్క్రోల్ చేసి, హైలైట్ చేసిన “ని ఉపయోగించి ఫాంట్-ఫ్యామిలీ లింక్‌ని కాపీ చేయండి. కాపీ చేయండి ” చిహ్నం:
CSS ఫైల్‌లో Google ఫాంట్‌లను ఎలా ఉపయోగించాలి?
స్టైలింగ్ కోసం CSSలో Google ఫాంట్‌ల కాపీని ఉపయోగించడానికి, ఇచ్చిన ఉదాహరణలను పరిశీలించండి.
ఉదాహరణ 1
ఒక 'ని చేర్చండి 'కొన్ని కంటెంట్ లేదా పేరాను పేర్కొనడానికి మూలకం:
< p > 'ఉత్తమ ట్యుటోరియల్ వెబ్‌సైట్' p >Google ఫాంట్‌లను దిగుమతి చేయడానికి, కాపీ చేసిన కోడ్‌ను “లో అతికించండి <శైలి> HTML ఫైల్ యొక్క ”ట్యాగ్:
@ దిగుమతి url ( 'https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap' ) ;శైలి 'p' మూలకం
p {ఫాంట్ కుటుంబం: 'లోబ్స్టర్ టూ' , కర్సివ్;
టెక్స్ట్-అలైన్: సెంటర్;
ఫాంట్ పరిమాణం: 45px;
రంగు: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
క్రింది వివరించిన CSS లక్షణాలు HTMLకి వర్తింపజేయబడతాయి ' ”ట్యాగ్:
- ' ఫాంట్ కుటుంబం 'విలువతో కేటాయించబడింది' ‘లోబ్స్టర్ టూ’, కర్సివ్ ”. ఈ ఫాంట్ కుటుంబం Google ఫాంట్‌ల నుండి దిగుమతి చేయబడింది.
- ' టెక్స్ట్-అలైన్ ” వచన అమరికను సర్దుబాటు చేస్తుంది.
- ' ఫాంట్ పరిమాణం ” ఫాంట్ పరిమాణాన్ని నిర్ణయిస్తుంది.
- ' రంగు ” ఫాంట్ రంగును సెట్ చేస్తుంది.
ఫాంట్ కుటుంబం విజయవంతంగా వర్తించబడిందని చిత్రం చూపిస్తుంది:
ఉదాహరణ 2
దిగుమతి చేసుకోవడానికి మరొక ఉదాహరణ తీసుకుందాం ' నెర్కో వన్ ” గూగుల్ ఫాంట్. ఈ ప్రయోజనం కోసం, “Nerko One” Google ఫాంట్ URL కోసం కోడ్‌ను మళ్లీ “లో అతికించండి. <శైలి> ' మూలకం:
@ దిగుమతి url ( 'https://fonts.googleapis.com/css2?family=Nerko+One&family=Oswald:wght@500&family=Pacifico&display=swap' ) ;శైలి 'p' మూలకం
p {ఫాంట్ కుటుంబం: 'నెర్కో వన్' , కర్సివ్;
ఫాంట్ బరువు: 300 ;
ఫాంట్ పరిమాణం: 30px;
}
ది ' ఫాంట్ కుటుంబం ',' ఫాంట్-వెయిట్ ', మరియు' ఫాంట్ పరిమాణం 'లక్షణాలు HTMLకి వర్తింపజేయబడ్డాయి' ' మూలకం.
అవుట్‌పుట్
CSS ఫైల్‌లో Google వెబ్ ఫాంట్‌లను ఎలా దిగుమతి చేయాలో మేము మీకు నేర్పించాము.
ముగింపు
CSSలో Google ఫాంట్‌లను దిగుమతి చేయడానికి, ముందుగా సందర్శించండి Google ఫాంట్‌లు అధికారిక వెబ్‌సైట్ మరియు ఫాంట్ శైలిని ఎంచుకోండి. ఆపై, '' కలిగి ఉన్న కోడ్‌ను కాపీ చేయండి @దిగుమతి 'కీవర్డ్ మరియు దానిని CSS ఫైల్‌లో లేదా 'లో అతికించండి <శైలి> HTML ఫైల్ యొక్క మూలకం. ఈ అధ్యయనం CSS ఫైల్‌లోకి Google ఫాంట్‌లను దిగుమతి చేసే పూర్తి విధానాన్ని ప్రదర్శించింది.