Game Development Reference
In-Depth Information
Some significant CSS properties
If you want to learn some basic CSS properties, we recommend you follow some of the resources listed at
the end of this chapter. For now, we'll concentrate on some of the more advanced and indispensable
features for games.
Note
Some of the upcoming features we'll cover still need a vendor prefix to work
properly in every browser. For some CSS properties, Firefox requires the -moz- prefix,
Chrome and Safari requires the -webkit- prefix, and Opera requires the -o- prefix. These
prefixes are temporarily required until the specification's final standardization.
Web fonts
Web fonts are perhaps the most indispensable feature that you will need for your game. You can use your
own fonts and attach a font file to improve text displays.
The
@font-face
rule allows for linking to fonts. To use it, you need to define a
src
property to link the
related font resource. Typically for a link, you will use
url()
.
Next, you have to assign some “character” to the font context; usually it is a
font-family
, but also a
font-
style
, or a
font-weight
, and so forth. Then if you define these properties anywhere in your CSS code, the
selected elements will have this font.
In our chess game, we will use a custom true type font,
Chewy.ttf
, which is placed in the same directory of
our CSS file and linked to the “
body
” selector (see Listing 3-4). Hence, all our pages will use this font by
default (because “
body
” is the highest selector, after
html
).
Listing 3-4.
Using Chewy.ttf
/* Defining a "Chewy" font linked to Chewy.ttf */
@font-face {
src: url(Chewy.ttf);
font-family: Chewy;
}
/* Using the "Chewy" font */
body {
font-family: Chewy, arial, serif;
}
Note
Google Fonts is a cool tool that can help you to select the perfect font for your
