ఈ బ్లాగ్ CSS @font-face రూల్ వినియోగం గురించి మాట్లాడుతుంది.
CSS @font-face రూల్ అంటే ఏమిటి?
CSSలోని @font-face నియమం మా ప్రాజెక్ట్‌ల కోసం అనుకూల ఫాంట్‌లను రూపొందించడానికి ఉపయోగించబడుతుంది. ఈ ఫాంట్‌లను సర్వర్ లేదా సిస్టమ్ ఇన్‌స్టాల్ చేసిన ఫాంట్‌ల నుండి లోడ్ చేయవచ్చు.
CSS @font-face నియమాన్ని ఎలా ఉపయోగించాలి?
CSS @font-face నియమాన్ని ఉపయోగించడానికి సింటాక్స్ క్రింద పేర్కొనబడింది:
@ఫాంట్-ఫేస్ {
ఫాంట్ కుటుంబం : MyNewFont ;
src : url ( )
}
ఫాంట్-ఫ్యామిలీ ప్రాపర్టీలో విలువను మరియు ఈ ఫాంట్ ఉన్న సంబంధిత URLని src లక్షణంగా పేర్కొనడం ద్వారా @font-face నియమం నిర్వచించబడుతుంది.
ఉదాహరణ
దిగువ ఉదాహరణలో, మేము ఫాంట్‌లను అనుకూలీకరించాము. అలా చేయడానికి, ముందుగా, బ్రౌజర్ నుండి ఫాంట్‌లను డౌన్‌లోడ్ చేసి, వాటిని మీ ప్రాజెక్ట్ ఫోల్డర్‌కు జోడించండి. మీరు సర్వర్ నుండి ఫాంట్‌లను ఉపయోగిస్తుంటే మీరు లింక్‌లను కూడా ఉపయోగించవచ్చు.
ముందుగా,
మరియు ట్యాగ్‌లను జోడించి, ఆపై వాటిలో ప్రతిదానికి ఫాంట్‌లను అనుకూలీకరించడానికి వర్తించండి. పైన వివరించిన దృష్టాంతాన్ని మూడు-దశల్లో అమలు చేద్దాం.
దశ 1: HTML ఫైల్‌కు మూలకాలను జోడించండి
దశ 1: HTML ఫైల్‌కు మూలకాలను జోడించండి
HTMLలో,
విభాగంలో, వెబ్ పేజీకి సంబంధించిన కొంత కంటెంట్‌ను జోడించడం కోసం మరియు ని జోడించండి:
< h2 > Linuxhintకి స్వాగతం! < / h2 >
< h1 > Linuxhintకి స్వాగతం! < / h1 >
దశ 2: CSSలో @font-face నియమాన్ని పేర్కొనండి
< h2 > Linuxhintకి స్వాగతం! < / h2 >
< h1 > Linuxhintకి స్వాగతం! < / h1 >
దశ 2: CSSలో @font-face నియమాన్ని పేర్కొనండి
నియమాన్ని పేర్కొనడానికి, కీవర్డ్ ' @ఫాంట్-ఫేస్ ” CSSలో ఉపయోగించబడుతుంది. దాని కర్లీ బ్రాకెట్‌ల లోపల, ఫాంట్-ఫ్యామిలీ ప్రాపర్టీని జోడించి, ఫాంట్ పేరును దాని విలువగా జోడించండి. ఆపై, డౌన్‌లోడ్ చేయబడిన ఫాంట్ యొక్క URL పాత్‌ను పేర్కొనడానికి src ప్రాపర్టీని ఉపయోగించండి:
@ఫాంట్-ఫేస్ {
ఫాంట్ కుటుంబం : myfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
అదేవిధంగా, మేము మరొక అనుకూలీకరించిన ఫాంట్ బ్లాక్‌ను జోడిస్తాము:
@ఫాంట్-ఫేస్ {ఫాంట్ కుటుంబం : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
ఇప్పుడు,
మరియు మూలకాలకు స్టైలింగ్‌ని వర్తింపజేయండి.
శైలి h2 మూలకం
h2 {
ఫాంట్ కుటుంబం : myfont ;
ఫాంట్ పరిమాణం : 50px ;
}
శైలి h2 మూలకం
h2 {ఫాంట్ కుటుంబం : myfont ;
ఫాంట్ పరిమాణం : 50px ;
}
మూలకానికి వర్తించే లక్షణాలు క్రింద వివరించబడ్డాయి:
- ' ఫాంట్ కుటుంబం 'విలువతో సెట్ చేయబడింది' myfont ” ఇది మేము @font-face నియమంలో ప్రకటించాము.
- ' ఫాంట్ పరిమాణం ” ఆస్తి ఫాంట్ పరిమాణాన్ని 50pxకి సెట్ చేస్తుంది.
శైలి h1 మూలకం
h1 {
ఫాంట్ కుటుంబం : myfont2 ;
ఫాంట్ పరిమాణం : 70px ;
రంగు : గోధుమ రంగు ;
}
ఇక్కడ ' రంగు ఫాంట్‌కి రంగు వేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
మరియు ట్యాగ్‌లు కొత్తగా ప్రకటించిన ఫాంట్‌లతో విజయవంతంగా స్టైల్ చేయబడ్డాయని దిగువ అందించిన చిత్రం నుండి చూడవచ్చు:
మేము CSS @font-face నియమాన్ని ఉపయోగించడం కోసం పద్ధతిని అందించాము.
ముగింపు
ఏదైనా అనువర్తనాన్ని సౌందర్యంగా ఆకర్షణీయంగా చేయడంలో ఫాంట్ శైలులు ముఖ్యమైన పాత్ర పోషిస్తాయి. మా సిస్టమ్ పరిమిత ఫాంట్ స్టైల్‌లను కలిగి ఉంది, అయితే డెవలపర్‌కి వారి వెబ్ యాప్‌లకు బ్యూటిఫికేషన్ జోడించడానికి వివిధ ఫాంట్‌లు అవసరం. అలా చేయడానికి, అనుకూల ఫాంట్‌లను జోడించడం కోసం @font-face నియమాన్ని ఉపయోగించడానికి CSS మమ్మల్ని అనుమతిస్తుంది. ఈ కథనం @font-face నియమాన్ని ప్రదర్శించింది, దీని ద్వారా మీరు మా అప్లికేషన్‌లో ఫాంట్ శైలిని అనుకూలీకరించవచ్చు.