CSS Web Fonts
Die CSS @font-face-reël
Weblettertipes laat webontwerpers toe om lettertipes te gebruik wat nie op die gebruiker se rekenaar geïnstalleer is nie.
Wanneer jy die font gevind/gekoop het wat jy wil gebruik, sluit net die fontlêer op jou webbediener in, en dit sal outomaties na die gebruiker afgelaai word wanneer nodig.
Jou "eie" lettertipes word binne die CSS- @font-facereël gedefinieer.
Verskillende lettertipeformate
TrueType Fonts (TTF)
TrueType is 'n fontstandaard wat in die laat 1980's ontwikkel is deur Apple en Microsoft. TrueType is die mees algemene fontformaat vir beide die Mac OS en Microsoft Windows-bedryfstelsels.
OpenType Fonts (OTF)
OpenType is 'n formaat vir skaalbare rekenaarlettertipes. Dit is gebou op TrueType, en is 'n geregistreerde handelsmerk van Microsoft. OpenType-lettertipes word vandag algemeen op die belangrikste rekenaarplatforms gebruik.
Die Web Open Font Format (WOFF)
WOFF is 'n fontformaat vir gebruik in webblaaie. Dit is in 2009 ontwikkel en is nou 'n W3C-aanbeveling. WOFF is in wese OpenType of TrueType met kompressie en bykomende metadata. Die doel is om lettertipeverspreiding van 'n bediener na 'n kliënt oor 'n netwerk met bandwydtebeperkings te ondersteun.
Die Web Open Font Format (WOFF 2.0)
TrueType/OpenType-font wat beter kompressie bied as WOFF 1.0.
SVG-lettertipes/vorms
SVG-lettertipes laat SVG toe om as glife gebruik te word wanneer teks vertoon word. Die SVG 1.1-spesifikasie definieer 'n fontmodule wat die skepping van fonts binne 'n SVG-dokument moontlik maak. Jy kan ook CSS op SVG-dokumente toepas, en die @font-face-reël kan op teks in SVG-dokumente toegepas word.
Ingebedde OpenType Fonts (EOT)
EOT-lettertipes is 'n kompakte vorm van OpenType-lettertipes wat deur Microsoft ontwerp is vir gebruik as ingebedde lettertipes op webblaaie.
Blaaierondersteuning vir lettertipeformate
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 |
*IE: Die lettertipe-formaat werk net as dit gestel is om "installeerbaar" te wees.
Gebruik die lettertipe wat u wil hê
In die @font-facereël; definieer eers 'n naam vir die font (bv. myFirstFont) en wys dan na die fontlêer.
Wenk: Gebruik altyd kleinletters vir die font-URL. Hoofletters kan onverwagte resultate in IE gee.
Om die lettertipe vir 'n HTML-element te gebruik, verwys na die naam van die lettertipe (myFirstFont) deur die font-familyeiendom:
Voorbeeld
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Gebruik vetgedrukte teks
Jy moet nog 'n @font-facereël byvoeg wat beskrywings vir vetdruk bevat:
Voorbeeld
@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-facereëls vir dieselfde lettertipe hê.
CSS-lettertipebeskrywings
Die volgende tabel lys al die lettertipebeskrywers wat binne die @font-facereël gedefinieer kan word:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| 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 is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |