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