Game Development Reference
In-Depth Information
As of this writing, Google Chrome, Firefox 3.6, and Microsoft Internet Explorer 9 ac-
cept the
.woff
font files, while Safari, Opera, and Android support the
.ttf
files.
Apple's iOS only supports the
.svg
font files.
Alternatively, you can encode the entire font file into a
Data-URI
string and embed
that into your CSS.
@font-face {
font-family: "Lemon";
src: url("data:font/
opentype;base64,d09GRgABAAAAA...");
}
Note
One great resource for free, open source, web fonts is Google's Web Fonts pro-
ject. There you can find a directly with several hundred different font files that you
can search from and import right into your projects. Each file is hosted on Google
servers, which means that the availability of these fonts is very high and the de-
livery speed is Google fast. What's more, through their service, once you find a
font that you'd like to import into your project, Google provides you with three
options to import it: a standard link
rel="stylesheet"
tag, a CSS
@import
statement, or a JavaScript alternative. Either choice you make, the font file that
eventually gets served to your end users is the exact format that the requesting
browser supports. This way you don't need to specify the multiple
src: url
at-
tributes in your CSS file.
Transitions
CSS transitions is a great and simple way to add that special effect to any existing
website. It is likely that your existing projects already use some sort of state change
to elements based on different events, such as a hover effect, which may cause ele-
ments to change size, color, or position.
By adding a CSS transition attribute to these elements, you can more closely control
the various states between the
original
state and the
final
state. For example,
