07-字体及文本样式

字体及文本样式

1.文本属性

• 字体颜色 color

• 打开或关闭斜体文字 font-style

• 设置字体粗细程度 font-weight

• 设置字体大小 font-size

• 设置文字指定的特殊的字体，浏览器只会使用浏览器可以访问到的字体 font-family

• 网络字体 webFont

• 设置或取消文本修饰 text-decoration

• 设置文字排列方式 text-align

• 设置文本缩进 text-indent

• 设置或取消字体改变 text-transform

• 设置或取消文本阴影（上右下左 顺时针） text-shadow

1.1颜色属性

可以通过color来改变字体颜色

color：值;

1.1.1颜色的取值

英文单词

​ 一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达

rgb

格式为：rgb(0,0,0)

rbg(red,green,blue)

第一个数字就是用来设置三原色的光源元件红色显示的亮度
第二个数字就是用来设置三原色的光源元件绿色显示的亮度
第三个数字就是用来设置三原色的光源元件蓝色显示的亮度

这其中的每一个数字它的取值是0-255之间, 0代表不发光, 255代表发光, 值越大就越亮

例如：

​ 红色: rgb(255,0,0);
​ 绿色: rgb(0,255,0);
​ 蓝色: rgb(0,0,255);
​ 黑色: rgb(0,0,0);
​ 白色: rgb(255,255,255);

​ 在前端开发中其实并不常用黑色
​ 只要让红色/绿色/蓝色的值都一样就是灰色
​ 而且如果这三个值越小那么就越偏黑色, 越大就越偏白色

rgba

与rgb一样就是多了一个a，a代表透明度取值为0-1，取值越小越透明

十六进制

​ 在前端开发中通过十六进制来表示颜色, 其实本质就是RGB
​ 十六进制中是通过每两位表示一个颜色
​ 例如: #FFEE00 FF表示R EE表示G 00表示B

1.1.2 font-style

用于打开或关闭斜体文字

格式：font-style：italic;

取值：

​ normal：(默认) 正常的

​ italic：倾斜的

快捷键：

fs font-style：italic；

fsn font-style:normal;

1.1.3 font-weight

设置字体粗细程度

格式：font-weight:bold;

取值：

​ bold 加粗

​ bolder 比加粗 还要粗

​ lighter 细线 （默认）

数字取值：

​ 100-900之间整百的数字

​ 400等同于normal

​ 700等同于bold

快捷键：

​ fw font-weight;

​ fwb font-weight:bold;

​ fwbr font-weight:bolder;

1.1.4 font-size

字体大小

格式：font-size：30px;

单位：px（像素）！！！一定要带单位

快捷键：

​ fz:font-size；

​ fz30 font-size：30p;

1.1.5 font-family

指定的特殊字体

格式：font-family:“楷体”;

​ 通用字体 (直接使用，不需要加引号)
​ serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线
​ sans-serif:无衬线的字体，笔画结尾是平滑的字体
​ monospace:等宽字体，用于代码，字体中每个字宽度相同
​ cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果。
​ fantasy:装饰字体 ，具有特殊艺术效果的字体

​ 注意点：
​ 1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加
​ 2.设置的字体必须是用户电脑里面已经安装的字体
​ 3.如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体
​ 4.如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
​ 可以给字体设置备选方案
​ 格式:font-family:“字体1”, “备选方案1”, …;
​ 5.如果想给中文和英文分别单独设置字体, 怎么办?
​ 但凡是中文字体, 里面都包含了英文
​ 但凡是英文字体, 里面都没有包含中文
​ 也就是说中文字体可以处理英文, 而英文字体不能处理中文
​ 注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面
​ 6.补充在企业开发中最常见的字体有以下几个
​ 中文: 宋体/黑体/微软雅黑
​ 英文: “Times New Roman”/Arial

​ 还需要知道一点, 就是并不是名称是英文就一定是英文字体
​ 因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文
​ 宋体 SimSun
​ 黑体 SimHei
​ 微软雅黑 Microsoft YaHei

​ 快捷键
​ ff font-family:;

1.1.6 缩写格式

格式：font：style weight size family；

注： 1.在这种缩写格式中有的属性值可以省略
sytle可以省略
weight可以省略
2.在这种缩写格式中style和weight的位置可以交换
3.在这种缩写格式中有的属性值是不可以省略的
size不能省略
family不能省略
4.size和family的位置是不能随便乱放的
size一定要写在family的前面, 而且size和family必须写在所有属性的最后

1.1.7 WebFont

https://www.ziti163.com/webfont/

当用户电脑中没有安装对应字体的时候，webFont可以加载网络字体进行显示。

@font-face {            
    font-family: 'myfont';          
    src: url(“/fonts/test.woff”), url("/fonts/test.ttf");       
}       
div {           
    font-family: myfont;        
}
<div>        
  test  
</div>

1.1.8 字体图标

	在开发网站的时候需要各种各样的小图标，这些图标如果要求美工绘制可能比较麻烦，那么我们可以直接使用开源的字体图标库，这些字体图标库使用webFont原理，我们加载一个图标就好像加载一个字体一样简单，通过控制字体大小，字体颜色来控制图标的大小与颜色。

目前比较流行的开源字体图标库有

iconfont http://www.iconfont.cn/