Introduction to properties related to Chinese characters and fonts in CSS3

This article brings you an introduction to the attributes related to CSS3 Chinese characters and fonts. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1 text-shadow attribute

(1) Function

Add shadow effect to the text on the page .

(2) How to use

text-shadow: length length length color (the horizontal distance of the shadow from the text, the vertical distance, the blur radius of the shadow, the color of the shadow)

Note:

The horizontal distance and vertical distance of the shadow from the text: Must be specified, negative values ​​can be specified.

The blur radius of the shadow: represents the blur range when the shadow is blurred outward. The larger the radius, the wider the shadow will blur outward. Optional parameter, when omitted, the default is 0, which means the shadow will not blur outward.

Shadow color: Optional parameter, when not specified, the color of the color attribute is used in CSS2 (actual Firefox and Opera, others do not support omission, otherwise it will not be drawn), in CSS3 Use 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 function.

(3) Browser support

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

text-shadow: 5px 5px 5px gray; (gray shadow, the shadow leaves the molecule by 5 pixels in both horizontal and vertical directions)

2 word-break attribute

(1) Function: Let text automatically wrap

(2) Value: normal (use the browser's default line wrapping rules), keep-all (can only use half-width spaces Or line break at a hyphen), break-all (allow line breaks within words)

(3) Browser support

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

3 word-wrap attribute

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

(2) Value: normal (browser default processing), break-word (line break inside long words or URL addresses)

(3) Browser support: all browsers.

4 Web Font 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；
}
h1{
    font-family：WebFont；
}

5 font-size-adjust attribute

(1) Function: Modify the font type and Keep the font size unchanged

(2) How to use:

aspect value (proportion value): can be used to keep the font size basically unchanged when modifying the font to other fonts . (Constant)

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

p{
   font-size：16px；
   font-famliy：Times New Roman；
   font-size-adjust：0.46（aspect值）
}

(3) How the browser calculates the aspect value:

After specifying the aspect value in the font-size-adjust attribute and modifying the font to another font, the browser will calculate the modified aspect value Calculation formula of 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 modification,

s: indicates the specified font size , c: the font size actually displayed by the browser.

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

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

6 Use rem units to define font size

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

html｛font-size：62.5%｝（大多数浏览器中，默认字体大小为16个像素，使用62.5%， 使浏览器自动计算出10个像素）
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 (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；｝

Related recommendations:

css3 How to use the selector to insert all the elements in the page Required content (with code)

Four functions implemented by the transform attribute in css3 (rotation, scaling, tilting, movement)

The above is the detailed content of Introduction to properties related to Chinese characters and fonts in CSS3. For more information, please follow other related articles on the PHP Chinese website!