如何在@ 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'

Answer 1

如果要在自定义属性中指定URL，则需要写出整个url（）表达式，并替换为整个表达式：

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

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

Answer 2

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

Answer 3

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