1.字体大小
语法格式:
font-size：字号大小;font-size属性用于设置字体的大小 ，该属性的属性值可以为
| px | 像素单位 |
| em | 倍率单位 |
| % | 百分比单位 |
本人推荐用像素单位 -- px.
p{
font-size:20px;
}2、字体种类
语法格式:
font-family : 字体种类名;font-family属性用于设置字体类别。常用的字体有 宋体、黑体、微软雅黑等，个人比较喜欢用微软雅黑字体。
p{
font-family:"微软雅黑";
}family-family 属性可以同时指定多个字体，各字体间用英文逗号隔开。
此时对于字体种类的选择是这样的，当你的浏览器不支持第一种字体时，则会自动匹配下一个，直到匹配到支持的字体为止。若设置的字体都不支持，则浏览器会选择用户电脑上的默认字体。
body{
font-family:"微软雅黑","宋体","黑体";
}
还有一点要注意 ： 中文字体格式需要加英文状态的双引号，英文不需要。
3、字体粗细
语法格式:
font-weight ：属性值;font-weight属性用于定义字体粗细，其属性值
| normal | 标准字体样式。为默认值 |
| bold | 定义较粗体 |
| bolder | 定义加粗体 |
| lighter | 定义细体 |
| 100~900 | 定义由细到粗的范围 |
其中的bold 和bolder其实显示效果差不多。
100~900 中必须取100的整数倍，100 相当于 lighter ，400 等同于normal，700相当于blod，900相当于bloder。在实际开发中一般不使用数值的属性值格式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体Weight</title>
<style type="text/css">
#p1{font-weight:lighter;}
#p2{font-weight:normal;}
#p3{font-weight:bold;}
#p4{font-weight:bolder;}
</style>
</head>
<body>
<p id="p1">字体粗细为:lighter</p>
<p id="p2">字体粗细为:normal</p>
<p id="p3">字体粗细为:bold</p>
<p id="p4">字体粗细为:bolder </p>
</body>
</html>4、字体风格
语法格式:
font-style:属性值；font-style属性用于定义字体的风格，比如斜体和正常。
其属性值如下:
| normal | 标准字体风格, 为默认字体风格 |
| italic | 斜体 |
| oblique | 斜体 |
从表中可以看到 italic 和 oblique 的属性效果都是斜体。两者在表现效果上没有区别。
但有些字体没有 italic 的属性，而 oblique 所有字体都可用。原因是 italic 是使用了字体的倾斜属性，而 oblique 只是单纯的使文字倾斜。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字Style</title>
<style type="text/css">
#p1{font-style:normal;}
#p2{font-style:italic;}
#p3{font-style:oblique;}
</style>
</head>
<body>
<p id="p1">字体样式为normal</p>
<p id="p2">字体样式为italic</p>
<p id="p3">字体样式为oblique</p>
</body>
</html>5、英文字符的变体
语法格式
font-variant： 属性值; font-variant 用于设置英文字符的变体。由标题可知这个属性对中文无效。
属性值包括
| normal | 标准字体 |
| small-caps | 小型大写字体。 即小写字母会转化为大写 |
使用小型大写字体的字母和其余文本相比，字体会变小点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#p1{ font-variant: normal;}
#p2{font-variant: small-caps;}
</style>
</head>
<body>
<p id="p1">abCdEf</p>
<p id="p2">abCdEf</p>
</body>
</html>6、定义服务器字体
基本语法格式:
@font-face{
font-family:字体名字;
src:url();
}font-family 用于指定该服务器的字体名字，该名称可以随意定义。
src 用于指定字体文件的路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style text="text/css">
@font-face {
font-family: mu;
src: url(FZJZJW.TTF);
}
p{
font-family: "mu";
font-size: 30px;
}
</style>
</head>
<body>
<p>hello muchenfeng</p>
</body>
</html>推荐一个不错免费的字体下载网址：
https://www.1001fonts.com/
7、综合设置字体样式
基本语法格式:
选择器{
font:font-style font-variant font-weight font-size/line-height font-family;
}必须按照上面语法中的顺序书写，且各属性间用空格隔开。
#p1{
font-family: "微雅软黑";
font-size: 20px;
font-weight: bold;
font-style: oblique;
font-variant: small-caps;
line-height: 15px;
}等价于
#p2{
font:oblique small-caps bold 20px/15px "微雅软黑";
}
扫一扫
1909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
