跳到主要内容

字体

字体样式​

字体类型​

  • font-family 属性;
  • 按声明顺序查找可用字体;
.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

字体颜色​

  • color 属性;
.serif {
  color: red;
}

字体大小​

  • font-size 属性;
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}

字体样式​

  • font-style 属性;
/* 正常 */
.normal {
  font-style: normal;
}
/* 斜体 */
.italic {
  font-style: italic;
}
/* 人为倾斜 */
.oblique {
  font-style: oblique;
}

字体粗细​

  • font-weight 属性;
    • normal: 对应 400;
    • bold: 对应 700;
p {
  font-weight: bold;
}

div {
  font-weight: 600;
}

span {
  font-weight: lighter;
}

网络安全字体​

web safe fonts​

  • 多数设备默认可用的字体类型;

常见字体​

  • serif: Times New Roman;
  • sans-serif: Arial;
  • monospace: Courier New;

自定义字体​

字体格式​

格式MIME type
TrueTypefont/ttf
OpenTypefont/otf
Web Open Font Formatfont/woff
Web Open Font Format 2font/woff2

自定义字体​

@font-face​

@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
font-weight 和 font-style 属性的应用场景​
  • 同一字体, 多个文件, 多个样式;
  • 不同字体, 多个文件, 同一样式;
@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "DroidSerifRegular";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DroidSerifItalic";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

最佳实践​

自适应字体​

  • em 递归继承, 深层元素 font-size 可能过小;
  • em + vw: 字体平滑缩放;
:root {
  font-size: calc(0.5em + 0.4 * vw);
}

chrome 设置小于 12 px 的文字​

最小字号机制​

  • Chrome 中文最小字号默认为 12px;
transform​
  • 使用 transform 属性;
.span10 {
  font-size: 12px;
  display: inline-block;
  transform: scale(0.8);
}
zoom 属性​
  • 使用 zoom 属性;
.span10 {
  font-size: 12px;
  display: inline-block;
  zoom: 0.8;
}