1.字体大小

  • 属性名：font-size
  • 语法：
1
2
3
.one {
  font-size: 50px;
}
  • 注意点
    1. chrome浏览器支持的最小文字为12px, 默认的文字大小为16px，并且0px会自动消失
    2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要使用默认的大小
    3. 通常可以通过给body设置font-size属性，这样body中的其他元素就可以基础这一属性了
  • 接住控制台看样式
    ![[Pasted image 20240819170047.png]]

2.字体族

  • 属性名：font-family
  • 语法：
1
2
3
4
5
.god {
  font-size: 50px;
  /* 字体族都使用：非衬线字体 */
  font-family: "STHupo", "Microsoft YaHei", sans-serif;
}
  • 注意:
    1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
    2. 如果字体名包含空格，必须使用引号包裹起来，为了规范，字体名建议都是用双引号包裹
    3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后续的，通常在最后写上serif(衬线字体)或sans-serif(非衬线字体)
    4. windows 系统中，默认的字体就是微软雅黑

3.字体风格

  • 属性名：font-style
  • 常用值：
  1. normal：正常（默认值）
  2. italic：斜体（使用字体自带的斜体效果，如果没有找到斜体效果，则对字体进行倾斜操作）
  3. oblique：斜体（强制倾斜产生的斜体效果）

    实现斜体时，更推荐使用italic。

  • 语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.black {
	font-size: 50px;
	font-style: normal;
}

.black-one {
	font-size: 50px;
	font-style: italic;
}

.black-two {
	font-size: 50px;
	font-style: oblique;
}

4.字体粗细

  • 属性名：font-weight
  • 常用值：

  • 关键词

    1. lighter：细
    2. normal：正常
    3. bold：粗
    4. bolder：很粗（多数字体不支持）

  • 数值

    1. 100~1000且无单位，数字越大，字体越粗（或一样粗，这个具体得看字体设计时的精确程度）
    2. 100~300等同于lighter，400~500等同于normal，600及以上等同于bold
  • 语法
1
2
3
4
5
6
7
8
9
.life {
	font-size: 30px;
	font-weight: lighter;
}

.moon {
	font-size: 30px;
	font-weight: 600;
}

5.字体复合属性

  • 属性名：font,可以把上述字体样式合并成一个属性
  • 编写规则
  1. 字体大小、字体族必须都写上
  2. 字体族必须是最后一位，字体大小必须是倒数第二位
  3. 各个属性之间用空格隔开
  • 实际开发中更推荐复合写法，但是这也不是绝对的，比如只想设置字体大小，那就直接用font-size属性