如何在 CSS 样式 sheet 中使用动态字体 url

Question

我正在构建一个小部件，用户可以设计该小部件，然后将其嵌入到他们自己的网站上。他们可以选择的一件事是我们在 AWS 上自行托管的字体。

在初始加载期间，应用程序点击我们的 API 以获取小部件详细信息，响应中返回字体 URL。然后我们将其设置为 CSS 变量，如下所示：

HTML:

<div v-bind:style="cssProps">

Vus JS :

cssProps(){
  return {
    '--accent_color': "#" + this.$store.state.accent_color,
    '--font-url': (this.$store.state.font != null ? "https://wifiuploads.s3.amazonaws.com/" + this.$store.state.font : '"Source Sans Pro", sans-serif'),
  }
}

我遇到的主要问题是我无法像这样插入动态 url：

@font-face {
  font-family: "user_selection";
  src: url(var(--font-url));
}

我不能为字体使用静态 url，我需要使用动态 URL.

将字体加载到我的样式表中

Answer 1

为了解决这个问题，我使用 Javascript:

创建了一个带有字体规则的样式元素

JS:

created(){
      var newStyle = document.createElement('style');
      newStyle.appendChild(document.createTextNode("\
      @font-face {\
          font-family: 'user_selection';\
          src: url('https://wifiuploads.s3.amazonaws.com/" + this.$store.state.font + "');\
      }\
      "));

      document.head.appendChild(newStyle);

    },

CSS:

body{
    font-family: "user_selection";
  }

如何在 CSS 样式 sheet 中使用动态字体 url

How do I use a dynamic Font url in a CSS style sheet

css

vue.js

css-variables

dynamic-url