CSS中@font-face声明重复，URL被获取两次？

Question

我正在覆盖一个 @font-face 的 css 声明：

/* ORIGINAL */
@font-face {
  font-family: 'Font1';
  src: url('/PATH1/font1.eot');
  ...
}

/* MY OVERRIDE */
@font-face {
  font-family: 'Font1';
  src: url('/PATH2/font1.eot');
  ...
}

我注意到浏览器尝试同时获取两条路径："/PATH2/font1.eot" 和 "/PATH1/font1.eot"。是否有一种方法可以避免其中一条路径，只保留一条呢？

谢谢。

- ʞᴉɯ

---

你必须从原始代码中删除它，否则你实际上要求计算机加载字体，然后你要求它加载另一个字体，并告诉它覆盖第一个字体... - Yann Chabot

也许这可以帮助您 https://dev59.com/cGQn5IYBdhLWcg3wW2D3#16904853 - DaniP

Answer 1

@font-face规则定义了外部字体：

<style id="customfont">
@font-face {

  font-family: a_font;
  src: url(https://fonts.gstatic.com/s/quicksand/v22/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2);
}

body {
  font-family: a_font !important;
}
</style>
<p>Some text. The quick brown fox jumped over the lazy dog... but it didn't make it up all the way.</p>

要更改它，请修改元素的 innerHTML 属性。

以下是修改元素 HTML 代码的方法：

+--------------+------------------------------+
| innerHTML    | HTML within the tags         |
+--------------+------------------------------+
| outerHTML    | HTML, with the tags          |
+--------------+------------------------------+
| appendChild  | add an element to the end    |
+--------------+------------------------------+
| prepend      | prepend element              |
+--------------+------------------------------+

这个例子使用innerHTML：

<style id="customfont">
@font-face {

  font-family: a_font;
  src: url(https://fonts.gstatic.com/s/quicksand/v22/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-wg.woff2);
}

body {
  font-family: a_font !important;
}
</style>
<p>Some text. The quick brown fox jumped over the lazy dog... but it didn't make it up all the way.</p>
<button onclick="change()">Change @font-face src</button>
<script type="text/javascript">
function change() {
  var newstyle=document.getElementById('customfont');
  var newfontsrc="https://fonts.gstatic.com/s/sofia/v9/8QIHdirahM3j_su5uI0.woff2";
  var newtext = '@font-face {\n';
  newtext += 'font-family:a_font;\n';
  newtext += 'src:url('+newfontsrc+');\n';
  newtext += '}\n';
  newtext += '\nbody {\n'
  newtext += '  font-family:a_font !important;\n';
  newtext += '}'
  newstyle.innerHTML=newtext;
}
</script>

这应该改变字体的来源。

- Someone_who_likes_SE