వెబ్ పేజీలలో కస్టమ్ ఫాంట్లను ఉపయోగించడం
వచనం కంటెంట్ ఎల్లప్పుడూ వెబ్సైట్ల యొక్క ఒక ముఖ్యమైన భాగం, కానీ వెబ్ యొక్క ప్రారంభ రోజులలో, డిజైనర్లు మరియు డెవలపర్లు తమ వెబ్పాయీలపై ఉన్న టైపోగ్రఫిక్ నియంత్రణలో తీవ్రంగా పరిమితం చేశారు. ఇది వారి సైట్లు విశ్వసనీయంగా ఉపయోగించడానికి వీలున్న ఫాంట్లలో ఒక పరిమితి కూడా ఉంది. గతంలో పేర్కొన్న "వెబ్ సురక్షిత ఫాంట్లు" అనే పదాన్ని మీరు వినవచ్చు. ఇది ఒక వ్యక్తి యొక్క కంప్యూటర్లో చేర్చబడే చాలా చిన్న ఫాంట్ లను సూచిస్తుంది, అనగా మీరు ఆ ఫాంట్లలో ఒకదాన్ని ఉపయోగించినట్లయితే, అది ఒక వ్యక్తి యొక్క బ్రౌజర్లో సరిగ్గా అన్వయించగల సురక్షిత పందెం.
నేడు, వెబ్ నిపుణులకు పని చేయడానికి కొత్త ఫాంట్లు మరియు రకం ఎంపికల హోస్ట్ ఉంది, వీటిలో ఒకటి WOFF ఫార్మాట్.
WOFF అంటే ఏమిటి?
WOFF అనేది "వెబ్ ఓపెన్ ఫాంట్ ఫార్మాట్" గా సూచించే సంక్షిప్త నామం. ఇది CSS @ font-face లక్షణంతో వుపయోగించడానికి ఫాంట్లను కుదించడానికి ఉపయోగిస్తారు. ఇది పైన పేర్కొన్న వెబ్ సురక్షితమైన ఫాంట్లలో కొన్నింటిని - విలక్షణమైన "ఏరియల్, టైమ్స్ న్యూ రోమన్, జార్జియా" దాటి ప్రత్యేక ఫాంట్లను వాడటానికి వెబ్ పేజీలలో ఫాంట్లను పొందుపరచడానికి ఇది ఒక మార్గం.
WOFF వెబ్ పేజీలకు ప్యాకేజింగ్ ఫాంట్లకు ప్రమాణంగా W3C కు సమర్పించబడింది. ఇది నవంబర్ 16, 2010 న పనిచేస్తున్న డ్రాఫ్ట్ అయింది. ఈ రోజున మేము నిజంగా WOFF 2.0 ను కలిగి ఉన్నాము, ఇది ఫార్మాట్ యొక్క మొట్టమొదటి సంస్కరణ నుండి దాదాపు 30% వరకు మెరుగుపరుస్తుంది. కొన్ని సందర్భాల్లో, ఈ పొదుపులు మరింత ప్రబలంగా ఉంటాయి!
ఎందుకు WOFF ఉపయోగించండి?
వెబ్ ఫాంట్లు, WOFF ఫార్మాట్ ద్వారా పంపిణీ చేయబడినవి, ఇతర ఫాంట్ ఎంపికలు పై చాలా ప్రయోజనాలను అందిస్తాయి. ఆ వెబ్ సురక్షితంగా ఉన్న ఫాంట్ లు ఉపయోగకరంగా ఉన్నాయి మరియు మా పనిలో ఉన్న ఫాంట్లకు ఇప్పటికీ స్థానం ఉంది, మా ఎంపికలను విస్తరించడం మరియు మా టైపోగ్రఫిక్ ఎంపికలను తెరవడం మంచిది.
WOFF ఫాంట్లకు క్రింది ప్రయోజనాలు ఉన్నాయి:
- వారు చిత్రాలను ఫాంట్లు కంటే మరింత అందుబాటులో ఉంటాయి. CSS తో WOFF శైలులు సాదా HTML టెక్స్ట్, మీరు యాక్సెస్ మరియు చిత్రాలు అనుమతించదు డిజైన్ నియంత్రణ ఇవ్వడం.
- WOFF ఫైల్స్ టైపోగ్రాఫికల్ ఇన్ఫర్మేషన్ వంటి సందర్భోచిత రూపాలు మరియు పాత శైలి సంఖ్యలు. ఇది మీ వెబ్ పేజీలు మంచి టైపోగ్రఫీని ఇస్తుంది, ఎందుకంటే మీరు సరైన అక్షరాలను ఉపయోగిస్తున్నారు, కేవలం ఉజ్జాయింపులను మాత్రమే కాదు.
- మీరు ఇతర భాషల నుండి అక్షరాలతో ఫాంట్లను పొందుపరచవచ్చు ఎందుకంటే WOFF ఫాంట్లు అంతర్జాతీయీకరణతో సహాయపడుతుంది.
- అన్ని CSS శైలి టెక్స్ట్ వలె, WOFF తో శైలిలో ఫాంట్లు మరింత శోధన ఇంజిన్ స్నేహపూర్వకంగా ఉంటారు. శోధన ఇంజిన్లు ఒక చిత్రం లో పొందుపర్చిన "చూడండి" టెక్స్ట్ను కలిగి ఉండవు, మరియు ALT టెక్స్ట్ సహాయపడుతుంది, టెక్స్ట్కు ప్రత్యామ్నాయం లేదు.
- WOFF ఫాంట్లు కంప్రెస్ చేయబడతాయి, కాబట్టి అవి ఇతర రకాల ఫాంట్ ఫైల్స్ కంటే తక్కువగా ఉంటాయి. ఇది సైట్ డౌన్లోడ్ వేగం మరియు మొత్తం పనితీరుతో సహాయం చేస్తుంది.
- మీ కార్పొరేట్ ఫాంట్లను WOFF ఫైల్స్గా పొందుపరచడం ద్వారా మీ బ్రాండ్ ఐడెంటిటీని భద్రపరచడానికి మీరు WOFF ఫైళ్లను ఉపయోగించవచ్చు.
WOFF బ్రౌజర్ మద్దతు
WOFF సహా ఆధునిక బ్రౌజర్లలో అద్భుతమైన బ్రౌజర్ మద్దతు ఉంది:
- Chrome 6+
- ఫైర్ఫాక్స్ 3.6+
- ఇంటర్నెట్ ఎక్స్ప్లోరర్ 9+
- Opera 11.1+
- సఫారి 5.1+
ఒబామా మినీ యొక్క అన్ని సంస్కరణలు ఒక్కటే మినహాయింపుతో, ఈ రోజుల్లో బోర్డు అంతటా మద్దతు ఉంది.
WOFF ఫాంట్లను ఎలా ఉపయోగించాలి
ఒక WOFF ఫైల్ ఉపయోగించడానికి, మీరు మీ వెబ్ సర్వర్కు ఒక WOFF ఫైల్ను అప్లోడ్ చేయాలి, @ font-face ఆస్తితో ఒక పేరును ఇవ్వండి, ఆపై మీ CSS లో ఫాంట్ను కాల్ చేయండి. ఉదాహరణకి:
- వెబ్ సర్వర్ యొక్క / ఫాంట్లు డైరెక్టరీకి myWoffFont.woff అని పిలువబడే ఫాంట్ను అప్లోడ్ చేయండి.
- మీ CSS ఫైల్ లో @ font-face విభాగాన్ని చేర్చండి:
@ font- ముఖం {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') ఫార్మాట్ ('woff');
}
- కొత్త ఫాంట్ పేరును (myWoffFont) మీ CSS ఫాంట్ స్టాక్తో జోడించండి, మీరు ఏ ఇతర ఫాంట్ పేరు అయినా:
p {
font-family: myWoffFont , జెనీవా, ఏరియల్, హెల్వెటికా, సాన్స్ సెరిఫ్;
}
WOFF ఫాంట్లను ఎక్కడ పొందాలి
వాణిజ్య మరియు వాణిజ్యేతర ఉపయోగం కోసం ఉచితమైన WOFF ఫాంట్లను మీరు కనుగొనే రెండు గొప్ప ప్రదేశాలు ఉన్నాయి:
- ఓపెన్ ఫాంట్ లైబ్రరీ
- ఫాంట్ స్క్విరెల్
మీరు WOFF ఫార్మాట్లో అందుబాటులో లేని ఒక ఫాంట్ను ఉపయోగించడానికి లైసెన్స్ని కలిగి ఉంటే, WOFF ఫైళ్లలో మీ ఫాంట్ ఫైల్లను మార్చడానికి ఫాంట్ స్క్విరెల్ వంటి WOFF సృష్టికర్తని ఉపయోగించవచ్చు. SFnt2woff అని పిలువబడే ఒక కమాండ్-లైన్ సాధనం కూడా మీరు మీ TrueType / OpenType ఫాంట్లను WOFF కు మార్చడానికి Macintosh మరియు Windows లో ఉపయోగించవచ్చు.
మీ సిస్టమ్కు తగిన బైనరీని డౌన్లోడ్ చేసి, కమాండ్ లైన్ (లేదా టెర్మినల్) వద్ద అమలు చేయండి మరియు సూచనలను అనుసరించండి.
WOFF ఉదాహరణ
ఇక్కడ WOFF ఫైల్స్ యొక్క కొన్ని ఉదాహరణలు: 24 గంటల్లో HTML5 లో WOFF పేజీ.
జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. 7/11/17 న జెరెమీ గిరార్డ్ చే సవరించబడింది