CSS基础之字体样式
CSS基础之字体样式
·
目录
| 属性值 | 说明 |
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体斜体 |
| color | 颜色 |
一：font-family 字体类型
可以指定多种字体，多个字体按优先顺序排列，以逗号隔开，逗号一定是在英文状态下的。
font-family: arial,"times new roman" , "宋体" , "微软雅黑";
/*设置多个不同的字体目的是浏览器的支持的字体可能不同，但是如果设置的字体浏览器都不支持，
那么浏览器就默认为宋体
语法：font—family：字体一,字体二,字体三;
中文中常用的字体：宋体、微软雅黑、仿宋
英文中常用的字体：arial、times new roman*/二：font-size 字体大小
font-size:25px;
/*字体大小
语法：font-size:关键字或像素值;
关键字：xx-small:最小
x-small：较小
small：小
medium：默认值，正常
large：大
x-large：较大
xx-large:最大
*/三：font-wehght 字体粗细
font-weight: 700;
/*字体粗细
语法：font-weight:粗细值;
取值：关键字/100~900之间的数值。
关键字：normal 默认值 正常 100
lighter：较细
bold 较粗 700
bolder 很粗
一般用到normal 和 bold
*/四：font-style 字体斜体
font-style: inherit;//继承
/* 斜体
字体倾斜效果 语法：font-style:取值;
取值：normal：默认值，正常
italic：斜体
oblique：将字体倾斜
*/五：color 字体颜色
color: magenta;
/*字体颜色
语法：color：颜色值;
取值：可以是关键字或者是16进制的RGB值，
关键字：就是颜色对应的英文单词，
RBG：#03FCA1
*/实验一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fontStyle{
font-family: arial,"times new roman" , "宋体" , "微软雅黑";
/*
设置多个不同的字体目的是浏览器的支持的字体可能不同，但是如果设置的字体浏览器都不支持，
那么浏览器就默认为宋体
语法：font—family：字体一,字体二,字体三;
中文中常用的字体：宋体、微软雅黑、仿宋
英文中常用的字体：arial、times new roman
*/
font-size:25px;
/*字体大小
语法：font-size:关键字或像素值;
关键字：xx-small:最小
x-small：较小
small：小
medium：默认值，正常
large：大
x-large：较大
xx-large:最大
*/
color: magenta;
/*字体颜色
语法：color：颜色值;
取值：可以是关键字或者是16进制的RGB值，
关键字：就是颜色对应的英文单词，
RBG：#03FCA1
*/
font-weight: 700;
/*字体粗细
语法：font-weight:粗细值;
取值：关键字/100~900之间的数值。
关键字：normal 默认值 正常 100
lighter：较细
bold 较粗 700
bolder 很粗
一般用到normal 和 bold
*/
font-style: inherit;//继承
/* 斜体
字体倾斜效果 语法：font-style:取值;
取值：normal：默认值，正常
italic：斜体
oblique：将字体倾斜
*/
}
</style>
</head>
<body>
<span class="fontStyle">
字体大小
</span><br/>
<span class="fontStyle">
字体大小
</span>
</body>
</html>
运行：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)