跳到主要内容

字体

字体样式​

字体类型​

font-families 属性​
  • 设置字体类型；
.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}
读取机制​
  • 读取第一个，若不存在，则读取第二个；
  • 以此类推；
属性值​
  • family-name：具体字体名称；
  • generic-name：字体类型；
    • serif：衬线；
    • sans-serif：无衬线；
    • monospace：等宽；
    • cursive：手写体；
    • fantasy：花字体；

字体颜色​

  • 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;
}

网络安全字体​

网络安全字体​
  • 基本所有设备都支持的字体类型；
常见字体​
  • 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;
}

最佳实践​

chrome 设置小于 12 px 的文字​

机制​
  • chrome 设定最小中文字体字号为 12 px；
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;
}