CSS字体属性主要用于定义字体类型、加粗、大小、文字样式。
Property |
描述 |
在一个声明中设置所有的字体属性 |
|
指定文本的字体系列 |
|
指定文本的字体大小 |
|
指定文本的字体样式 |
|
以小型大写字体或者正常字体显示文本。 |
|
指定字体的粗细。 |
1. font-family属性
font-family属性设置文本的字体系列。
font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
有两种类型的字体系列名称：
· family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
· generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。
使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
注意： 每个值用逗号分开。如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p.serif {font-family: 'Times New Roman', Times, serif;} p.sansserif {font-family: Arial, Helvetica, sans-serif;} </style> </head> <body> <h1>CSS font-family</h1> <p class="serif">这个段落的字体是 Times New Roman</p> <p class="sansserif">这个段落的字体是 Arial</p> </body> </html>
2.font-style属性
font-style属性指定文本的字体样式。
值 |
描述 |
normal |
默认值。浏览器显示一个标准的字体样式。 |
italic |
浏览器会显示一个斜体的字体样式。 |
oblique |
浏览器会显示一个倾斜的字体样式。 |
inherit |
规定应该从父元素继承字体样式。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p.normal {font-style: normal;} p.italic {font-style: italic;} p.oblique {font-style: oblique} </style> </head> <body> <p class="normal">这是一个段落，正常字体。</p> <p class="italic">这是一个段落，斜体字体。</p> <p class="oblique">这是一个段落，斜体字体。</p> </body> </html>
3.font-size属性
font-size属性设置文本的大小。
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小：
· 设置一个指定大小的文本
· 不允许用户在所有浏览器中改变文本大小
· 确定了输出的物理尺寸时绝对大小很有用
相对大小：
· 相对于周围的元素来设置大小
· 允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
值 |
描述 |
· xx-small · x-small · small · medium · large · x-large · xx-large |
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。 |
smaller |
把 font-size 设置为比父元素更小的尺寸。 |
larger |
把 font-size 设置为比父元素更大的尺寸。 |
length |
把 font-size 设置为一个固定的值。 |
% |
把 font-size 设置为基于父元素的一个百分比值。 |
inherit |
规定应该从父元素继承字体尺寸。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> h1 {font-size: 40px;} h2 {font-size: 30px;} p {font-size: 14px;} /* h1 {font-size: 2.5em;} h2 {font-size: 1.875em;} p {font-size: 0.875em;} */ </style> </head> <body> <h1>这是一个1级标题。</h1> <h2>这是一个2级标题。</h2> <p>这是一个简单的段落。</p> </body> </html>
4.font-weight属性
font-weight属性设置文本的粗细
值 |
描述 |
normal |
默认值。定义标准的字符。 |
bold |
定义粗体字符。 |
bolder |
定义更粗的字符。 |
lighter |
定义更细的字符。 |
· 100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900 |
定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。 |
inherit |
规定应该从父元素继承字体的粗细。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p.normal {font-weight: normal;} p.light {font-weight: lighter;} p.thick {font-weight: bold;} p.thicker {font-weight: 900;} </style> </head> <body> <p class="normal">This is a paragraph.</p> <p class="light">This is a paragraph.</p> <p class="thick">This is a paragraph.</p> <p class="thicker">This is a paragraph.</p> </body> </html>
5.font-variant属性
font-variant属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
font-variant属性主要用于定义小型大写字母文本
值 |
描述 |
normal |
默认值。浏览器会显示一个标准的字体。 |
small-caps |
浏览器会显示小型大写字母的字体。 |
inherit |
规定应该从父元素继承 font-variant 属性的值。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p.normal {font-variant: normal;} p.small {font-variant: small-caps;} </style> </head> <body> <p class="normal">My name is ZhangSan.</p> <p class="small">My name is ZhangSan.</p> </body> </html>
6.font属性
font简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）："font-style font-variant font-weight font-size/line-height font-family"（字体风格、字体异体、字体粗细、字体大小、字体类型）
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p.example1 {font: normal lighter 36px arial, sans-serif;} p.example2 {font: italic bold 25px "楷体", serif;} </style> </head> <body> <h1 style="font-family: '仿宋';">font属性</h1> <p class="example1">天行健，君子以自强不息；</p> <p class="example2">地势坤，君子以厚德载物。</p> </body> </html>
