Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "css3 Chinese characters and font-related attributes are", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn about "css3 Chinese characters and fonts-related attributes have" this article.

1text-shadow attribute

(1) function

Add a shadow effect to the text on the page.

(2) usage

Text-shadow:lengthlengthlengthcolor (horizontal distance of shadow from text, vertical distance, blur radius of shadow, color of shadow)

Note:

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

Blur radius of shadow: represents the range of blur when the shadow is blurred outward. The larger the radius value, the greater the range in which the shadow blurs outward. Optional parameter. When omitted, the default is 0, which means that the shadow is not blurred outward.

Shadow color: optional parameter, use the color attribute color in CSS2 when not specified (actual Firefox and Opera, others do not support omission, omission is not drawn), CSS3 uses the default color specified by the browser.

(4) specify multiple shadows

Text-shadow:10px10px#f39800

40px35px#fff100

70px60px#c0ff00

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

(3) browser support

So far: Safari, Chrome, Firefox, Opera browsers support this attribute.

Text-shadow:5px5px5pxgray; (gray shadow, which is 5 pixels away from the horizontal and vertical direction of the molecule)

2word-break attribute

(1) function: let the text wrap automatically

(2) values: normal (using browser default line wrapping rules), keep-all (can only wrap lines at half-width spaces or hyphens), break-all (line breaks within words are allowed)

(3) browser support

So far: Safari, Chrome, IE browsers support this attribute.

3word-wrap attribute

(1) function: automatically wrap long words and URL addresses.

(2) values: normal (browser default), break-word (line wrapping within long words or URL addresses)

(3) browser support: all browsers.

4WebFont and @ font-face attributes

(1) function: display server-side fonts on the web page.

(2) usage:

@ font-face {

Font-famliy:WebFont

Src:url ('font/Fontin_Sans_R_45b.otf') format ("opentype")

Font-weitht:normal

}

H2 {

Font-family:WebFont

}

5font-size-adjust attribute

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

(2) usage:

Aspect value (scale value): can be used to keep the font size basically the same when changing the font to another font. (constant)

Calculated by dividing the x-height value (the height in pixels of lowercase X written in this font) by the size of the font.

P {

Font-size:16px

Font-famliy:TimesNewRoman

Font-size-adjust:0.46 (aspect value)

}

(3) the browser's method of calculating the aspect value:

After you specify the aspect value in the font-size-adjust property and change the font to another font, the browser's formula for calculating the modified font size:

C = (a _ b _ b) s

A: indicates the aspect value of the font actually used, b: indicates the aspect value of the font before modification,

S: represents the specified font size, and c: the font size when the browser actually displays it.

(4) attribute value can be set to "none"

It is equivalent to not setting the font-size-adjust property and displaying it according to the original font size.

6 define font size in rem units

(1) the rem font size unit calculates the actual font size based on the font size of the root element on the page (generally refers to the html element), regardless of the font size of the element's parent element.

Html {font-size:62.5%} (in most browsers, the default font size is 16 pixels, using 62.5%, so the browser automatically calculates 10 pixels)

Small {font-size:1.1rem;}

Strong {font-size:1.8rem;}

(2) the browser supports:

So far: all browsers, including IE9, support it.

(3) compatible with IE8 and previous versions (rem font units cannot be used)

Html {font-size:62.5%}

Small {font-size:11px;font-size:1.1rem;}

Strong {font-size:18px;font-size:1.8rem;}

These are all the contents of this article entitled "what are the font-related attributes of css3 Chinese characters?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.