If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.) |
CSS Rules
The @font-face
CSS Rule
- font-family: sans-serif; font-size: 16pt; font-style: normal; font-weight: normal
- font-family: Tuffy; font-size: 16pt; font-style: normal; font-weight: normal
- font-family: Tuffy; font-size: 16pt; font-style: oblique; font-weight: normal
- font-family: Tuffy; font-size: 16pt; font-style: italic; font-weight: normal
- font-family: Tuffy; font-size: 16pt; font-style: normal; font-weight: bold
- font-family: Tuffy; font-size: 16pt; font-style: oblique; font-weight: bold
- font-family: Tuffy; font-size: 16pt; font-style: italic; font-weight: bold
There are four @font-face
rules, one for each font file. The extra font-style: oblique
styles in the examples look like the italic styles, but are actually a slanted transformation of the glyphs from the normal upright type face referenced in the font-style: normal
@font-face
rules. In other font faces, particularly serif fonts, the true italic font style may have a different appearance from the oblique font style.
Some places to get fonts:
- The Tuffy font used in the examples here are available at Thatcher's Fonts
- Typodermic Fonts has commercially available fonts and an older set of Larabie Fonts
The @import
CSS Rule
An @import
rule specifies the URL of an external style sheet to be imported. It can also include a media query expression consisting of a media type, one or more parenthesized media feature expressions, or both, separated by the conjunction and
:
@import url(style-sheet-url) media-type and (media-feature:value);
The media query expressions that can be used in @import
rules are the same as the ones used in @media rules.
The @media
Rule
A @media
rule can include one or more media query expressions, separated by commas, each consisting of a media type, one or more parenthesized media feature expressions, or both, separated by the conjunction and
:
@media media-type and (media-feature:value) { ... }
The styles inside the braces will only be applied in situations that match the media query.
Media Types in Media Queries
Continuous media types
@media braille { ... }
@media screen { ... }
@media speech { ... }
@media tty { ... }
Hybrid (continuous or paged) media types
@media all { ... }
(default)@media handheld { ... }
@media tv { ... }
Paged media types
@media embossed { ... }
@media print { ... }
@media projection { ... }
These media query values can also be used in the @import CSS Rule, the media
attribute of the <style> tag and the media
attribute of the <link> tag.
Media Features in Media Queries
- width, height
- device-width, device-height
- orientation
- aspect-ratio
- device-aspect-ratio
- color
- color-index
- monochrome
- resolution
- scan
- grid