CSS 简明教程 - 字体属性

yufei       2 年, 4 月 前       304

CSS 字体属性定义文本的 字体家族 ( font-family ) 、大小 ( font-size ) 、粗体 ( font-weight ) 和样式 ( font-style ) ,如斜体

字体家族

CSS 中有 2 种不同的字体系列

  1. 通用字体,一组具有相似外观的字体系列,如 SerifMonospace
  2. 特定字体系列 - 特定的字体系列,如 Times New RomanArial

除了特定的字体系列,CSS 还定义了五个通用字体系列

  1. Serif
  2. Sans-serif
  3. Monospace
  4. Cursive
  5. Fantasy

几乎所有浏览器都支持这些通用字体系列

字体家族属性 ( font-family )

font-family 属性用于设置文本的字体家族

你应该为 font-family 属性设置多个字体系列,每个字体系列用逗号分隔,如果浏览器不支持第一个字体系列,它将尝试下一个字体系列

例如

h1 {
    font-family: Georgia, serif;
}

注意:最好设置至少一个通用字体系列,用于如果浏览器不匹配任何字体系列,会选择备用字体系列

字体样式属性 ( font-style )

font-style 属性用于设置斜体文本

font-style 可选的值如下

说明
normal 默认值。浏览器显示一个标准的字体样式
italic 浏览器会显示一个斜体的字体样式
oblique 浏览器会显示一个倾斜的字体样式
inherit 规定应该从父元素继承字体样式

下面的代码是一些示例

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

当属性值设置为倾斜 ( oblique ) 或斜体 ( italic ) 时,两段文本具有相同的样式,但是,如果当前字体系列没有定义斜体 ( italic ) 样式时,则会使用倾斜 ( oblique ) 而不是斜体

字体大小 ( font-size ) 属性

font-size 用于设置文本的大小

网页中合理的文本大小非常重要,这将使页面非常协调

font-size 属性的值可以是绝对值或是相对值

绝对尺寸

绝对尺寸将文本设置为指定大小,不允许用户在所有浏览器中更改文本大小 ( 由于可访问性原因而不好 ),但输出已知的物理尺寸时,绝对尺寸很有用

相对尺寸

相对尺寸会将文本设置为相对于周围元素的大小,相对尺寸允许用户在浏览器中更改大小

注意:如果未指定字体大小,则普通的文本会默认使用浏览器定义的默认大小,如段落,默认的大小为 16px,同时也就是定义 16px = 1em

使用像素为单位设置文本尺寸

通过以像素为单位设置文本大小,我们可以完全控制文本大小,例如

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

如果使用像素设置文本大小,则无法在 Internet Explorer 中调整文本大小,但仍可以使用缩放工具调整整个页面的大小

使用 em 为单位设置文本尺寸

如果使用 em 为单位设置文本大小,则可以在所有浏览器中调整文本大小,这也是 W3C 建议使用 em 的原因

1em 相当于当前的字体大小。 浏览器的默认文本大小为 16px,这意味着默认大小为 1em16px

因此,我们可以通过以下公式将像素转换为 em

px/16=em

下面的代码是一些使用 em 为单位的示例

h1 {
    font-size: 3.75em; /* 60px/16=3.75em */
}

h2 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

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

上面的示例中,em 中的文本大小与上一示例中的文本大小(以像素为单位)相同。 不同的是,如果你使用 em,则可以在所有浏览器中调整文本大小

不幸的是,Internet Explorer 仍然存在问题,调整文本大小时,文本大小将大于或小于正常大小

同时使用百分比和 em

解决上述问题的最佳方法是使用百分比设置父元素的默认字体大小

以下示例将 <body> 元素的默认字体大小设置为 100%

body {
    font-size: 100%;
}

h1 {
    font-size: 3.75em;
}

h2 {
    font-size: 2.5em;
}

p {
    font-size: 0.875em;
}

这样,所有浏览器中的文本都会显示为相同的大小,同时又可以通过浏览器的工具栏菜单动态调整大小

粗体属性 font-weight

font-weight 属性用于设置文本的粗体效果

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

font-weight 属性值也可以是 100-900 的整数值:

  1. 100 表示最精细的文本
  2. 900 表示最粗的文本
  3. 400 等于法线
  4. 700 等于粗体
目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.