Question

我尝试在Storybook中使用字体，但在Chrome中出现失败无效属性值。我对Sass和故事书完全陌生。

主Sass文件（代码缩短）：

@import './src/assets/sass/color.sass'
@import './src/assets/sass/font.sass'

.flex-container
  display: -webkit-flex
  display: flex
  -webkit-flex-flow: row wrap
  flex-flow: row wrap
  padding: $cube

.flex-item
  -webkit-flex: 1 0 auto
  flex: 1 0 auto

p
  font: $font-normal
  size: $font-size-large

字体Sass文件（代码缩短）：

@font-face
    font-family: 'Verdana'
    src: url('src/assets/font/Verdana.ttf')

$font-normal: Verdana

这里是组件的HTML。

     <div class="flex-item">
    <h1>Letter</h1>
    <p>abcdefghijklmnopqrstuvwxyz</p>
    </div>
    <div class="flex-item">
        <p>1234567890</p>
    </div>
    <div class="flex-item">
    <p>!"§$%&/()=?"</p>
    </div>

如何使用该字体？我在做什么错了？

Answer 1

由于@font-face声明了字体系列，请尝试使用font-family属性而不是font

@font-face
  font-family: 'Verdana'
  src: url('src/assets/font/Verdana.ttf')

$font-normal: 'Verdana'

p
 font-family: $font-normal, serif
 size: $font-size-large

Answer 2

font是一种简写形式，它需要比font-family

更多的值

来自CSS - font | MDN：

如果将字体指定为几个与字体相关的属性的简写，则：

它必须包含以下值：


<font-size>

<font-family>

所以要么使用

p
  font: $font-size-large $font-normal

或

p
  font-family: $font-normal
  font-size: $font-size-large

SASS无效的属性值

2 个答案: