上一节:
下一节:

  Stylus 自定义字体(@font-face)

  • 定义和使用

    @font-face 跟其在 CSS 中作用表现一样，在后面简单地添加个块状属性即可，类似下面： 
    @font-face
  font-family Geo
  font-style normal
  src url(fonts/geo_sans_light/GensansLight.ttf)
.ingeo
  font-family Geo
    生成为： 
    @font-face {
  font-family: Geo;
  font-style: normal;
  src: url("fonts/geo_sans_light/GensansLight.ttf");
}
.ingeo {
  font-family: Geo;
}

  • 字面量CSS

    不管什么原因，如果遇到 Stylus 搞不定的特殊需求，你可以使用 @css 使其作为 CSS 字面量解决之。 
    @css {
  body {
    font: 14px;
  }
}
    生成为： 
    body {
  font: 14px;
}

  • 字符转码

    Stylus 可以字符转码。这可以让字符变成标识符，或是渲染成字面量。 
    body
  padding 1 \+ 2
    生成为： 
    body {
  padding: 1 + 2;
}
    注意：Stylus 中/当作为属性使用的时候需要用括号括起来： 
    body
  font 14px/1.4
  font (14px/1.4)
    生成为： 
    body {
  font: 14px/1.4;
  font: 10px;
}
上一节:
下一节: