CSS笔记08-字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形

 

字体系列

在CSS中，有两种不同的字体系列

通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）

特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

• Serif 字体
• Sans-serif 字体
• Monospace 字体
• Cursive 字体
• Fantasy 字体

 

指定字体系列

使用font-family属性可以定文本的字体系列

使用通用字体系列

body {
    font-family: sans-serif;
}

如果希望文档使用某一系列的字体，但不关心具体是系列中的哪一种，可以用上面的写法

指定字体系列

p {
    font-family: Georgia;
}

这样就为所有段落设置了Georgia字体

但是这样会产生另外一个问题，如果浏览器不支持这个字体，那就会用默认字体来显示。

p {
    font-family: Georgia, serif;
}

因此建议在指定字体后，添加一个通用字体备选项。

使用引号

如果字体名中有一个或多个空格，字体名包括#或$之类的符号，需要使用单引号

p {
    font-family: Georgia, 'New Century Schoolbook',serif;
}

 

 

字体风格

使用font-style属性设置字体风格

normal：字体正常显示

italic-字体斜体显示

oblique-字体倾斜显示

h1 {
    font-style:italic;
}

h2 {
    font-style:oblique;
}

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

 

 

字体变形

使用font-variant属性可以设定小型大写字母

h1 {
    font-variant:small-caps;
}

 

字体加粗

使用font-weight属性设置字体的粗细

normal：默认值

bold：粗体

bolder：比父元素更粗

lighter：比父元素更细

inhert：和父元素一样

100-900：400等于normal，700等于bold

#p1 {
    font-weight: 100;
}

#p2 {
    font-weight: 900;
}

 

 

字体大小

使用font-size属性设置字体大小，可以使用绝对值和相对值

绝对值：

• 将文本设置为指定的大小
• 不允许用户在所有浏览器中改变文本大小（不利于可用性）
• 绝对大小在确定了输出的物理尺寸时很有用

相对大小：

• 相对于周围的元素来设置大小
• 允许用户在浏览器改变文本大小

ps：如果没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

使用像素设置大小

#p1 {
    font-size: 60px;
}

#p2 {
    font-size: 40px;
}

使用em来设置大小

#p1 {
    font-size: 3.75em;
}

#p2 {
    font-size: 2.5em;
}

1em相当于当前尺寸，如果一个元素的font-size为16像素，那么该元素，1em就等于16px。在设置字体代时，em值是相对于父元素的字体大小改变。浏览器默认的是16px。因此1em默认等于16px。

em：pixels/16=em

ps：16等于父元素的默认大小，假设父元素设置了font-size为20，那么公式会变成pixels/20=em

结合使用百分比和em

在所有浏览器中均有效的方法是为body元素以百分比设置默认的size值

body {
    font-size:100%;
}

#p1 {
    font-size: 3.75em;
}

#p2 {
    font-size: 2.5em;
}