1、color 字体颜色
<!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>
#word{
/* 1、字母单词 */
color: red;
/* 2、16进制表示法 */
color: #984700;
/* 3、三原色通道 */
color: rgb(122, 155, 77);
/* 4、rgba，a代表阿尔法通道透明度 */
color: rgba(122, 155, 77, 0.3);
}
</style>
</head>
<body>
<p>默认字体属性</p>
<p id="word">自定义字体属性</p>
</body>
</html>依次对比效果：
2、font-size 设置文本大小
浏览器能接受最小字体是12px，后面要得到更小字体可通过缩放实现。
#word{
color: rgb(122, 155, 77);
font-size: 50px;
}
3、font-weight 文本粗细
值 | 描述 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| ligher | 定义更细的字符 |
| 100~900 | 定义由细到粗，400等同默认，700等同于bold |
4、font-style 指定字体样式
| 值 | 描述 |
| normal | 默认值 |
| italic | 斜体字 |
5、font-family 指定一个元素的字体
tips:
① 每个值用逗号分开
② 如果字体名称包含空格，它必须加上引导
总体效果演示：
<!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>
#word{
color: rgb(122, 155, 77);
font-size: 50px;
font-weight: lighter;
font-style: italic;
font-family: "宋体";
}
</style>
</head>
<body>
<p>默认字体属性</p>
<p id="word">自定义字体属性</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
