在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>