Typography - Getting The Hang Of Typography

(lu) #1

addition, the smiley version guarantees that the embedded font won՚t be
replaced by one of the locally installed versions of the font.


CSS Options


The option Style Linking groups styles by family. This allows for addressing


the fonts later through the CSS properties font weight and font-


style.


This option will only work properly, if the font family doesn՚t contain more
than the common four styles, i.e. regular, italic, bold and bold italic.
Otherwhise, you should leave the option unchecked so that fonts can be
addressed by independent family names. Last but not least, the option
Base64 Encode embeds web fonts with a base64 encoding into the CSS
code instead of creating a separate font file. As a result the fonts don՚t
appear as font files in the browser՚s cache.


Code Sample


The following example illustrates what your CSS code for @font-face
embedding might look like:


1 @font-face {

(^2) font-family: ̒GraublauWeb՚;
(^3) src: url(՚graublauwebbold-webfont.eot՚);
(^4) src: local(՚☺՚),url(՚graublauwebbold-webfont.woff՚) format(՚woff՚),
(^5) url(՚graublauwebbold-webfont.ttf՚) format(՚truetype՚),
(^6) url(՚graublauwebbold-webfont.svg#webfontDGhCBjc5՚) format(՚svg՚);
7 font-weight: bold;
8 font-style: normal;
9 }

Free download pdf