About the analysis of CSS3 font attributes

Font attributes:

Font-family: {font-family: name}

{font-family: cursive| fantasy| monospace| serif| sans- serif}

Font-size: {font-size: numerical value | inherit |xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length}

Font-style: {font-style: normal | italic | oblique | inherit}

Font-weight: {font-weight: 100-900 | bold | bolder | lighter | normal}

Font-variant: {font-variant: normal | small-caps | inherit}

Font composite attribute font: {font: font-style font-variant font-weight font-size font-family}

font-size and font-family must appear in the font attribute, and in a fixed order . Font-style, font-variant, and font-weight can be freely exchanged.

Font color color: {color: name | rgb | hex | hsl | hsla | rgba}

Text advanced style

Shadow texttext-shadow: {text-shadow: none | none | [,] * or none | [, ]* }

Text -shadow has four values. The first value represents the horizontal displacement of the shadow, which can be positive or negative; the second value represents the vertical displacement of the shadow, which can be positive or negative; the third value represents the blur radius of the shadow, which is optional. ;The fourth value represents the shadow color value, which is optional.

Overflow texttext-overflow is used to define whether to display an omission mark when the text overflows, that is, to define the overflow method of omitting text. It does not have other style attribute definitions. To achieve the effect of producing an ellipse when overflowing, you must also define: force text to be displayed in one line (white-space:nowrap) and overflow content to be hidden (over-flow:hidden). {text-overflow: clip | ellipsis}

Clip: Does not display the omission mark (...), but a simple crop bar (supported by major browsers)

Ellipsis: WhenObject displays an omission mark (...) when the text in the object overflows (girl, Firefox doesn’t support it)

Control line wrappingword-wrap: {word-wrap: normal | break-word}

Normal: Controls line breaks for continuous text

Break-word: Content will break within boundaries, if intra-word breaks are required (word-break ) You can also achieve

Keep the font size unchangedfont-size-adjust: {font-size-adjust: none | number}

None: Default Value, allowing each font in the font sequence to adhere to its own size

Number: Force the same size to be specified for all fonts in the font sequence

Paragraph attributes:

Word spacingword-spacing: {word-spacing: normal | length}

Character spacingletter-spacing: {letter-spacing: normal | length}

Text decorationtext-decoration: {text-decoration: none | underline | blink | overline |line-through}

vertical alignmentvertical-align: {vertical : Attribute value}

Horizontal alignmenttext-align: {text-align: sTextAlign}

Text transformationtext-transform: {text -transform: none | capitalize |uppercase | lowercase}

Text indenttext-indent: {text-indent: length}

Text line heightline -height: {line-height: normal | length}

Handle white-space: {white-space: normal | pre | nowrap | pre-wrap | pre-line}

Text reverse flowunicode-bidianddirection

Unicode-bidi: {Unicode-bidi: normal | bidi-override | embed}

Direction: {direction: ltr | rtl |inherit}

The above is the detailed content of About the analysis of CSS3 font attributes. For more information, please follow other related articles on the PHP Chinese website!