CSS 字体设置

  1. font-family
  2. font-size
  3. 实际使用
  4. @font-face

font-family

属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过 @font-face 指定的可以直接下载的字体。

font-family 可以设置字体的通用的字体族名,确保至少满足这个条件让浏览器选择在这个字体族中的字体:

  • serif 衬线字体
  • sans-serif 非衬线字体
  • monospace 等宽字体

字体名字中间有空格时,字体名字要放在单引号内。

font-size

该属性的值会被用于计算 em 和 ex 长度单位,定义该值可能改变其他元素的大小。

  • 绝对大小 small,medium,large
  • 相对大小 larger,smaller
  • 长度值,em,rem,px
  • 百分比值
  • inherit,继承

推荐使用 em。因为 em 可以自动适应用户的字体,em 是一个非常有用的 CSS 单位。

em: em 值的大小是动态的。当定义或继承 font-size 属性时,1em 等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话,那它将等于浏览器默认文字大小,通常是 16px。所以通常 1em = 16px。2em = 32px。 如果你设置了 body 元素的字体大小为 20px,那 1em = 20px、2em = 40px。那个 2 就是当前 em 大小的倍数。

一个常用技巧:

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.6em; /* 1.6em = 16px */
}

实际使用

例如京东的设置:

淘宝的设置:

可以发现,都在 body 里进行设置字体,这说明,字体属性是可以继承的。

@font-face

让浏览器下载并使用服务器提供的字体。
注意版权问题,因为字体保存在了服务器中。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论。
我的空间