CSS వెబ్ ఫంట్

CSS @font-face నియమం

వెబ్ ఫంట్స్ వెబ్ డిజైనర్లకు వినియోగదారుల కంప్యూటర్స్లో ఇన్స్టాల్ లేని ఫంట్స్ ఉపయోగించడానికి అనుమతిస్తాయి.

మీరు ఉపయోగించాలనుకునే ఫంట్స్ని కనుగొన్నప్పుడు లేదా కొనుగోలు చేసినప్పుడు, ఫంట్ ఫైల్ని మీ వెబ్ సర్వర్పై చేర్చడం ద్వారా, అది అవసరమైనప్పుడు యూజర్స్ కు ఆటోమేటిక్‌గా డౌన్లోడ్ అవుతుంది.

మీ “స్వంత” ఫంట్స్ CSS లో @font-face నియమాలలో నిర్వచించబడింది.

వివిధ ఫంట్ ఫార్మాట్స్

TrueType ఫంట్ (TTF)

TrueType అనేది 1980 ల చివరలో Apple మరియు Microsoft ద్వారా అభివృద్ధి చేయబడిన ఫంట్ ప్రమాణం. TrueType అనేది Mac OS మరియు Microsoft Windows ఆపరేటింగ్ సిస్టమ్స్లో అత్యంత వినియోగించబడే ఫంట్ ఫార్మాట్.

OpenType ఫంట్ (OTF)

OpenType స్కేలబుల్ కంప్యూటర్ ఫంట్ ఫార్మాట్. దానిని TrueType పైన నిర్మించబడింది మరియు మైక్రోసాఫ్ట్ యొక్క రజిస్టర్డ్ ట్రేడ్ మార్క్. ప్రస్తుతం, OpenType ఫంట్స్ ప్రధాన కంప్యూటర్ ప్లాట్ఫారమ్స్లో విస్తృతంగా ఉపయోగించబడుతున్నాయి.

వెబ్ ఓపెన్ ఫంట్ ఫార్మాట్ (WOFF)

WOFF వెబ్లకు ఉపయోగపడే ఫంట్ ఫార్మాట్. ఇది 2009 లో అభివృద్ధి చేయబడింది మరియు ప్రస్తుతం W3C నిర్దేశించిన ప్రమాణంగా ఉంది. WOFF అంతర్గతంగా OpenType లేదా TrueType తో కంప్రెషన్ మరియు ఇతర మెటాడాటా కలిగిన ఫంట్ లేదా TrueType. లక్ష్యం ఫంట్స్ పంపిణీని బ్యాండ్ విడ్థం కంటే తక్కువ వెబ్ నెట్వర్క్స్ లో సర్వర్ నుండి క్లయింట్ కు జరిగే విధంగా మద్దతు ఇవ్వడం.

వెబ్ ఓపెన్ ఫంట్ ఫార్మాట్ (WOFF 2.0)

TrueType/OpenType ఫంట్స్ WOFF 1.0 కంప్రెషన్ కంటే మంచి కంప్రెషన్ అందిస్తాయి.

SVG ఫంట్/స్పూర్తి

SVG ఫంట్స్ స్పూర్తిలో పఠించబడే టెక్స్ట్ని చేయడానికి SVG ను ఉపయోగించవచ్చు. SVG 1.1 ప్రామాణికం ఫంట్ మాడ్యూల్ను నిర్వచించింది, దాని ద్వారా SVG పత్రంలో ఫంట్స్ సృష్టించవచ్చు. మీరు కూడా CSS ను SVG పత్రాలపై వాడవచ్చు, మరియు @font-face నియమం SVG పత్రంలో ఉన్న టెక్స్ట్పై వాడవచ్చు.

ఎంబెడ్డెడ్ ఓపెన్‌టైప్ ఫంట్స్ (EOT)

EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。

对字体格式的浏览器支持

表格中的数字注明了完全支持该字体格式的首个浏览器版本。

字体格式
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 不支持 不支持 不支持 不支持

*IE：该字体格式仅在设置为 "installable" 时有效。

*Firefox：默认情况下不支持，但可以启用（需要将标志设置为 "true" 才能使用 WOFF2）。

使用您需要的字体

在 @font-face 规则中：首先定义字体的名称（例如 myFirstFont），然后指向该字体文件。

提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）：

实例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}

亲自试一试

使用粗体文本

您必须添加另一条 @font-face 规则，其中包含粗体文本的描述符：

实例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

亲自试一试

文件 "sansation_bold.woff" 是另一个字体文件，其中包含 Sansation 字体的粗体字符。

每当带有 "myFirstFont" 字体族的一段文本应呈现粗体时，浏览器都会使用它。

这样，您就可以为同一字体设置许多 @font-face 规则。

CSS 字体描述

下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）：

描述符 值 描述
font-family name 必需。定义字体名称。
src URL 必需。定义字体文件的 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 ఆప్షనల్. ఫాంట్ సపోర్ట్ చేసే యునికోడ్ అక్షరం పరిధిని నిర్వచిస్తుంది. డిఫాల్ట్ విలువ ఉంది "U+0-10FFFF".