CSS基础(part7)--字体样式属性

学习笔记，仅供参考，有错必纠

参考自：CSS中文文档

文章目录

​​CSS​​

​​CSS的长度单位​​​​字体样式属性​​

​​font-size​​​​font-family​​​​font-weight​​​​font-style​​​​font:综合设置字体样式​​

CSS

CSS的长度单位

绝对长度

​​cm​​：厘米

​​mm​​：毫米

​​in​​：英寸

​​pc​​：派卡

相对长度

​​px​​：像素点，像素就是显示器显示的一个点；

若把影像放大数倍，会发现这些连续色调其实是由许多色彩相近的小方点所组成，这些小方点就是构成影像的最小单位像素。这种最小的图形的单元能在屏幕上显示通常是单个的染色点。像素的大小是会变的，也称为相对长度。越高位的像素，其拥有的色板也就越丰富，越能表达颜色的真实感。-- 百度百科

​​em​​：1em默认为16px，如果我们设置font-size为1.5em，那么当前元素的字体大小为24px(16*1.5)

单位之间的关系

1in = 2.54cm = 25.4mm = 96px

字体样式属性

font-size

font-size属性用于设置不同HTML元素的字体大小。

属性值

xx-smallx-smallsmallmedium(默认)largex-largexx-large

举个例子

我是p1

我是p2

我是p3

页面：

font-family

font - family属性可以指定一个元素的字体。

在网页中常使用的字体有宋体、微软雅黑、黑体等，例如，将网页中所有p标签下的字体设置为微软难黑，可以使用如下CSS样式代码：

p { font-family: "微软雅黑"; }

我们可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。如果字体名称包含空格或中文，则应使用引号括起，例如：

p { font-family: Verdana, Arial, "宋体"; }

注意事项

各种字体之间必须使用英文状态下的逗号隔开；中文字体需要加英文状态下的引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前；如果字体名中包含空格、#、$ 等符号，则该字体必须加英文状态下的单引号或双引号，例如​​font-family: "Times New Roman"​​；尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示；在CSS中设置字体名称，可以直接写中文。但是在文件编码(GB2312, UTF-8)不匹配时会产生乱码的错误，所以，在CSS中直接使用Unicode编码来编写字体名称可以避免这些错误。使用Unicode编写中文字体名称，浏览器是可以正确的解析的。

如何把中文转换为Unicode编码格式

打开浏览器开发工具DevTools，进入控制台Console：

使用escape()函数，将中文字符转换为Unicode编码格式：

这时，在html页面中，我们就可以这样写：

p { font-family: "%u9ED1%u4F53"; }

中英Unicode对应

衬线体与无衬线体

西方国家字母体系分为两类：衬线字体（serif）以及无衬线体（sans serif）

衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。

无衬线体是无衬线字体，没有这些额外的装饰，而且笔画的粗细差不多。

图示：

我们看一看下面这行代码：

p { font-family: tahoma, arial, sans-serif; }

上面这段代码的意思是，当浏览器不支持前面两个字体时，将会在无衬线体体系中挑选一个字体作为默认字体，如果在sans-serif之后有其他字体，则其他字体均失效。

举个例子

兔兔之家

数据挖掘是指从大量的数据中通过算法搜索隐藏于其中信息的过程。数据挖掘通常与计算机科学有关，并通过统计、在线分析处理、情报检索、机器学习、专家系统

页面：

font-weight

font-weight 属性可以设置文本的粗细。

属性值

normalboldbolderlighter100 ~ 900(定义由粗到细的字符，400 等同于 normal，而 700 等同于bold)

注意事项

字体的加粗跟字体有关，比如：一种字体只有两种粗细程度的变化，那么无论是normal到bold，还是normal到bolder都是一样的。

实例

div {font-weight:bolder;} p {font-weight:900;}

font-style

font-style属性用于指定文本的字体风格，比如，设置斜体、倾斜或者正常字体。

属性值

normal(默认值)italic(斜体的字体样式)oblique(倾斜的字体样式)inherit(从父元素继承字体样式)

举个例子

俺是p1标记

俺是p2标记

页面：

好吧，这两个属性值看起来得到的效果是一样的啊，那它们的区别在哪呢？

oblique和italic的区别(参考自：​​italic 和 oblique 的区别​​)

一些字体有粗体、斜体、下划线、删除线等诸多属性，但是并不是所有字体都都有这些属性，一些不常用的字体，或许就只有一个正常体，如果我们使用 italic，则不会产生效果。

这时候我们就需要用oblique，可以理解成 italic 是使用文字的斜体属性，而oblique是让没有斜体属性的文字倾斜。

font:综合设置字体样式

选择器 { font: font-style font-weight font-size/line-height font-family; }

使用font属性时，必须按上面语法格式(字体样式 字体是否加粗 字体大小 字体类型)中的顺序书写，各个属性以空格隔开。

其中不需要设置的属性可以省略(它们取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。

举个例子

俺是p1标记

页面：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。