CSS Font Design Essentials analysis

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

At first glance, it's easy to listen to CSS font settings, actually do it otherwise, our engineers use the full, they adjust the font size in different browsers to know the appropriate results. In fact, a little deeper understanding can play a big role.

Font properties:

The font attribute can be set to any HTML tag, even if it is a label that cannot contain text, such as: can be assigned a variety of drops, such as: absolute, relative, length value.

The font property of an element automatically inherits the font attribute value of its parent node element unless you overwrite it. This is important when you set the relative size of the font.

Font Set Absolute Keywords:

The following several absolute font size settings are valid. Of course they are browser predefined settings. When an absolute keyword font is specified for an element, the element does not inherit the font size of the parent element.

Font-size:xx-small;

Font-size:x-small;

Font-size:small;

Font-size:medium;

Font-size:large;

Font-size:x-large;

Font-size:xx-large;

Although most browsers support the above keywords, their exact size is not the same.

The absolute size of the font, fone-size can be set to the absolute size below:

MM: MM, for example: 10mm.

CM: cm, for example: 1cm (= 10mm).

In: inch (inch), for example: 0.39in (~= 10mm).

Pt:point (point), 1pt equivalent to 1/72 inches, such as: 12pt.

Pc:pica (12-point movable type), 1pc is 12pt

Px:pixel (pixel), for example: 14px.

Generally these units of measure have some problems. For example: mm, CM, inch is not accurate for different media media, due to different resolution settings, PT and PC is relatively unreliable. PIX is the most appropriate, but it can cause some ancillary problems: IE cannot resize the font.

Relative Size: Font performance is set to the relative size of the font size relative to the parent node.

Em:1em equivalent to 1 time times the size of the current font. 2em a font that is equivalent to twice times the font size of the current font.

%: 100% is equivalent to the current font size, 200% equals twice times the size of the font.

Ex:1ex corresponds to a font of the same size as the letter ' x ' height in the current font.

Few developers use ex, and in some cases ex is pretty good, like when you need a more precise font size, 1ex is better and more accurate than 0.525em.

% and EM values are equivalent, such as: 50% = 0.5em, 100% = 1em, 120% = 1.2em, and so on, although there are a few subtle differences in some browsers, but that is a very rare problem. If you want to save a smaller byte, you need to define a font value with a shorter name. For example: 50% to occupy less than 0.5em bytes, 1em to occupy less than 100% bytes.

Text font size and page scaling.

This is a complex, in-depth section, and most browsers allow users to do the following in a browser:

Increase or decrease the base font size (except for pictures).

Page scaling is all the text and pictures are also the corresponding scaling changes.

Not only allows the font to shrink, but also allows the page to shrink.

Note (deep understanding): in IE, if the font of elements in the page is assigned in PX (pixel), then the font of the element will not change when the page is indented.

If you are a designer with a printing industry background that is going to be moved to the web design, it is recommended that you do not give users too much power or they will disrupt your design work. When your design works are magnified to 200%, or the font is reduced to 50%, it is destroyed.

CSS Font Setup recommendations (specification)

In general, using either EM or% in most cases, the font can be supported by the browser in a finer proportion of the font. I personally recommend using percent% to define font size, which is also better supported in some older browsers.

When you develop a website, you have the following set of recommendations for you: Reset the font size of all browsers before testing. Define the size of the font as reasonably as possible so that the page is still readable when the page is indented.