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-small
- x-small
- small
- medium(默认)
- large
- x-large
- xx-large

举个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>OK</title><style>#p1 {font-size: small}#p2 {font-size: large;}#p3 {font-size: 20px;}</style></head>
<body><p id="p1">我是p1</p><p id="p2">我是p2</p><p id="p3">我是p3</p>
</body>
</html>

页面：

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之后有其他字体，则其他字体均失效。

举个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS</title><style>h1 {font-family: "微软雅黑";}#datam {/*font-family: "宋体";*/font-family: "Lucida Console", "宋体";/*怎么才能解决 多系统下面不同字体的兼容问题？*/}div p {font-family: "%u9ED1%u4F53";}</style></head>
<body><h1>兔兔之家</h1><p id="datam">数据挖掘是指从大量的数据中通过算法搜索隐藏于其中信息的过程。数据挖掘通常与计算机科学有关，并通过统计、在线分析处理、情报检索、机器学习、专家系统</p><div><p>需要是发明之母。近年来，数据挖掘引起了信息产业界的极大关注，其主要原因是存在大量数据，可以广泛使用，并且迫切需要将这些数据转换成有用的信息和知识。获取的信息和知识可以广泛用于各种应用，包括商务管理，生产控制，市场分析，工程设计和科学探索等</p></div></body>
</html>

页面：

font-weight

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

属性值
- normal
- bold
- bolder
- lighter
- 100 ~ 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(从父元素继承字体样式)

举个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>OK</title><style>#p1 {font-style: oblique;   /* 让文字进行倾斜显示*/}#p2 {font-style: italic;  /*使用文字本身的斜体样式显示。*/}</style>
</head>
<body><p id="p1">俺是p1标记</p><p id="p2">俺是p2标记</p></body>
</html>

页面：

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

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

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

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

font:综合设置字体样式

font属性可以在一个声明中设置所有字体属性，它的格式为：

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

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

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

举个例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>OK</title><style>#p1 {font: oblique 700 20px "微软雅黑";}</style>
</head>
<body><p id="p1">俺是p1标记</p></body>
</html>

页面：