700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > web前端学习(十五)——CSS3字体属性(font)的相关设置

web前端学习(十五)——CSS3字体属性(font)的相关设置

时间:2021-09-17 12:56:26

相关推荐

web前端学习(十五)——CSS3字体属性(font)的相关设置

CSS字体属性主要用于定义字体类型、加粗、大小、文字样式。

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属性指定文本的字体样式。

小实例:

<!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)。

小实例:

<!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 属性设置文本的粗细

小实例:

<!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 属性主要用于定义小型大写字母文本

小实例:

<!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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。