The file "sansation_bold.woff" is another font file, which contains the bold characters for the Sansation font. Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold. Adding another @font-face rule leads to descriptors for the bold text. You can have many @font-face rules for the same font:
HTML file: | Displayed by browser: |
---|---|
<style>
@font-face { font-family: myFirstFont; src: url(fonts/sansation_light.woff); } @font-face { font-family: myFirstFont; src: url(fonts/sansation_bold.woff); font-weight: bold; } div { font-family: myFirstFont; } </style> <body> <div> With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts. </div> </body> |
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
|
Note: Internet Explorer 8 and earlier, do not support the @font-face rule.