Question

我遇到了涉及CSS变量和at-rules的问题。我在:root范围内声明了以下变量：

:root {
    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-semibold: 600;
}

以及以下规则：

@font-face {
    font-family:  'Proxima Nova';
    font-display: swap;
    font-style:   normal;
    font-weight:  var(--font-weight-light);
    src: url('/fonts/proximanova-light.woff') format('woff');
}

/* other font-face rules for other font variants */

当我尝试使用这些声明来设置我的段落样式时：

p {
    font-family: 'Proxima Nova';
    font-weight: var(--font-weight-light);
}

结果不符合预期（轻字体变体），而是字体变体是最后声明的。

当我在at-rule中对font-weight: 300;进行硬编码时：

@font-face {
    font-family:  'Proxima Nova';
    font-display: swap;
    font-style:   normal;
    font-weight:  300; /* var(--font-weight-light) */
    src: url('/fonts/proximanova-light.woff') format('woff');
}

一切似乎都有效。

我怀疑我的情况不起作用，因为:root是所有选择器的基类，而at-rules不属于:root。这样，at-rules无法访问:root中定义的CSS变量。

我该如何解决这个问题？或者我错过了什么？

谢谢！

P.S。我想用标准的CSS解决这个问题。我知道SASS变量等等。谢谢！：）

更新

我整理了一个可运行的代码片段，说明了这个问题。段落的字体应该是Arial，但我们看到Comic Sans ......

:root {
  --font-weight-light:    300;
  --font-weight-semibold: 600;
}

@font-face {
  font-family:  'Foo Sans';
  font-display: swap;
  font-style:   normal;
  font-weight:  var(--font-weight-light);
  src:          local('Arial');
}

@font-face {
  font-family:  'Foo Sans';
  font-display: swap;
  font-style:   normal;
  font-weight:  var(--font-weight-semibold);
  src:          local('Comic Sans MS');
}

p {
  font-family: 'Foo Sans';
  font-weight: var(--font-weight-light);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Text</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum ullamcorper elementum. In vitae mi viverra, congue nisi in, accumsan libero. Cras convallis, tortor ac semper molestie, ex orci dapibus dolor, at suscipit enim magna vel ligula. Suspendisse quis tristique urna. Quisque posuere mi sed sem faucibus malesuada. Duis quis orci bibendum sapien rhoncus sollicitudin. Donec sodales magna ut blandit porttitor. Proin dictum augue a justo vehicula auctor.</p>
  </body>
</html>

Answer 1

实际上browsers无法呈现CSS variable value。而不是render var(--font-weight-light);。但是您的CSS variable属性可以使用。因为browser不是编译器。请参阅screenshot。此rules不支持IE，Opera和所有旧版本browsers。 Using CSS custom properties (variables)

:root {
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-bold:    700;
}
div{
  font-family: 'Open Sans', sans-serif;
  font-weight: var(--font-weight-bold);
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

CSS变量和at-rules

1 个答案: