CSS 3 Learning-text effects and @font-face

Text effects

For text effects, here are just a few of the properties that are supported by most browsers, namely:

Text-overflow

Text-shadow

Word-break

Word-wrap

Text-overflow

Introduce a White-space property before introducing Text-overflow.

The White-space property is used to describe how to handle whitespace in an element, and you can inherit a value from a parent element.

Desirable values:

Normal default value. Consecutive whitespace characters are merged, including newline characters. When the text fills the box, the line wraps as needed.

nowrap consecutive whitespace characters (including newline characters) are merged, but the text is not wrapped. The text is populated on the same line until the <br> element is encountered.

Pre-contiguous whitespace characters are preserved, and line breaks are encountered when a newline or <br> element encounters it.

Pre-wrap consecutive whitespace characters are preserved, and the text wraps automatically as needed.

Pre-line consecutive whitespace characters are merged (without line breaks), and the text wraps automatically as needed.

Inherit inherits the value from the parent element.

The following table summarizes the behavior of various WHITE-SAPCE values:

	line break	space and tab	text Career
normal	Merge	Merge	Switch
nowrap	Merge	Merge	No career change
pre	Keep	Keep	No career change
pre-wrap	Keep	Keep	Switch
pre-line	Keep	Merge	Switch

To see the effect of text-overflow, you should not wrap the text.

The Text-overflow value:

Clip default value. When the text overflows, trim the overflow portion (cut off).

Ellipsis displays ellipses instead of trimmed text.

String uses the given string to represent the trimmed text. (This value has not been supported by the browser)

Text-shadow

Text-shadow is used to add one or more shadows to the text, the same as the shadow of the border.

This property is a comma-delimited list of shadows, with two or three length values and an optional color value for each shadow. The omitted length value is 0.

Grammar:

Text-overflow:x-shadow Y-shadow blur color;

X-SHADOW specifies the horizontal offset of the shadow relative to the text. If negative, the shadow is on the left side of the text.

Y-SHADOW Specifies the vertical offset of the shadow relative to the text. If negative, the shadow is above the text.

Blur optional,<length> value, default is 0. Specifies the blur distance of the shadow, the larger the value, the greater the blur radius, and the larger the shadow is the more light.

Color is optional, specifying the color of the shadow.

Word-break

This property specifies how a word wraps.

This property allows the browser to implement line breaks in any position.

Desirable values:

Normal default value. Use the browser's default line-wrapping rule.

Break-all allows line wrapping within a word.

Keep-all can only wrap at half-width spaces or hyphens.

Word-wrap

The property has now been renamed to Overflow-wrap. is used to indicate whether a browser allows such words to break line breaks when a string that cannot be separated is too long to fill its package box, to prevent it from overflowing.

Desirable values:

Normal indicates that the line wraps at the end of the regular word.

Break-word表示如果行内没有多余的地方容纳该单词到结尾，则哪些正常的不能被被分割的单词会被强制分割换行。

@font-face

In CSS 3, developers can customize fonts by @font-face.

Grammar:
@font-face {

Font-family:yourfontname;

src: [url () | | | local ()]+ | | Format (str)?;

Srules;

}

By font-family you can give your custom font any name you like, and enclose it in quotation marks.

SRC allows you to load font files that are stored on the server (subject to the same-origin policy), or you can use local fonts. The local () function is used to refer to the native font (the font name is not quoted). When you load a font file on a server, you can use the format () function to specify the appropriate file type for the font file.

There are several types of font files that are supported:

String	Font Format	Common Extensions
"Woff"	WOFF (Web Open Font Format)	. Woff
"TrueType"	TrueType	. ttf
"OpenType"	OpenType	. TTF,. OTF
"Embedded-opentype"	Embedded OpenType	. EoT
"SVG"	SVG Font	. svg,. svgz

The parameters passed into the format () function are one of the first columns in the previous table (as determined by the suffix of the specific reference font file).

Different browsers to the above several font file support situation, specific can see this article.

Srules is a specific font style with the following properties:

Font-variant

Font-stretch

Font-weight

Font-style

Unicode-range

Font-variant

Desirable values

Normal default value. Normal font.

Small-caps font is small caps.

The above two values are defined in CSS 1, and the newly added values in CSS 3 are not supported by the browser.

Font-stretch

Check the data, this property only IE and Firefox support, but no effect.

Unicode-range

The purpose of this property is to tell the browser which parts of the Unicode character system are covered by the font introduced by @font-face, so that the browser only uses that font for characters within that range. When used, the name of the custom font that qualifies the character range is placed at the first position of the corresponding element font-family. See article 5th in the Resources section specifically.

Resources

1, W3school

2. MDN

3. Official regulations

4, CSS3 @font-face

5, the magical Unicode-range realizes the font mix and match

CSS 3 Learning-text effects and @font-face