CSS @font-face Reël
Voorbeeld
Spesifiseer 'n lettertipe genaamd "myFirstFont", en spesifiseer die URL waar dit gevind kan word:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Met die @font-facereël hoef webontwerpers nie meer een van die "webveilige" lettertipes te gebruik nie.
In die @font-facereël moet jy eers 'n naam vir die font definieer (bv. myFirstFont), en dan na die fontlêer wys.
Om die font vir 'n HTML-element te gebruik, verwys na die naam van die font (myFirstFont) deur die font-family-eienskap:
div
{
font-family: myFirstFont;
}
Blaaierondersteuning
Die @font-facereël word ondersteun in Edge, Chrome, Firefox, Safari en Opera.
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die fontformaat ten volle ondersteun.
| Font format | |||||
|---|---|---|---|---|---|
| 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 |
*Die lettertipe-formaat werk slegs as dit gestel is om "installeerbaar" te wees.
Sintaksis
@font-face
{
font-properties
}
| Font descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines the name of the font. |
| src | URL | Required. Defines the URL(s) where the font should be downloaded from |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default value is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
Meer voorbeelde
Voorbeeld
Jy moet nog 'n @font-face-reël byvoeg wat beskrywings vir vetdruk bevat:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Die lêer "sansation_bold.woff" is 'n ander fontlêer wat die vetdruk karakters vir die Sansation font bevat.
Blaaiers sal dit gebruik wanneer 'n stuk teks met die lettertipe-familie "myFirstFont" as vetgedruk moet word.
Op hierdie manier kan jy baie @font-face reëls vir dieselfde font hê.
Verwante bladsye
CSS handleiding: CSS Web Fonts