Introduction to font-related attributes in CSS3

This article brings the content is about the CSS3 in the text and font-related attributes introduced, there is a certain reference value, the need for friends can refer to, I hope to help you.

1 Text-shadow Properties

(1) function

Adds a shadow effect to the text on the page.

(2) How to use

Text-shadow:length length length color (the shadow leaves the horizontal distance of the text, the longitudinal distance, the blur radius of the shadow, the color of the shadow)

Attention:

the shadow leaves the horizontal and vertical distance of the text : must be specified, and a negative value can be specified.

Blur radius of Shadow : The range of blur that represents the shadow outward blur. The larger the radius value, the greater the range of shadows that blur outwards. Optional parameter, when omitted, defaults to 0, which indicates that the shadow does not blur outward.

Shadow color : Optional parameter, not specified when the color attribute is used in CSS2 (actual Firefox and opera, others do not support omitting, save is not drawn), CSS3 uses the default color specified by the browser.

(4) Specify multiple shadows

text-shadow:10px 10px #f39800,                         40px 35px #fff100,                        70px  60px #c0ff00;

Only Chrome, Firefox, and opera browsers support this feature.

(3) Browser support

So far: This property is supported by Safari, Chrome, Firefox, and opera browsers.

text-shadow:5px 5px 5px Gray; (Gray Shadow, shadows leave the direction of the molecule is 5 pixels)

2 Word-break Properties

(1) Function: let text wrap

(2) Value: Normal (use browser default line wrapping rules), Keep-all (can only wrap at half-width spaces or hyphens), Break-all (allow line wrapping within words)

(3) Browser support

So far: This property is supported by Safari, Chrome, ie browser.

3 Word-wrap Properties

(1) Function: let long word and URL address wrap.

(2) Value: Normal (browser default processing), Break-word (line wrapping within a long word or URL address)

(3) Browser support: all browsers.

4 Web Font and @font-face properties

(1) Function: Displays the server-side font on the Web page .

(2) How to use:

@font-face{    Font-famliy:webfont;    src:url (' FONT/FONTIN_SANS_R_45B.OTF ')  format ("OpenType");   font-weitht:normal;}h1{    Font-family:webfont;}

5 Font-size-adjust Properties

(1) Function: change the font type and keep the font size unchanged

(2) How to use:

Aspect value (scale value): Can be used to keep the font size unchanged when modifying fonts to other fonts. constant

Calculation method: The X-height value (the height, in pixels) of the lowercase x written in the font, divided by the size of the font.

p{   font-size:16px;   font-famliy:times New Roman;   font-size-adjust:0.46 (aspect value)}

(3) How the browser calculates the aspect value:

After you specify the aspect value in the Font-size-adjust property and modify the font to a different font, the browser calculates a formula for the modified font size:

c = (A/b) s

A: Represents the aspect value of the font actually used, B: represents the aspect value of the font before the modification,

S: Indicates the font size specified, c: The font size when the browser is actually displayed.

(4) The attribute value can be set to: "None"

is equivalent to not setting the Font-size-adjust property, which is displayed in the original size of the font.

6 Defining font sizes using REM units

(1) REM Font size units calculate the actual font size based on the font size of the root element (usually the HTML element) on the page, regardless of the font size of the element's parent element.

html{font-size:62.5%} (most browsers have a default font size of 16 pixels, using 62.5%, Make the browser automatically calculate 10 pixels) Small{font-size:1.1rem;}strong{font-size:1.8rem;}

(2) Browser support:

So far: all browsers, including IE9, are supported.

(3) compatible with IE8 and previous versions (cannot use REM font units)

Html{font-size:62.5%}small{font-size:11px;font-size:1.1rem;}strong{font-size:18px;font-size:1.8rem;}