Detailed explanation of examples of Fonts property in CSS

The difference between serif and sans-serif fonts

On a computer screen, sans-serif fonts are considered easier to read than serif fonts

CSSfonts

In CSS, there are two types of font family names:

Universal font families - combinations of font systems that have a similar appearance (such as "Serif" or "Monospace")

Specific font family - a specific font family (such as "Times" or "Courier")

Font family

font-family PropertiesSettings The font family of the text.

The font-family property should set several font names as a "fallback" mechanism, if the browser does not support the first font, he will try the next font.

Note: If the name of the font family is more than one character, it must be in quotation marks, such as Font Family: "宋体".

Multiple font families are specified separated by a comma:

Examples

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

For more commonly used font combinations, check out our WebSecurity Font combination.

Font style

is mainly used to specify the font style attribute of italic text.

This attribute has three values:

Normal - displays the text normally

Italic - displays the text in italics

Slanted text - displays the text to one side Italic (very similar to italic, but less supported)

Example

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Font size

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

The ability to manage text size is very important in web design. However, you cannot adjust the font size to make a paragraph look like a heading, or a heading to look like a paragraph.

Be sure to use the correct HTML tags, i.e.

-

for headings and

for paragraphs:

font size values Can be an absolute or relative size.

Absolute size:

Set text of a specified size

Does not allow users to change text size in all browsers

Determines the physical size of the output Absolute size is useful

Relative size:

Set the size relative to surrounding elements

Allow the user to change the text size in the browser

If You don't specify a font size, and the default size is the same as a normal text paragraph, which is 16 pixels (16px=1em).

Set font size in pixels

Set the text size in pixels, giving you full control over text size:

Examples

h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}

The above examples can be found on the Internet Explorer 9, Firefox, Chrome, Opera, and Safari resize text.

Note: The above example cannot be run in versions prior to IE9.

Although the text size can be adjusted through the browser's zoom tool, this adjustment is for the entire page, not just the text

Use em to set the font size

To avoid the problem of being unable to resize text in Internet Explorer, many developers use em units instead of pixels. The size unit of

em is recommended by W3C.

1em is equal to the current font size. The default text size in browsers is 16px.

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

实例

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中，设置

元素的默认字体大小的是百分比：

实例

body {font-size:100%;}h1 {font-size:2.5em;}h2 {font-size:1.875em;}p {font-size:0.875em;}

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱（2）－css视频教程

The above is the detailed content of Detailed explanation of examples of Fonts property in CSS. For more information, please follow other related articles on the PHP Chinese website!