CSS Font

The font family of a text is set with the font-family property.

文本的字体系统由该性质设定。

It should hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family.

该性质应该像一个“后备”系统,拥有一些字体名称。每一个名称之间由逗号分开。

从你希望用的字体开始,以一个通用字体系统结束,这样如果浏览器不支持第一个字体,它会尝试后面的选项。

Note: If the name of a font family is more than one word, it must be in quotation marks, like: “Times New Roman”.

注意,如果字体系统名称多余一个单词,则必须用双引号括起来。

p{font-family:"Times New Roman", Times, serif;}


Font style

The font-style property has three values:

  • normal 正常
  • italic 斜体
  • oblique 倾斜- The text is “leaning” (oblique is very similar to italic, but less supported)

斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。

通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。


Font size

The font-size property sets the size of the text.

Note: You should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.

不要通过调整字体大小来使段落看起来像是标题,一定要。

Always use the proper HTML tags, like <h1> – <h6> for headings and <p> for paragraphs.

Syntax

font-size: <absolute-size> | <relative-size> | <length> | <percentage>

Property values

absolute-size

Set of keywords that indicate predefined font sizes. Named font sizes scale according to the user’s font setting preferences. Possible values include the following:xx-small, x-small, small, medium, large, x-large, xx-large.

relative-size

Set of keywords that are interpreted as relative to the font size of the parent object. Possible values include the following: smaller, larger.

length

Floating-point number, followed by an absolute units designator (cmmminpt, or pc) or a relative units designator (emex, or px).

percentage

Floating-point number, followed by a percent (%). The value is a percentage of the parent object’s font size.

Set font-size with pixel 像素

p {font-size:14px;}

Note: The example above does not work in IE, prior version 9. IE9之前版本不支持px, 它们使用pt

The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text).

浏览器使用放大工具可以重定义整个页面的大小,而不仅仅是文本。

Set font-size with em 

To avoid the resizing problem with older versions of Internet Explorer, many developers use em instead of pixels.

为了避免旧版本的IE出现重定义字体大小的问题,开发者使用 em 而不是 px

The em size unit is recommended by the W3C. 该字体大小单位被W3C推荐使用。

1em is equal to the current font size. The size can be calculated from pixels to em using this formula: pixels/16=em

Note: The default size for normal text 正常文本默认字体大小为 is 16px (16px=1em).

p {font-size:0.875em;} /* 14px/16=0.875em */


Unfortunately, there is still a problem with older versions of IE. The text becomes larger than it should when made larger, and smaller than it should when made smaller.

不幸的是,老版本IE仍然有问题。当设定字体为larger时,字体会变得比它应该放大尺寸更大,缩小时同理。


终极解决设定font-size办法

CSS Font

相关文章:

你感兴趣的文章:

标签云: