font-family属性
font-family属性指定元素的字体类型。
写法:font-family: "Microsoft YaHei"||黑体;
注:若字体名称包含空格,则需用双引号括起来,如果是在style属性中书写,则用单引号括起来。
常见字体名称:Microsoft YaHei(微软雅黑),Simsun(宋体),NSimsun(新宋体),Simhei(黑体),FangSong(仿宋),KaiTi(楷体)等。
某些浏览器的默认字体是微软雅黑。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
#p1 {
font-family: "Microsoft YaHei";
}
#p2 {
font-family: 'KaiTi';
}
#p3 {
font-family: 'Simsun';
}
#p4 {
font-family: 'FangSong';
}
</style>
</head>
<body>
<p id="p5">元素字体(浏览器默认字体)</p>
<p id="p1">元素字体(微软雅黑)</p>
<p id="p2">元素字体(楷体)</p>
<p id="p3">元素字体(黑体)</p>
<p id="p4">元素字体(仿宋)</p>
</body>
</html>
效果如下:
font-size属性
font-size属性指定字体的大小。
属性值:
- xx-small/x-small/small/medium(中等、默认)/large/x-large/xx-large。
- smaller,比父元素更小的尺寸。
- larger,比父元素更大的尺寸。
- length,固定值的大小。
- %,基于父元素百分比的值的大小。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
#p1 {
font-family: "Microsoft YaHei";
font-size: xx-small;
}
#p2 {
font-family: 'KaiTi';
font-size: smaller;
}
#p3 {
font-family: 'Simsun';
font-size: 50px;
}
#p4 {
font-family: 'FangSong';
font-size: 125%;
}
</style>
</head>
<body>
<p id="p5">元素字体(浏览器默认字体)</p>
<p id="p1">元素字体(微软雅黑)</p>
<p id="p2">元素字体(楷体)</p>
<p id="p3">元素字体(黑体)</p>
<p id="p4">元素字体(仿宋)</p>
</body>
</html>
效果如下:
font-style属性
font-style属性指定字体的样式(如:斜体、倾斜等)。
属性值:
- italic,斜体。
- oblique,倾斜
一般情况下,italic与oblique没什么区别。
内容与样式分离:在开发过程中,尽量用italic属性替代<i>元素。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
#p1 {
font-family: "Microsoft YaHei";
font-size: xx-small;
font-syle: normal;
}
#p2 {
font-family: 'KaiTi';
font-size: smaller;
}
#p3 {
font-family: 'Simsun';
font-size: 50px;
font-style: italic;
}
#p4 {
font-family: 'FangSong';
font-size: 125%;
font-style: oblique;
}
</style>
</head>
<body>
<p id="p5">元素字体</p>
<p id="p1">元素字体(默认)</p>
<p id="p2">元素字体</p>
<p id="p3">元素字体(斜体)</p>
<p id="p4">元素字体(倾斜)</p>
</body>
</html>
效果如下:
font-weight属性
font-weight属性指定字体的粗细。
属性值:
- nromal,默认字体。
- bold,粗体。
- bolder,更粗的字体。
- lighter,更细的字体。
- 100~900,400==normal,700==bold。
注:在开发中,建议用font-weight属性代替<b>元素,使其样式与内容分离。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
#p1 {
font-family: "Microsoft YaHei";
font-size: xx-small;
font-syle: normal;
font-weight: lighter;
}
#p2 {
font-family: 'KaiTi';
font-size: smaller;
font-weight: bold;
}
#p3 {
font-family: 'Simsun';
font-size: 50px;
font-style: italic;
font-weight: 400;
}
#p4 {
font-family: 'FangSong';
font-size: 125%;
font-style: oblique;
font-weight: 800;
}
</style>
</head>
<body>
<p id="p5">元素字体</p>
<p id="p1">元素字体(更细)</p>
<p id="p2">元素字体(粗体)</p>
<p id="p3">元素字体(默认)</p>
<p id="p4">元素字体(800)</p>
</body>
</html>
效果如下:
@font-face属性
@font-face属性指定将字体样式放于服务器端。
书写:
@font-face {
font-family: myFamilyId;
src: url('url');
}
select {
font-family: myFamilyId;
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
@font-face{
font-family: myFistFamily;
src: url('Zzgf.otf');
}
#p1 {
font-family: myFistFamily;
font-size: 50px;
}
</style>
</head>
<body>
<p id="p1">服务端字体,将字体样式放于服务器端。</p>
</body>
</html>
效果如下:
font-variant属性
font-variant属性指定小型大写字母,字母为大写,整体比其它文本更小。
书写:font-variant: small-caps;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style>
#p1 {
font-variant: small-caps;
}
</style>
</head>
<body>
<p id="p1">good morning,其它文本。</p>
</body>
</html>
效果如下:
字体属性缩写方式:
font: font-family font-size/line-height font -style font-variant font-weight;