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