CSS @font-face నియమం
నిర్వచనం మరియు వినియోగం
@font-face నియమం ద్వారా, వెబ్ డిజైనర్లు ఇప్పుడు ఏ ఒక్క "నెట్వర్క్ సెక్యూరిటీ" ఫంట్ను వాడకుండా ఉండగలరు.
@font-face నియమంలో, మీరు ముందుగా ఫంట్ పేరును (ఉదాహరణకు myFirstFont) నిర్వచించవలసినది, ఆపై ఫంట్ ఫైల్ ను సూచించండి.
సలహా:ఫంట్ యూరిని క్షుద్ర అక్షరాలతో వాడండి. పెద్ద అక్షరాలు IE లో అనుమానాలను సృష్టించవచ్చు!
ఫంట్ను HTML మేనువులపై వాడడానికి, font-family అట్రిబ్యూట్ ద్వారా ఫంట్ పేరును ఉపయోగించండి (myFirstFont):
div {
font-family: myFirstFont;
}
మరింత చూడండి:
CSS శిక్షణా పద్ధతి:CSS వెబ్ ఫంట్
ఇన్స్టాన్స్
ఒక "myFirstFont" పేరుతో ఫంట్ను నిర్దేశించి, దాని యూరిని నిర్దేశించండి:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
పేజీ కిందన మరిన్ని TIY ఉదాహరణలను చూడండి.
CSS సింథెక్సిస్
@font-face {
font-properties
}
| ఫంట్ డిస్క్రిప్షన్ | విలువ | వివరణ |
|---|---|---|
| font-family | name | అవసరము. ఫంట్ పేరును నిర్వచించు. |
| src | URL | అవసరము. డౌన్లోడ్ ఫంట్ యూరి ని నిర్వచించు. |
| font-stretch |
|
ఆప్షనల్. ఫంట్ ను ఎలా విస్తరించాలో నిర్వచించు. అప్రమేయంగా "normal" ఉంటుంది. |
| font-style |
|
ఆప్షనల్. ఫంట్ శైలిని నిర్వచించు. అప్రమేయంగా "normal" ఉంటుంది. |
| font-weight |
|
ఆప్షనల్. ఫంట్ యొక్క వాస్తవికతను నిర్వచించు. అప్రమేయంగా "normal" ఉంటుంది. |
| unicode-range | unicode-range | ఆప్షనల్. ఫంట్ ను మద్దతు ఇచ్చే Unicode అక్షరాల పరిధిని నిర్వచించు. అప్రమేయంగా "U+0-10FFFF" ఉంటుంది. |
మరిన్ని ఇన్స్టాన్స్లు
ఇన్స్టాన్స్
మీరు మరొక @font-face రూల్స్ జోడించవలసి ఉంది, దీనిలో బోల్డ్ టెక్స్ట్ డిస్క్రిప్టర్ ఉంటుంది:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
ఫైల్ "sansation_bold.woff" మరొక ఫంట్ ఫైల్ ఉంది, దీనిలో Sansation ఫంట్ యొక్క బోల్డ్ అక్షరాలు ఉన్నాయి.
ఫంట్ ఫ్యామిలీ "myFirstFont" కి సంబంధించిన ముఖ్యమైన పదం బోల్డ్ గా ప్రదర్శించాలి ఏమైనా, బ్రౌజర్ దానిని ఉపయోగిస్తుంది.
ఈ విధంగా, ఒకే ఫంట్నకు అనేక @font-face రూల్స్ ను సెట్ చేయవచ్చు.
బ్రౌజర్ మద్దతు
Internet Explorer, Firefox, Opera, Chrome మరియు Safari అన్ని @font-face రూల్స్ ను మద్దతు ఇస్తాయి.
పట్టికలో వివరించబడిన సంఖ్యలు పూర్తిగా ఫంట్ ఫార్మాట్ ను మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ ను చూపిస్తాయి.
| ఫంట్ ఫార్మాట్ | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | మద్దతు లేదు | మద్దతు లేదు | మద్దతు లేదు | 3.2 | మద్దతు లేదు |
| EOT | 6.0 | మద్దతు లేదు | మద్దతు లేదు | మద్దతు లేదు | మద్దతు లేదు |
* Edge మరియు IE: ఫంట్ ఫార్మాట్ మాత్రమే "installable" గా సెట్ చేయబడినప్పుడు ప్రభావవంతంగా ఉంటుంది
* Firefox: అప్రమేయంగా అచేతనంగా ఉంటుంది, కానీ చేతనం చేయవచ్చు (WOFF2 ను ఉపయోగించడానికి flag ను "true" గా సెట్ చేయవలసి ఉంటుంది).
