如何在@font-face URL中使用CSS变量

Question

:root {
  --icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';
}

@font-face {
  font-family: 'iconfont';
  src: url(var(--icon-url)'.eot');
  src: url(var(--icon-url)'.eot?#iefix') format('embedded-opentype'), url(var(--icon-url)'.woff') format('woff'), url(var(--icon-url)'.ttf') format('truetype'), url(var(--icon-url)'.svg#iconfont') format('svg');
}

模块未找到：错误：无法解析'Users/xxx/xxx'中的'./var（--icon-url'

最初的回答：

这个错误提示表示在指定路径下找不到名为“var（--icon-url”的模块。请检查路径是否正确，并确保该模块存在于指定路径中。

- Jerome

Answer 1

在src或src的url中不支持CSS变量。

- zhoujy

---

截至今日确认。我无法在 :root 中声明 CSS 变量并在外部托管的 CSS 文件的 @font-face 定义中使用它。 - agm1984

这应该是被接受的答案。问题是关于@font-face，它不能使用CSS变量。在看到这个答案之前，我尝试了多种代码变体。 - undefined

Answer 2

如果您想在自定义属性中指定URL，则需要编写整个url()表达式，并替换该整个表达式。

:root {
      --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
   background: var(--url);
}

- Asif vora

---

不同的文件后缀定义了不同的变量？变量是否可以在没有文件的情况下添加后缀？ - Jerome

@Jerome 不，他们不能。 - Temani Afif

Answer 3

发现这个问题已经相当晚了，但是你除了标记了css之外，还标记了sass。在SASS中，你可以将其作为变量包含进去。不过，你必须使用特殊的语法来传递变量。

你需要像这样传递变量：#{$url}，而不仅仅是$url。然后SASS就会知道直接包含字符串。

例如：

/* Set variable in SASS (will not be CSS variable) */
$icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';

@font-face {
  font-family: 'iconfont';
  src: url('#{$icon-url}.eot');
  src: url('#{$icon-url}.eot?#iefix') format('embedded-opentype'), 
       url('#{$icon-url}.woff') format('woff'), 
       url(var(--icon-url)'.ttf') format('truetype'), 
       url('#{$icon-url}.svg#iconfont') format('svg');
}

请注意，此时您可以仅使用woff2和woff，因此可能不需要这个功能。

请参见https://caniuse.com/mdn-css_at-rules_font-face_woff。

- Jeremy Carlson

Answer 4

:root {
  --icon-url: url('//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi');
}

- nazifa rashid