Text and Fonts
@font-face
Purpose: Define a custom font so that it can be used in a web page. The @font-face rule allows you to specify the font name, source (usually a URL), and various variations of the font (such as regular, bold, italic, etc.).
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Reference font-family name */
body {
font-family: 'MyCustomFont', sans-serif;
}font-feature-settings
Purpose: Enable or disable OpenType features in a specific font (such as small caps, ligatures, contextual alternates, etc.). These features are provided by font designers to enhance typography and text expression.
p {
font-family: 'MyOpenTypeFont', sans-serif;
font-feature-settings: 'liga' 1, 'dlig' 1, 'smcp' 0;
}font-kerning
Purpose: Controls kerning between fonts. Kerning is the process of adjusting the space between specific character pairs to improve the aesthetics and legibility of text.
h1 {
font-family: 'MySerifFont', serif;
font-kerning: normal; /* or auto, none */
}font-language-override
Purpose: Override the font language of a specific element to use character shapes or glyph variants designed for a specific language in the font.
span.special-text {
font-family: 'MultilingualFont', sans-serif;
font-language-override: 'ja'; /* Use Japanese glyphs from the font */
}font-size-adjust
Purpose: Maintain the relative sizes of different fonts when they have the same font-size setting. Especially useful when a fallback font is needed when the primary font is not available to avoid changes in text line height due to differences in the fallback font’s x-height (lowercase letter height).
body {
font-family: 'PreferredFont', 'FallbackFont', sans-serif;
font-size-adjust: 0.5; /* Based on the x-height ratio of the preferred font */
}font-stretch
Purpose: Control the degree of font stretching. Only works for fonts that support this feature.
h2 {
font-family: 'StretchableFont', sans-serif;
font-stretch: condensed; /* or ultra-condensed, semi-condensed, normal, semi-expanded, expanded, ultra-expanded */
}font-synthesis
Purpose: Controls whether the browser should synthesize (emulate) missing font weights and italics.
body {
font-family: 'MyFont', sans-serif;
font-synthesis: none; /* or weight style */
}text-decoration-color
Purpose: Sets the color of the text decoration line.
a {
text-decoration: underline;
text-decoration-color: #FF69B4; /* Set the underline to pink */
}text-decoration-line
Purpose: Set the type of text decoration line, which can be a single value or a combination of multiple values.
Optional values:
- none: no decoration line.
- underline: underline.
- overline: overline.
- line-through: delete line.
- blink (non-standard, only supported by some browsers): blinking line.
a {
text-decoration-line: underline overline; /* Set both underline and overline */
}text-decoration-style
Purpose: Set the style of text decoration line.
Optional values:
- solid: solid line.
- double: double line.
- dotted: dotted line.
- dashed: dashed line.
- wavy: wavy line.
a {
text-decoration-line: underline;
text-decoration-style: wavy; /* Set the underline to a wavy line */
}text-decoration-thickness
Purpose: Set the thickness (width) of the text decoration line. Supports length units or percentage values.
a {
text-decoration-line: underline;
text-decoration-thickness: 2px; /* Set the underline thickness to 2 pixels */
}text-emphasis
Set the color, style, and position of the emphasis mark at once. It can accept one or two values, the first value is the style, and the second value is the color.
p {
text-emphasis: filled circle red;
}text-emphasis-color
Set the color of the emphasis mark
p {
text-emphasis-color: purple;
}text-emphasis-position
Set the position of the emphasis mark relative to the character. Two values are accepted, indicating the horizontal and vertical positions respectively.
p {
text-emphasis-position: under right;
}text-emphasis-style
Set the style of the emphasis mark. Optional values are:
none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>
p {
text-emphasis-style: sesame;
}text-indent
Purpose: Set the indent of the first line of text in a block-level element.
p {
text-indent: 2em; /* First line indent 2 character widths */
}text-overflow
Purpose: Controls how text is displayed when it overflows its containing block. Often used in conjunction with the overflow property and the white-space property.
Optional values:
clip: Clip overflow text.
ellipsis: Display an ellipsis (…) to replace overflow text.
.container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}text-shadow
Purpose: Add shadow effect to text.
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Horizontal offset 2px, vertical offset 2px, blur radius 4px, color rgba(0, 0, 0, 0.5) */
}text-transform
Purpose: Control the case of text
Optional values:
- none: No conversion.
- capitalize: Convert the first letter of each word to uppercase.
- uppercase: Convert all to uppercase.
- lowercase: Convert all to lowercase.
h1 {
text-transform: uppercase; /* All texts are converted to uppercase */
}word-break
Purpose: Control the word breaking rules when words are broken.
Optional values:
- normal: Use the normal word breaking rules. For CJK (Chinese, Japanese, and Korean) texts, follow the word breaking rules of their respective languages; for non-CJK texts, only break words at allowed line breaks.
- break-all: Words can be broken at any character, even at non-allowed line breaks in non-CJK texts.
- keep-all: For non-CJK texts, only break words at allowed line breaks; for CJK texts, word breaking is not allowed inside words.
.container {
word-break: break-all; /* Break at any character */
}word-wrap (or overflow-wrap)
Purpose: Controls whether long words or consecutive characters are allowed to wrap in a container.
Optional values:
- normal: Wrap at allowed line breaks, and try to avoid wrapping inside words.
- break-word (or anywhere): If a long word or a sequence of consecutive characters does not have a suitable line break point, allow wrapping inside a word to prevent the content from exceeding the container boundary.
.container {
overflow-wrap: break-word; /* Allow wrapping inside a word to prevent content from overflowing */
}The word-wrap property was renamed overflow-wrap in CSS3, but for compatibility, many browsers still support word-wrap. When writing code, it is recommended to use overflow-wrap, but you can also declare both at the same time to ensure wide compatibility:
.container {
overflow-wrap: break-word;
word-wrap: break-word; /* Compatibility considerations */
}
