如何覆盖Safari中用于粗体显示的字体？

Question

我有一个嵌入WebKit的应用程序，并允许我通过CSS自定义其外观。它在多个地方使用font-weight: bold;。我想用粗体变体代替字体的中等变体，而我发现它太粗了。以下内容适用于Chrome / Mac和Firefox / Mac，但不适用于Safari / Mac：

/* Demonstrating with Avenir, which comes with macOS. */

@font-face {
  font-family: 'Foo';
  font-style: normal;
  font-weight: normal;
  src: local('Avenir-Light');
}

@font-face {
  font-family: 'Foo';
  font-style: normal;
  font-weight: bold;
  src: local('Avenir-Medium');
}

.foo {
  font-family: 'Foo';
}

.control {
  font-family: 'Avenir';
}

.control.normal {
  /* Should be light. */
  font-weight: 100;
}

.control.bold {
  /* Should be medium. */
  font-weight: 500;
}

.foo.normal {
  font-weight: normal;
}

.foo.bold {
  /* NOTE: I cannot change this value, it must remain bold. */
  font-weight: bold;
}


/* Rest of this is just to make the
   example easier to look at.  */

html {
  /* Easier to see */
  font-size: 200%;
}

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 5px 10px;
  text-align: center;
}

<table>
<tr>
  <th>"Foo" font</th>
  <th>"Avenir" font</th>
</tr>
<tr>
  <td class="foo normal">Lorem ipsum</td>
  <td class="control normal">Lorem ipsum</td>
</tr>
<tr>
  <td class="foo bold">Lorem ipsum</td>
  <td class="control bold">Lorem ipsum</td>
</tr>
</table>

（如果您愿意，也可以在jsfiddle上使用：https://jsfiddle.net/t6jupywo/19/）

Chrome（正确）：

Firefox（正确）：

Safari（不正确）：

1. 为什么在Safari中无法使用？ （我猜“这是一个[已经存在了20年的错误]”。）

2. 假设我不能（也不会）在整个CSS上s/font-weight: bold;/font-weight: 500;/g，该怎么办？