body { font-family:"华文彩云",“宋体” ,“黑体” ;}
当引用上面的字体样式的时候,会首选“华文彩云”,如果用户电脑上没有安装该字体则选择“宋体”,如果也没有安装“宋体”,则选择“黑体”。当指定的字体都没有安装的时候,就会选择浏览器默认的字体。
使用font-family设置字体的时候,需要注意以下几点:
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的 引号,英文字体一般不需要加引号。当需要设置英文字体的时候,英文字体名字必须位于中文字体名字之前,如下面的代码:
body { font-family: Arial , "微软雅黑" , "宋体" , "黑体" ; } 这个是 正确 的书写方式
body { font-family: "微软雅黑" , "宋体" , "黑体" , Arial ; } 这个是 错误 的书写方式
如果字体中包含 空格 # $ 等符号,则该字体必须加英文状态下的 单引号 或者 双引号,
如:font-family :"Times New Roman" ;
尽量使用系统默认的字体,保证在任何用户的浏览器中都能正确的显示。
@font-face 属性 是CSS3中的新增属性,用于定义服务器字体。通过@font-face属性,用户可以自定义计算机中没有安装的字体,从而使用任何喜欢的字体。基本的语法格式是:
@font-face {
font-family:字体名称;
src : 字体的路径 ;
}
在上面的语法格式中,font-family 用于指定该服务器字体的名称,该名称可以随意定义;src 属性用于指定该字体文件的路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@font-face属性</title>
<style>
@font-face {
font-family:jianzhi; /* 服务器字体名称*/
src:url(font/FZJZJW.TTF); /* 服务器字体路径*/
}
p {
font-family: jianzhi; /* 设置字体的样式 ,使用的是服务器上自定义的字体*/
font-size:32px;
}
</style>
</head>
<body>
<p>好好好好好</p>
<p>好好好好好</p>
</body>
</html>
步骤:
1 . 下载相应的字体,并储存在相对应的服务器的文件夹中;
2. 使用@font-face属性定义服务器字体;
3. 对元素应用"font-family" 字体样式
text-decoration:none/line-through删除线/overline上划线/underline下划线
text-transform属性用于控制英文字符的大小写。
text-transform:文本转换:
none:不转换(默认值);
capitalize:首字母大写;
uppercase:全部字符转换为大写;
lowercase:全部字符转换为小写;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@font-face属性</title>
<style>
.p1 {
text-transform: uppercase;
text-decoration: line-through;
}
.p2 {
text-transform: lowercase;
text-decoration: underline;
}
.p3 {
text-transform: capitalize;
text-decoration: overline;
}
</style>
</head>
<body>
<p class='p1'>aaaa</p>
<p class='p2'>aaaa</p>
<p class='p3'>aaaa</p>
</body>
</html>
text-align:center 只能应用于块级元素,如果要对图像img使它居中,可以先用块级元素把它包裹起来,
text-indent :缩进 属性值可以是不同单位的数值、em字符宽度的倍数,或相对于浏览器窗口的百分比。允许使用负值,建议使用em设置单位