CSS @font-face పరిపాలన

నిర్వచనం మరియు వినియోగం

@font-face పరిపాలనతో వెబ్ డిజైనర్లు ఇకపై ఏ ఒక్క "సురక్షిత" ఫంట్ను కూడా ఉపయోగించకుండా ఉంటారు.

@font-face పరిపాలనలో, మీరు ముందుగా ఫంట్ పేరును (ఉదాహరణకు myFirstFont) నిర్వచించవలసినది, ఆపై ఫంట్ ఫైల్ ను సూచించండి.

సలహా:ఫంట్ యూరిని క్షుద్ర అక్షరాలతో వాడండి. పెద్ద అక్షరాలు IE లో అనుమానకరమైన ఫలితాలను కలిగిస్తాయి!

హెచ్ఎంఎల్ ఎలిమెంట్లలో ఫంట్ను ఉపయోగించడానికి, ఫంట్ పేరును (myFirstFont) font-family అట్రిబ్యూట్ ద్వారా ఉపయోగించండి:

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
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 ఎంపిక. ఫంట్ ను ఎలా సాగించాలనేది నిర్వచించు. అప్రమేయ విలువ "normal".
font-style
  • normal
  • italic
  • oblique
 ఎంపిక. ఫంట్ శైలిని నిర్వచించు. అప్రమేయ విలువ "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 ఎంపిక. ఫంట్ ను మద్దతు ఇచ్చే ఫంట్ గణనీయతను నిర్వచించు. అప్రమేయ విలువ "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" గా సెట్ చేయవలసి ఉంటుంది).