CSS Font

వెబ్ పేజ్ పై కనబడే "font" స్టైల్ మరియు సైజ్ లను ఏ విధంగా మార్చవచ్చునో తెలుసుకుందాం.

Font Family

వెబ్ పేజ్ పై డిస్ప్లే అయ్యే ఏదైనా text యొక్క font - family ని ఈ property ద్వారా నిర్ణయించవచ్చు. CSS యందు generic (సాధారణ), specific (నిర్దిష్ట) అనే రెండు రకాల font - family లు ఉన్నాయి. వేర్వేరు రకాల font -family లు వెబ్ పేజ్ పై మాత్రం చూడ్డానికి ఒకేలా డిస్ప్లే అవుతే వాటిని generic family కి చెందినవిగా గుర్తించవచ్చు. ఉదాహరణకు "Serif" మరియు "Monospace" వీటి డిస్ప్లే వెబ్ పేజ్ పై ఒకేవిధంగా ఉంటుంది. అదే "Times New Roman" మరియు "Arial" వీటి డిస్ప్లే వెబ్ పేజ్ పై వేర్వేరుగా ఉంటుంది. కనుక వీటిని specific family కి చెందినవిగా చెప్పుకోవచ్చు.

మీకు కావలసిన font - family తో మొదలుపెట్టి generic family తో ముగించడం మంచిది. ఒక్కోసారి browser మొదటి దాన్ని ఎంచుకోలేనప్పుడు మనం నిర్ణయించిన రెండవ font-family ని డిస్ప్లే చెయ్యడానికి ప్రయత్నిస్తుంది . (ఈ విషయం browser compatibility కి సబంధించినది ఇప్పుడు ఇక్కడ అప్రస్తుతం.) క్రింది ఉదాహరణలోవలె font-family యొక్క value ఒక పదానికి మించినదిగా ఉంటే దాన్ని quotes (అనగా " " ) నడుమ ఉంచాలి. మరియు ఒకటికి మించి font family లను కామాతో వేరు చేస్తూ రాయవచ్చు అనేవిషయాన్ని క్రింది ఉదాహరణ ద్వారా గమనించండి.

Font Style

font-style అనే property మూడు రకాల values ని కలిగి ఉన్నది. అవి normal, italic మరియు oblique. క్రింది ఉదాహరణను మీరు ప్రయత్నించండి.

Font Size

font size ను pixels , em మరియు % (percentage) లలో వ్రాస్తారు. ఇందులో ఒక pixel అంటే మీ computer screen పై ఒక చిన్నdot. ఇలా పదహారు pixels లను కలిపితే 1em అవుతుంది. web devolopers చాలామట్టుకు computers , laptop ల పై డిస్ప్లే అయ్యే documents ల యొక్క font size ని pixels లో వ్రాస్తారు. ఎందుకంటే pixels లో font size ని రాస్తే అది computer మరియు laptop లపై బాగానే కనబడుతుంది కానీ mobile లో మాత్రం మనం అనుకున్న result ని ఇవ్వదు అంటే చూడ్డానికి కొద్దిగా ఎక్కువ చిన్నదిగా కానీ లేదా అనుకున్నదానికంటే కొద్దిగా ఎక్కువ పెద్దదిగా కానీ కనబడుతుంది. అదే mobile లో డిస్ప్లే చెయ్యాలనుకునే documents యొక్క font size ని em లో నిర్ణయిస్తారు. కాని అది computers పై నూటికి నూరుశాతం result ని ఇవ్వదు. అనగా ఈ తేడా అనేది కొద్దిపాటిగా తప్పకుండా ఉంటుంది. ఇప్పటికీ పూర్తి స్థాయిలో పరిష్కారం లేదు. సమస్స్య అనేది browser అనుకూలత (compatibility) కు సంబంధించినది. అయితే computers మరియు mobile రెండింటిపై సరిగ్గా డిస్ప్లే చెయ్యాలనుకున్నప్పుడు % , em ఈ రెండింటి combination (కలిపి) font size ని వ్రాస్తే గనక సమస్స్యకు పూర్తి స్థాయిలో పరిష్కారం లభిస్తుంది అంటున్నారు. హెడ్డింగ్స్ రాయడానికి హెడ్డింగ్ టాగ్స్ <h1>,</h1> లను మరియు పారగ్రాఫ్ లను రాయడానికి <p>,</p> ట్యాగ్ లను వాడండి. క్రింది ఉదాహరణను గమనించండి.
body ట్యాగ్ కు font - size యొక్క value ని "100%" అని రాసి మిగతా elements యొక్క size ని "em" లో రాయడం వల్ల output అనేది పరిపూర్ణంగా ఉంటుంది.