CSS ఫాంట్

CSS ఫంట్ అట్రిబ్యూట్ టెక్స్ట్ ఫంట్ సిస్టమ్, పరిమాణం, బోల్డ్, శైలి (ఉదా, ఇంక్లైన్) మరియు ఫార్మ్ అట్రిబ్యూట్ (ఉదా, స్మాల్ కేప్స్).

CSS ఫాంట్ సిరీస్

在 CSS 中，有两种不同类型的字体系列名称：

  • 通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
  • 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

如果需要了解更多有关字体系列的知识，请阅读 CSS ఫాంట్ సిరీస్。

నిర్దేశించబడిన ఫంట్ కుటుంబం

使用 font-family 属性 定义文本的字体系列。

సాధారణ ఫంట్ కుటుంబాన్ని ఉపయోగించండి

మీ డాక్యుమెంట్ కు సాన్స్ సెరిఫ్ ఫంట్ ని ఉపయోగించాలి అని మీరు అనుకున్నారేమో కానీ, కానీ ఏ ఫంట్ ఉపయోగించాలో మీరు ఆందోళన చేయకూడదు అని ఉంటే, ఈ డిక్లరేషన్ ఒక తగినిది ఉంటుంది:

body {font-family: sans-serif;}

亲自试一试

ఈ విధంగా, యూజర్ ఏజెంట్ సాన్స్ సెరిఫ్ ఫంట్ కుటుంబాన్ని నుండి ఒక ఫంట్ని ఎంచుకుంటుంది (ఉదాహరణకు హెల్లెవటిక్) మరియు అది బడీ ఎలిమెంట్స్ కు అనువర్తిస్తుంది. ఈ ఫంట్ ఎంపిక అనువర్తనం అనేది పరిపాలనలో ఉంది కానీ, ఇది పరిపాలనలో ఉండకూడదు అనే స్పెసిఫిక్ సెలెక్టర్స్ ని అధిగమించినప్పుడు అది అనువర్తిస్తుంది.

నిర్దేశించబడిన ఫంట్ కుటుంబం

సాధారణ ఫంట్ కుటుంబాన్ని ఉపయోగించడం తో పాటు, మీరు font-family అటువంటి పరిమితమైన ఫంట్స్ ని నిర్దేశించవచ్చు.

ఈ ఉదాహరణలో, అన్ని h1 ఎలిమెంట్స్ కు జార్జియా ఫంట్ ని అమర్చబడింది:

h1 {font-family: Georgia;}

亲自试一试

ఈ నియమం వల్ల, యూజర్ ఏజెంట్ లో జార్జియా ఫంట్ ఇన్స్టాల్ చేయలేదు ఉంటే, h1 ఎలిమెంట్స్ ని ప్రదర్శించడానికి యూజర్ ఏజెంట్ యొక్క డిఫాల్ట్ ఫంట్స్ ని ఉపయోగించబడుతుంది.

ఈ సమస్యను పరిష్కరించడానికి, ప్రత్యేక ఫంట్ పేరు మరియు సాధారణ ఫంట్ కుటుంబాన్ని కలిపి ఉపయోగించవచ్చు:

h1 {font-family: Georgia, సెరిఫ్;}

亲自试一试

రీడర్ జార్జియా ఇన్స్టాల్ చేయలేదు ఉంటే కానీ టైమ్స్ ఫంట్ (సెరిఫ్ ఫంట్ కుటుంబంలో ఒక ఫంట్) ఇన్స్టాల్ చేసినప్పుడు, యూజర్ ఏజెంట్ హ్1 ఎలిమెంట్స్ కు టైమ్స్ ఫంట్ ని ఉపయోగించవచ్చు. జార్జియా మరియు టైమ్స్ ఫంట్స్ పూర్తిగా సరిపోయేది కాదు కానీ, కనీసం సరిపోయేది.

ఈ కారణంగా, మేము అన్ని font-family నియమాలలో ఒక సాధారణ ఫంట్ కుటుంబాన్ని ప్రస్తావించడానికి సిఫార్సు చేస్తున్నాము. ఇది వాడి యూజర్ ఏజెంట్ నియమాలకు సరిపోయే ఫంట్స్ అందించలేకపోయినప్పుడు, ఒక కాండిడేట్ ఫంట్స్ ని ఎంచుకోవడానికి ఒక మార్గాన్ని అందిస్తుంది.

మీరు ఫంట్స్ అన్నికి చాలా తెలుసుకున్నారేమో, అప్పుడు ప్రదత్త ఎలిమెంట్స్ కు సమానమైన ఫంట్స్ ఒక శ్రేణి ని నిర్దేశించవచ్చు. ఇది చేయడానికి, ఆ ఫంట్స్ ను ప్రాధాన్యత క్రమంలో వరుసలో కూడిపెట్టి, కామస్ తో జోడించాలి:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

亲自试一试

ఈ జాబితా ప్రకారం, యూజర్ ఏజెంట్ ఈ ఫాంట్లను ప్రకటించిన క్రమంలో శోధిస్తుంది. జాబితాలో అన్ని ఫాంట్లు లభించకపోతే, సాధారణంగా లభించే serif ఫాంట్ని ఎంచుకుంటుంది.

కుట్టుకుల ఉపయోగం

మీరు ఏదైనా గమనించారా, పైన ఉన్న ఉదాహరణలో కుట్టుకులు ఉపయోగించబడాయి. ఫాంట్ పేరులో ఒక లేదా మంచి సంఖ్యలు ఉన్నప్పుడు (ఉదాహరణకు New York), లేదా ఫాంట్ పేరులో # లేదా $ వంటి చిహ్నాలు ఉన్నప్పుడు, font-family ప్రకటనలో కుట్టుకులు జరిగించాలి.

ఏదైనా కుట్టుకులు లేదా ద్వికుట్టుకులు అంగీకరించబడతాయి. కానీ, ముఖ్యంగా font-family అటీబ్యూట్ హెచ్చరించబడిన స్టైల్ అటీబ్యూట్లో ఉంటే, ఆ అటీబ్యూట్ లో ఉపయోగించబడని కుట్టుకులను ఉపయోగించాలి:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

亲自试一试

ఫాంట్ శైలి

font-style అటీబ్యూట్అధికంగా స్లాంటిక్ టెక్స్ట్ నియమించడానికి ఉపయోగిస్తారు.

ఈ అటీబ్యూట్ మూడు విలువలు కలిగి ఉంటుంది:

  • normal - టెక్స్ట్ సాధారణ రూపంలో ప్రదర్శించబడుతుంది
  • italic - టెక్స్ట్ ఇటిక్ రూపంలో ప్రదర్శించబడుతుంది
  • oblique - టెక్స్ట్ పక్కా సిద్ధించిన రూపంలో ప్రదర్శించబడుతుంది

实例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

亲自试一试

italic మరియు oblique యొక్క తేడా

font-style చాలా సాధారణం: normal టెక్స్ట్, italic టెక్స్ట్ మరియు oblique టెక్స్ట్ మధ్య ఎంచుకోవడానికి ఉపయోగిస్తాయి. ఏకైకంగా కొంచం క్లిష్టం ఇటిక్ టెక్స్ట్ మరియు oblique టెక్స్ట్ మధ్య తేడా తెలుపడం.

ఇటిక్ (italic) ఒక సాధారణ ఫాంట్ శైలి, ప్రతి అక్షరం యొక్క నిర్మాణానికి కొన్ని చిన్న మార్పులు చేయడం ద్వారా మార్పు దృష్టిని ప్రదర్శిస్తుంది. ఇది వేరేది, oblique టెక్స్ట్ అనేది సాధారణ నిలువు టెక్స్ట్ యొక్క కొన్ని పక్కా సిద్ధించిన విధం.

సాధారణ పరంగా, italic మరియు oblique టెక్స్ట్ వెబ్ బ్రౌజర్లో పూర్తిగా ఒకే విధంగా కనిపిస్తాయి.

ఫాంట్ మార్పు

font-variant అటీబ్యూట్చిన్న కేప్స్ సెట్ చేయవచ్చు.

చిన్న కేప్స్ సాధారణ కేప్స్ కాదు మరియు చిన్న అక్షరాలు కాదు, ఈ అక్షరాలు వేర్వేరు పరిమాణం కేప్స్ ఉపయోగిస్తాయి.

实例

p {font-variant:small-caps;}

亲自试一试

字体加粗

font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

实例

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

亲自试一试

ఫంట్ సైజ్

font-size అట్రిబ్యూట్పాఠం సైజ్ సెట్ చేయండి.

వెబ్ డిజైన్ రంగంలో పాఠం సైజ్ నియంత్రణ సామర్థ్యం ముఖ్యం, కానీ మీరు పారాగ్రాఫ్స్ ను హెడింగ్స్ వలె కనిపించేలా పాఠం సైజ్ మార్పులు చేయకూడదు లేదా హెడింగ్స్ ను పారాగ్రాఫ్స్ వలె కనిపించేలా పాఠం సైజ్ మార్పులు చేయకూడదు.

ఎల్లప్పుడూ సరైన హెడింగ్ టాగ్స్ వాడండి, ఉదాహరణకు <h1> - <h6> టాగ్స్ వాడి మీదట హెడింగ్స్ మార్కర్చ్ చేయండి, <p> టాగ్స్ వాడి మీదట పేరాగ్రాఫ్స్ మార్కర్చ్ చేయండి.

font-size విలువలు అబ్సూల్యూట్ లేదా రెలేటివ్ విలువలు ఉంటాయి.

అబ్సూల్యూట్ విలువలు:

  • పాఠాన్ని నిర్దేశిత సైజ్లో సెట్ చేయండి
  • అన్ని బ్రౌజర్లలో పాఠం సైజ్ మార్పులు చేయడానికి వినియోగదారులకు అనుమతించకుండా ఉండాలి (ఉపయోగింపును అవగాహనలో ఉంచండి)
  • అబ్సూల్యూట్ సైజ్ అవుట్‌పుట్ ఫిజికల్ సైజ్ నిర్ణయించడానికి ఉపయోగపడుతుంది

సంబంధిత సైజ్:

  • చుట్టూ ఉన్న మూలకాలకు సంబంధించి సైజ్ సెట్ చేయండి
  • బ్రౌజర్‌లో పాఠం సైజ్ మార్పులు చేయడానికి వినియోగదారులకు అనుమతించండి

గమనిక:మీరు ఫంట్ సైజ్ నిర్ణయించకపోతే, సాధారణ పాఠం (ఉదాహరణకు పేరాగ్రాఫ్స్) యొక్క డిఫాల్ట్ సైజ్ 16 పిక్సెల్స్ (16px=1em) ఉంటుంది.

పిక్సెల్స్ వాడి ఫంట్ సైజ్ సెట్ చేయండి

పిక్సెల్స్ ద్వారా పాఠం సైజ్ సెట్ చేయడం ద్వారా పాఠం సైజ్ పూర్తిగా నియంత్రించవచ్చు:

实例

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

亲自试一试

ఫైర్ఫాక్స్, చ్రోమ్, మరియు సఫారీలో, పైన పేర్కొన్న ఉదాహరణల పాఠం సైజ్ మార్పులు చేయవచ్చు, కానీ ఇంటర్నెట్ ఎక్స్‌లూజర్‌లో చేయలేదు.

బ్రౌజర్ మేజక్స్ ద్వారా పాఠం సైజ్ మార్పులు చేయవచ్చు, కానీ ఇది మొత్తం పేజీ సైజ్ మార్పులు చేయడమే కాదు, పాఠం మాత్రమే కాదు.

em వాడి ఫంట్ సైజ్ సెట్ చేయండి

ఇంటర్నెట్ ఎక్స్‌లూజర్‌లో పాఠం మార్పులు చేయలేక పోవడాన్ని నివారించడానికి, అనేక డెవలపర్లు em ఇ్యూనిట్స్ వాడుతారు.

W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

实例

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

亲自试一试

在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

实例

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

亲自试一试

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

CSS 字体实例：

设置文本的字体
本例演示如何设置文本字体。
设置字体尺寸
本例演示如何设置字体尺寸。
设置字体风格
本例演示如何设置字体风格。
设置字体的异体
本例演示如何设置字体的异体。
设置字体的粗细
本例演示如何设置字体的粗细。
所有字体属性在一个声明之内
本例演示如何使用简写属性将字体属性设置在一个声明之内。

CSS 字体属性

属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。