css字体倾斜_Web前端开发技术，CSS字体属性介绍，提升前端小白能力

1、使用CSS属性指定和改变字体外观&＃xff0c;常见的属性有&＃xff1a;

font-style: italic; 定义字体的风格

font-weight: bold; 定义字体粗细

font-size: 20px; 定义字体大小

line-height: 30px; 定义一段文字的行高

还可以使用简写形式&＃xff0c;把所有属性值放到font属性中&＃xff0c;如&＃xff1a;

2、Font-family 属性可以设置文字字体样式&＃xff0c;比如常用的中文字体有&＃xff1a;微软雅黑&＃xff0c;黑体&＃xff0c;宋体等&＃xff1b;常用的英文字体有&＃xff1a;Verdana&＃xff0c;arial&＃xff0c;Times New Roman等。Font-family 后面可以定义一个字体&＃xff0c;也可以定义一个字体列表。为什么需要使用字体列表呢&＃xff1f;因为我们无法控制用户计算机上安装什么字体&＃xff0c;不仅如此&＃xff0c;往往操作系统也不一样&＃xff0c;比如在苹果的Mac电脑上有的字体&＃xff0c;在微软的Windows上就不一定有&＃xff0c;所以最好为字体指定一个可选的字体列表。字体列表实际上就是一个字体有限列表&＃xff0c;如下&＃xff0c;第一个微软雅黑是我希望使用的&＃xff0c;浏览器会尽力加载这个字体&＃xff0c;如果用户电脑上没有这个字体就使用第二个备用字体&＃xff0c;依次类推&＃xff0c;字体列表最后面应该制定一个通用字体系列。

3、什么是通用字体系列&＃xff1f;在CSS中定义了5个通用字体系列&＃xff1a;

· Sans-serif字体系列&＃xff1a;无衬线字体&＃xff0c;笔画粗细一致&＃xff0c;在计算机屏幕上更容易阅读

· Serif字体系列&＃xff1a;有衬线字体&＃xff0c;笔画末端有装饰性的线条或凸起&＃xff0c;报纸正文中使用的字体

· Monospace字体系列&＃xff1a;等宽字体&＃xff0c;每个字母宽度一致&＃xff0c;用于显示软件代码示例

· Cursive字体系列&＃xff1a;手写体

· Fantasy字体系列&＃xff1a;装饰性字体&＃xff0c;设计感较强

所以&＃xff0c;候选字体列表中的字体通常来自于同一个字体系列&＃xff0c;这样当浏览器找不到优先定义的字体使用备用字体时&＃xff0c;页面展示的效果不会有太大的变化。如果前面指定的特定字体都没有找到&＃xff0c;浏览器就从sans-serif字体系列中找一个默认的字体。

4、font-size 调整字体大小的方法有三种&＃xff1a;

1&＃xff09;使用像素px&＃xff0c;如&＃xff1a;

注意&＃xff1a;20和单位px之间不能有空格&＃xff0c;文字的大小就是文字的最低部分和最高部分之间时20像素

2&＃xff09;使用%定义字体大小就是相对于父元素的字体大小&＃xff0c;如&＃xff1a;p标签时body的子标签&＃xff0c;body定义的字体大小是20px&＃xff0c;所以子标签p的字体大小是父标签的150%即30px。

3&＃xff09;使用em调整字体大小&＃xff0c;类似于百分数&＃xff0c;也是一个相对的度量单位&＃xff0c;使用em的时候要指定一个比例因子&＃xff0c;p标签是父标签字体大小的1.2倍即24px。

5、font-weight 属性可以改变字体的粗细&＃xff0c;bold为粗体&＃xff0c;normal为去掉粗体的样式。

字体的粗细还有lighter为稍细&＃xff0c;bolder稍粗&＃xff0c;或者使用数字100、200-900&＃xff0c;但是这些都没有得到字体和浏览器的广泛支持&＃xff0c;通常并不适用&＃xff0c;了解即可。

6、font-style为字体增加风格

有三个可能的值&＃xff1a;normal&＃xff08;正常&＃xff09;&＃xff0c;italic&＃xff08;斜体字符&＃xff09;&＃xff0c;oblique&＃xff08;倾斜文本&＃xff09;&＃xff1b;其中italic是专门为正常字体设计的斜体字符&＃xff0c;oblique没有专门的斜体字符&＃xff0c;由浏览器负责把正常的字体倾斜显示&＃xff0c;因为不是所有的字体定义了斜体字符&＃xff0c;所以使用italic定义字体风格时&＃xff0c;浏览器找不到这个字体的斜体字符&＃xff0c;就通过oblique把正常的字体倾斜显示&＃xff0c;有时候看着是一样的&＃xff0c;有时候则不同&＃xff0c;除非非要区分斜体和倾斜文本&＃xff0c;不然可以选择一种使用。

7、line-height 调整行高&＃xff0c;定义一个盒子内每一行文字之间的距离。

每天进步一点点&＃xff0c;跟着教头学开发。

点一下链接&＃xff1a;自己总结录制的前端精讲视频和学习路线&＃xff0c;分享

在成为一个优秀的前端工程师的道路上&＃xff0c;充满了汗水和辛劳