1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

字体粗细

通过 font-weight 可以设置字体的粗细,它接收以下的值。

  • 数字:一个介于 1 到 1000 之间的数字,查看 MDN 的粗细值名称和数值对应关系
  • normal:默认值,正常粗细,与 400 相等。
  • bold:加粗,与700相等。
  • lighter:比继承的值稍细。
  • bolder:比继承的值稍粗。

$$tip

设置的字体粗细是否起效,要看系统中的字体是否提供了对应的粗细字体。

$$

$$tip

有关 lighterbolder 的相对变化可以查看 MDN 的相对粗细值的解析

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/JjOZWQj?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

字体大小

通过 font-size 可以设置文本的字体大小,常用取值有以下选择:

  • 长度:取值参考长度单位章节
  • 百分比:相对父元素字体大小的百分比。
  • larger:比父元素字体更大。
  • smaller:比父元素字体更小。

$$tip

更多取值选项可以查看 MDN 的 font-size 章节

$$

$$tip

网页默认的字体大小是 16px

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/bGYvadr?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

字体样式

font-style 属性可以设置显示的字体样式,有以下取值:

  • normal:默认值,常规字体。
  • italic:斜体,如果字体没有提供 italic 字体,则采用 oblique 字体,如果也没有则浏览器自动合成。
  • oblique:倾斜体,如果字体没有提供 oblique 字体,则采用 italic 字体,如果也没有则浏览器自动合成。

$$tip

有关 font-style 斜体的选择规则可以参考 w3c 的字体样式官方说明

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/KKyeWrR?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

字体族名

通过属性 font-family 可以让我们指定显示文本的字体族名,属性值接受一个字体族名列表,用逗号分隔。显示文本时会依次顺序匹配系统中的字体族名,直接找到对应的字体。

$$tip

如果电脑中没有安装对应的字体,那么将不能成功应用。

$$

$$tip

Windows 下的字体文件被存放在 C:\Windows\Fonts 目录中。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/jOazYgJ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

$$tip

当字体名字间有空格时应用双引号把字体名包裹起来。

$$

引入字体文件

@font-face 是 CSS3 中的一个字体模块,它允许我们引入一个字体文件。

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/VwrdyrZ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

$$tip

使用字体文件时需要注意版权问题,如果要挑选免费的字体可以到 google fonts

$$


练习

  1. 引入你喜欢的字体展示一段文本。