ກົດລະບຽບ @font-face
- ກັບຄືນບ່ອນຫຼັງ font
- ກັບໄປບ່ອນໜ້າ font-family
ການກໍານົດ ແລະ ການນໍາໃຊ້
ດ້ວຍ @font-face ຂອງກົດລະບຽບ，ຜູ້ອອກແບບເວັບໄຊບໍ່ຕ້ອງໃຊ້ພາສານ "ຄວາມປອດໄພ" ອີກຫຼາຍຫຼາຍອີກ.
ໃນ @font-face ຂອງກົດລະບຽບ，ທ່ານຕ້ອງກຳນົດຊື່ພາສານກ່ອນທີ່ຈະຂັບເຂົ້າໄປຫາບັນຊີພາສານ (ອີງຕາມ 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 |
|
font-stretch |
| font-style |
|
font-style |
| font-weight |
|
font-weight |
| unicode-range | unicode-range | unicode-range |
ຫນຶ່ງຄວາມນຳໃຊ້ອີກ
ຄວາມນຳໃຊ້
ທ່ານຕ້ອງເພີ່ມຕາມກົດລະບຽບ @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 ກໍ່ໄດ້)
- ກັບຄືນບ່ອນຫຼັງ font
- ກັບໄປບ່ອນໜ້າ font-family
