CSS @font-face rule
ການກໍານົດ ແລະ ການນໍາໃຊ້
ຜ່ານການໃຊ້ @font-face rule ຜູ້ອອກແບບເວັບໄຊບໍ່ຕ້ອງມີຄອມພິດ "ຄວາມປອດໄພ".
ໃນ @font-face rule ທ່ານຕ້ອງກຳນົດຊື່ຄອມພິດຢູ່ທັງກັນ (ຕົວຢ່າງ myFirstFont) ແລະ ໄດ້ປະກົດຄວາມທີ່ສາມາດຊອກມາຄອມພິດ。
ຄຳແນະນຳ：URL ຄອມພິດໃຊ້ມີຄຳໜັກສີຫຼຸດ。ຄຳໜັກສີໃຫຍ່ອາດມີຜົນຂັດຄ່າໃນ IE!
ສຳລັບທີ່ຈະໃຊ້ຄອມພິດສຳລັບປະກອບປະກອບ HTML，ກຳນົດຊື່ຄອມພິດໃນຂໍ້ມູນ font-family (myFirstFont):
div {
font-family: myFirstFont;
}
ອີງຕາມອີກ:
CSS 教程：CSS Web 字体
实例
ກຳນົດຄອມພິດຊື່ "myFirstFont" ແລະ ກຳນົດ URL ທີ່ສາມາດຊອກມາຄອມພິດ:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
ຂ້ອຍຈະຫາຫຼາຍ TIY 实例ໃນກ້ອງລຸ່ມດ້ານກ້າວລົງບັນຫາດັ່ງກ່າວ。
ວິທະຍານ CSS
@font-face {
font-properties
}
| ການອະທິບາຍຄອມພິດ | ຄູ່ມູນ | ການອະທິບາຍ |
|---|---|---|
| font-family | name | ຄວນມີ。ກຳນົດຊື່ຄອມພິດ。 |
| src | URL | ຄວນມີ。ກຳນົດ URL ຂອງຄອມພິດດັບປະຕິບັດລົງມາຂອງຄອມພິດ。 |
| 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 | ບໍ່ສາມາດສະໜັບສະໜູນ | ບໍ່ສາມາດສະໜັບສະໜູນ | ບໍ່ສາມາດສະໜັບສະໜູນ | 3.2 | ບໍ່ສາມາດສະໜັບສະໜູນ |
| EOT | 6.0 | ບໍ່ສາມາດສະໜັບສະໜູນ | ບໍ່ສາມາດສະໜັບສະໜູນ | ບໍ່ສາມາດສະໜັບສະໜູນ | ບໍ່ສາມາດສະໜັບສະໜູນ |
* Edge ແລະ IE: ຮູບແບບມີສະຖານະຜົນທີ່ດີພຽງແຕ່ຕອບຕາມທີ່ໄດ້ກະກຽມເປັນ "installable"
* Firefox：ເປັນທີ່ຫລຸດລົງໂດຍການສະເໝີໄດ້ (ຕ້ອງການການກະກຽມ flag ເປັນ "true" ຈິ່ງຈະນຳໃຊ້ WOFF2)
