网思科技股份有限公司_动画制作软件有哪些_做网上营销怎样推广_关键词排名是什么意思

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。

一、字体

1.字体系列

CSS使用font-family属性定义文本的字体系列

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {font-family: '宋体';}</style>
</head>
<body><h2>《从前慢》</h2><p>记得早先少年时</p>    <p>大家诚诚恳恳</p><p>说一句是一句</p>    <p>清早上火车站</p><p>长街黑暗无行人</p><p>卖豆浆的小店冒着热气从前的'日色变得慢</p> <p>车，马，邮件都慢</p>   <p>一生只够爱一个人</p></body>
</html>

注意：
① 各种字体之间必须使用英文状态下的逗号隔开

② 一般情况下，如果有空格隔开的多个单词组成的字体，加引号

③ 尽量使用系统自带默认字体，保证在任何用户的浏览器中都能正确显示

④ 最常见的几个字体：body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

2.字体大小

CSS 使用 font-size 属性定义字体大小。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {font-family: '宋体';font-size: 100px;}</style>
</head>
<body><h2>《从前慢》</h2><p>记得早先少年时</p>    <p>大家诚诚恳恳</p><p>说一句是一句</p>    <p>清早上火车站</p><p>长街黑暗无行人</p><p>卖豆浆的小店冒着热气从前的'日色变得慢</p> <p>车，马，邮件都慢</p>   <p>一生只够爱一个人</p></body>
</html>

注意：

① px(像素)大小是我们网页的最常用的单位

② 谷歌浏览器默认的文字大小为16px

③ 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

④ 可以给 body指定整个页面文字的大小

3.字体粗细

CSS 使用 font-weight属性设置文本字体的粗细。

有以下几个属性：

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {font-family: '宋体';font-size: 100px;}.bold {font-weight: 700;}</style>
</head>
<body><h2>《从前慢》</h2><p>记得早先少年时</p>    <p>大家诚诚恳恳</p><p>说一句是一句</p>    <p>清早上火车站</p><p>长街黑暗无行人</p><p>卖豆浆的小店冒着热气从前的'日色变得慢</p> <p class="bold">车，马，邮件都慢</p>   <p class="bold">一生只够爱一个人</p></body>
</html>

4.文字样式

CSS 使用 font-style 属性设置文本的风格

有以下几个属性：

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {font-family: '宋体';font-size: 100px;}.bold {font-weight: 700;}.italic {font-style: italic;}</style>
</head>
<body><h2>《从前慢》</h2><p>记得早先少年时</p>    <p class="italic">大家诚诚恳恳</p><p>说一句是一句</p>    <p>清早上火车站</p><p>长街黑暗无行人</p><p>卖豆浆的小店冒着热气从前的'日色变得慢</p> <p class="bold">车，马，邮件都慢</p>   <p class="bold">一生只够爱一个人</p></body>
</html>

注意:平时我们很少给文字加斜体，反而要给斜体标签(em，i)改为不倾斜字体

5.字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码：

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-style: italic;font-weight: 700;font-size: 66px;font-family: 'Microsoft yahei';}</style>
</head>
<body><div>十个勤天，做大做强</div>
</body>
</html>

简写：

font：font-style font-weight font-size/line-height font-family

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font:italic 700 66px 'Microsoft yahei'}</style>
</head>
<body><div>十个勤天，做大做强</div>
</body>
</html>