CSS3-设置背景以及字体
2017-11-22 本文已影响50人
相关函数
背景
background-origin
这个属性规定了背景图片的定位区域.背景图片可以放置于border-box,padding-box以及content-box;
背景图片的定位区域
background-clip
这个属性规定背景的绘制区域,有三个值,border-box(默认值,从边框区域向外裁剪背景),padding-box(从补白区域向外裁剪背景),content-box(从内容区域向外裁剪背景).
background-size
该属性规定背景图像的尺寸,可以设置其值为宽高为px或者百分比,或者使用cover设置其扩展至足够大,默认是以宽为标准以原图的宽高比例放大,图片可能不能完全的显示在背景定位区域中,contain是设置把图像扩展至足够尺寸,以使其宽高完全适应内容区域,保证整张图完整显示.
字体
在CSS3中可以使用@font-face规则来使用服务器上的字体,当需要用到改字体的时候会自动下载到计算机中.
在@font-face规则中,必须首先定义字体的名称,然后使用src(...)属性指定字体源文件的路径.如果需要引用该字体的时候,使用font-family来指向自定的名称.
使用粗体字的时候同样需要在@font-face规则中添加font-width属性其值为bold.实际上bold是另一种字体,所以依然需要在自定义的名称下面设置其src.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
font-family: MyFont;
}
@font-face {
font-family:MyFont;
src: url(fzsek.TTF);
}
@font-face {
font-family:MyFont;
src: url(FZLTH_GB18030_YS.ttf);
font-weight: bold;
}
</style>
</head>
<body>
<div><b>生命曾经闪耀思想的荣光</b>,我们不能,不能失去信仰.</div>
</body>
</html>
