学习笔记，仅供参考，有错必纠
参考自：CSS中文文档
文章目录
-
CSS
-
字体样式属性
- 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
-
举个例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OKtitle>
<style>
#p1 {
font-size: small
}
#p2 {
font-size: large;
}
#p3 {
font-size: 20px;
}
style>
head>
<body>
<p id="p1">我是p1p>
<p id="p2">我是p2p>
<p id="p3">我是p3p>
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之后有其他字体，则其他字体均失效。
- 举个例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSStitle>
<style>
h1 {
font-family: "微软雅黑";
}
#datam {
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(从父元素继承字体样式)
-
举个例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OKtitle>
<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属性将不起作用。
- 举个例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OKtitle>
<style>
#p1 {
font: oblique 700 20px "微软雅黑";
}
style>
head>
<body>
<p id="p1">
俺是p1标记
p>
body>
html>
页面：
Original: https://blog.51cto.com/u_15181342/5355113
Author: GoatGui
Title: CSS基础(part7)–字体样式属性
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/517624/
转载文章受原作者版权保护。转载请注明原作者出处！