10-1 换个好看的字体 - 使用font-family设置字体系列
本节编程练习不计算学习进度,请电脑登录imooc.com操作

换个好看的字体 - 使用font-family设置字体系列

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”,如下代码:

body{font-family:"Microsoft Yahei";}

body{font-family:"微软雅黑";}

注意:第一种方法比第二种方法兼容性更好一些。

因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

 

任务

我也来试试:

在右边编辑器的第8行为右侧的段落文字(p元素)设置字体为“宋体”

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>font-family</title>
  7. <style type="text/css">
  8.  
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <h1>勇气</h1>
  14. <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
  15. <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
  16. </body>
  17.  
  18. </html>
下一节