WikiGalaxy
CSS Fonts
Font Family
The font-family property specifies the font for an element. You can list multiple fonts separated by commas, where the browser will use the first available font.
Font Size
The font-size property sets the size of the text. It can be defined in various units such as pixels (px), em, rem, percentages, etc.
Font Weight
The font-weight property defines the thickness of the font. Common values include normal, bold, bolder, lighter, and numeric values like 100, 200, etc.
Font Style
The font-style property allows you to set the style of the font, such as normal, italic, or oblique.
Font Variant
The font-variant property controls the use of alternate glyphs, such as small-caps.
Line Height
The line-height property sets the height of a line box. It's crucial for improving readability and controlling the spacing between lines of text.
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
font-variant: small-caps;
line-height: 1.5;
}
Text Transformation
The text-transform property is used to change the case of text, with options like uppercase, lowercase, and capitalize.
Text Decoration
The text-decoration property adds decorative elements like underlines, overlines, and line-throughs to text.
Letter Spacing
The letter-spacing property adjusts the space between characters, which can enhance readability or create stylistic effects.
Word Spacing
The word-spacing property modifies the space between words, helping to improve text layout and readability.
Text Shadow
The text-shadow property applies shadows to text, adding depth and emphasis.
Font Loading
Managing font loading is crucial for performance. Use the @font-face rule to load custom fonts efficiently.
h1 {
text-transform: uppercase;
text-decoration: underline;
letter-spacing: 2px;
word-spacing: 5px;
text-shadow: 2px 2px 5px #000;
}
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2');
}
Console Output:
Styled Text with Custom Font and Effects
