css - 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' .
有没有办法避免两个取之一，只留下一个？

谢谢

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>

这应该会更改字体 src。