CSS @font-face Rule
Pagsasaayos at Paggamit
Sa pamamagitan ng paggamit ng @font-face na patakaran, ang Web Designer ay hindi na kailangang gamitin anumang "sa seguridad ng network" na font.
Sa @font-face na patakaran, dapat mo muna mag-definir ang pangalan ng font (halimbawa, myFirstFont) bago ito mapunta sa font file.
Mga Tipan:Ang URL ng font ay gumagamit ng maliliit na titik. Ang malaki na titik ay maaaring magdulot ng di inaasahang resulta sa IE!
Upang gamitin ang font sa HTML na elemento, manggagamit ang font-family na propetya upang ipakita ang pangalan ng font (myFirstFont):
div {
font-family: myFirstFont;
}
Bilang karagdagan:
CSS Tutorial:CSS Web 字体
实例
I-definir ang isang font na may pangalan na "myFirstFont" at i-utos ang URL kung saan maaari itong mahanap:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Maaari mong mahanap ang mga halimbawa ng TIY sa ibaba ng pahina.
CSS Syntax
@font-face {
font-properties
}
| Font descriptor | Halaga | Ipaliwanag |
|---|---|---|
| font-family | name | Wag maglagda. I-definir ang pangalan ng font. |
| src | URL | Wag maglagda. I-definir ang URL ng pag-downlad ng font. |
| 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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
* Edge 和 IE: 字体格式仅在设置为 "installable" 时有效
* Firefox：默认情况下是禁用的，但可启用（需要将 flag 设置为 "true" 才能使用 WOFF2）。
