CSS常用属性之字体属性（三）

CSS的字体属性主要有：color属性、font-size、font-weight、font-style、font-family、@font-face，接下来我将对这些属性进行一个还算详细的描述

1、color 字体颜色

color属性主要可以用 英语单词， 十六进制， rgb()， rgba() 这四种表示法。

1、英文单词：

/* 
color属性可设置文本内容的字体颜色
注：该表示法仅用于学习或测试使用，工作中基本不用 
*/
color:red;
color:blue;

2、十六进制表示法：

/*
十六进制表示法是所有设计软件中都通用的颜色表示法
设计师会给我们在设计图上标注颜色，通常为十六进制表示
*/
color:#cc0066
color:#000

/* 注：如果两两相同，并且有三对，就能简写 */
color:#cc0066;  可以简写成  color:#c06;
color:#ff43dd;  不能简写成  color:#f43d;

/* 常用的十六进制表示法 */
#000（黑色） #fff（白色） #ccc,#333,#2f2f2f,#666,#ddd（灰色）

3、rgb表示法：

/* 
rgb是光学显示器三原色：红 red 绿 green 蓝 blue 三个单词的缩写
rgb中三个数字的范围是0-255之间
*/
color:rgb(202, 11, 129);

4、rgba表示法：

/*
rgba中前三个数字的范围是0-255之间，表示的是颜色。第四个数字代表颜色透明度，值在0-1之间
0-完全透明，1-不透明。从0-1，值越大，透明度越低
*/
color:rgb(202, 11, 129, 0.5);

2、font-size 字体大小

font-size用来设置字体大小，常用的单位是px像素，%百分比，移动端用的单位是vw,vh,rem,em等

/* 1、px像素单位 */

/* 字体大小20px */
font-size: 20px; 
/* 注意：
  网页文字默认的字体大小是16px；
  浏览器支持的最小字体大小是12px，如果设置的字体小于12px，默认都会以12px大小显示。
*/

/* 2、%百分比单位：百分比是相对于父元素的字体大小而言的 */
body{
    font-size: 24px;
}
div{
    font-size: 50%; /* 相对于父元素body而言，17*0.5 */
}

3、font-weight 字体粗细

/* 正常粗细 等价于 font-weight: 400; */
font-weight: normal;
/* 加粗 等价于 font-weight: 700; */
font-weight: bold;

/* 注意：当使用数字来表示粗细时，数字大小介于1-1000之间，更大的数字比更小的数字表示的字体要相对粗一些。
  属性值：
  	normal：正常粗细，等价于400
  	bold：加粗，等价于700
  	lighter：比从父元素继承来的值更细（处在字体可行的粗细范围内）
  	bolder：比从父元素继承来的值更粗（处在字体可行的粗细范围内）
*/

4、font-style 字体样式

<style>
	/* font-style属性用于设置字体的倾斜 */
	p i {
	  font-style: normal; /*取消倾斜*/
	}
	.line1 {
	  font-style: italic; /*倾斜字体，如果当前字体没有斜体版本，会选用oblique替代*/
	}
	.line2 {
	  font-style: oblique; /*倾斜字体*/
	}
</style>

5、font-family 字体类型

/* 
font-family属性用于设置字体类型，浏览器的默认字体是"微软雅黑"；
可以设置多个字体类型，后面的字体为前面字体的"后备"字体
*/
font-family:"微软雅黑";
font-family:"Microsoft Yahei";
/* 同时设置多个字体类型 */
font-family:"Times New Roman", Times, serif;
/* 注意：
  中文字体要用双引号包裹,英文字体可不用
  字体通常必须是用户计算机中已经安装好的字体，所有一般设置为"微软雅黑"和"宋体"较多
*/

6、@font-face 自定义字体

@font-face 可以消除对用户电脑字体的依赖，如果用户电脑中没有我们想要的字体，那用户在浏览网页时就会下载相关字体，然后显示字体效果。

/* 1、准备工作：
需要同时有 eot, woff2, woff, ttf, svg 这5种字体文件，要不然有的电脑就会不显示了
阿里巴巴提供了一套免费商业授权的普惠字体：https://www.iconfont.cn/webfont
*/

/* 2、定义字体 */
@font-face{
   font-family: ; /* 字体类型 */
   src: url();    /* 引入字体文件 */ 
}

---

上一篇文章	下一篇文章
CSS选择器（二）	CSS常用属性之文本属性（四）