CSS3 font 学习笔记

LRainner

发布于 2020-07-16 21:22:24

3160

发布于 2020-07-16 21:22:24

文章被收录于专栏：安全学习笔记安全学习笔记

CSS3 font属性

font-family(字体)
font-size(字体大小)
font-style(是否倾斜)
font-weight(是否加粗)
font-variant(设置小型大写字母)
font(设置所有属性)(顺序为style，weight，size，family)

font-family

规定元素的字体序列
可传递多个字体参数，如果浏览器不支持第一个字体，会尝试下一个

font-size

规定字体大小
默认为medium
可能的值：xx-small, x-small, small, medium, large, x-large, xx-large
也可为精确尺寸，单位px, pt, em

font-style

规定使用斜体，倾斜，正常字体
默认为normal
可能的值：normal, italic(斜体), oblique(倾斜)

font-weight

规定使用文本的粗细
默认为normal
可能的值：noraml, bold(粗体), bolder(更粗的字体), lighter(更细的字体)

font.html

<head>
    <title>font-family</title>
    <link rel="stylesheet" href="style_font.css" type="text/css" />
  </head>
  <body>
    <p>Hello World</p>
  </body>

style_font.css

p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  font-style: italic;
  font-weight: bold;
}

等同于

p {
  font: italic bold x-large Georgia, "Times New Roman", Times, serif;
}

font-variant

设置小型大写字母
默认值：normal
可能的值：normal, small-caps(小型大写字母)

p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  font-style: italic;
  font-weight: bold;
  font-variant: small-caps;
}