实验指导书：

网页效果图：

第5次实验需要用到的字体文件下载：

关键核心代码提示：

1.设置自定义字体CSS代码：

@font-face{

font-family:自定义字体名;

src:url(字体文件所在地址及文件名);

}

例如：(前提条件，你的字体文件都在font文件夹里面，同时网页和font文件夹是同级目录)

/* 1. 这一步就是先将ONYX.TTF字体文件导入到页面     */

@font-face{

font-family:ONYX;

src:url(font/ONYX.TTF);

}

/* 2. 接着就可以使用ONYX字体了，比如，设置一个段落文字字体样式为ONYX字体，大小修改为24px  */

p {     

          font-family:ONYX;

          font-size:24px;

      }

2.设置超出文字显示为”......“CSS代码：

p {

width:500px;               /* 限定文字所在容器宽度*/

white-space: nowrap;  /* 强制文本不能换行*/

overflow:hidden;         /* 溢出文本为隐藏*/

text-overflow:ellipsis; /* 用省略号表示被隐藏的文字*/

}

3.设置文字阴影CSS代码：

h2{text-shadow:10px 10px 10px red , 12px 12px 10px green; }

/*上述代码设置了红色和绿色阴影交叠效果*/

/* text-shadow 的4个基本值：    水平偏移距离         垂直偏移距离      模糊半径大小      阴影颜色 */