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。

在css中复制@ font-face声明，url取两次？

1 个答案: