సిఎస్ఎస్ ఫండ్ సైజ్

字体大小

font-size 属性设置文本的大小。

在网页设计中,能够管理文本大小很重要。但是,不应使用调整字体大小来使段落看起来像标题,或是使标题看起来像段落。

请始终使用正确的 HTML 标签,例如

-

用于标题,而

仅用于段落。

font-size 值可以是绝对或相对大小。

అబ్సూల్యూట్ పరిమాణం:

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

సంబంధిత పరిమాణం:

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

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

పిక్సెల్స్ లో ఫంట్ పరిమాణాన్ని సెట్ చేయండి

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

ఉదాహరణ

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

స్వయంగా ప్రయత్నించండి

సూచన:పిక్సెల్స్ ను ఉపయోగించినప్పుడు, మొత్తం పేజీ పరిమాణాన్ని సరికూర్చడానికి స్కేలింగ్ టూల్స్ ను ఉపయోగించవచ్చు.

em లో ఫంట్ పరిమాణాన్ని సెట్ చేయండి

వినియోగదారులు పాఠం పరిమాణాన్ని సరికూర్చడానికి (బ్రౌజర్ మెనూలో), అనేక డెవలపర్లు em కు బదులుగా పిక్సెల్స్ ను ఉపయోగిస్తారు.

W3C సిఫారసు ప్రకారం em పరిమాణాన్ని ఉపయోగించండి.

1em అనేది ప్రస్తుత ఫంట్ పరిమాణం. బ్రౌజర్లలో మూల పాఠం పరిమాణం 16px. అందువల్ల, మూల పరిమాణం 1em అనేది 16px.

పిక్సెల్స్ ను em కు మార్చడానికి ఈ ఫార్ములాను ఉపయోగించవచ్చు: pixels/16=em。

ఉదాహరణ

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

స్వయంగా ప్రయత్నించండి

పై ఉదాహరణలో, em యొక్క పాఠం పరిమాణం పైన ఉన్న ఉదాహరణలో పిక్సెల్స్ పరిమాణంతో సమానం. కానీ, em పరిమాణాన్ని ఉపయోగించినప్పుడు, అన్ని బ్రౌజర్లలో పాఠం పరిమాణాన్ని సరికూర్చవచ్చు.

దురదర్శనంగా, పాతవ్యవస్థలు ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ కు ఇప్పటికీ సమస్యలు ఉన్నాయి. పాఠం పెంచినప్పుడు అది తప్పనిసరిగా పెద్దది కాగా, పాఠం చిన్నది చేసినప్పుడు చిన్నది అవుతుంది.

ప్రత్యేకంగా పరిమాణం మరియు Em యొక్క కలయికను ఉపయోగించండి

ఉదాహరణ

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

స్వయంగా ప్రయత్నించండి

我们的代码目前运行良好!它在所有浏览器中显示相同的文本大小,并允许所有浏览器缩放或调整文本大小!

响应式字体大小

可以使用 vw 单位设置文本大小,它的意思是“视口宽度”("viewport width")。

这样,文本大小将遵循浏览器窗口的大小,请调整浏览器窗口的大小,以查看字体大小如何缩放:

ఉదాహరణ

<h1 style="font-size:10vw">హెల్లో వరల్డ్</h1>

స్వయంగా ప్రయత్నించండి

వీక్వియుమ్ (Viewport) అనేది బ్రౌజర్ విండో పరిమాణం. 1vw = వీక్వియుమ్ వెడల్పుని 1%. వీక్వియుమ్ 50 సెంటీమీటర్లు వెడల్పు ఉంటే, 1vw అనేది 0.5 సెంటీమీటర్ అవుతుంది.