Question

我似乎完全被困住了。我已经为此奋斗了一天，开始相信这可能超出了我的控制范围。我已引用了所有与我的问题零成功相关的问题。

我正在使用的字体似乎仅在Safari上的字体粗细显得更轻。我下载并正在使用Brandon Text（常规Brandon，而不是Brandon怪诞的字体）。这是我当前的CSS字体系列配置：

@font-face {
  font-family: "brandon-text";
  src: url('HVD Fonts - BrandonText-Regular.otf') format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "brandon-text";
  src: url('HVD Fonts - BrandonText-Bold.otf') format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: "brandon-text";
  src: url('HVD Fonts - BrandonText-Medium.otf') format("truetype");
  font-weight: 500;
}

我尝试过的不成功的事情：

下载我正在使用的所有格式的字体，并使用以下模板进行配置以实现跨浏览器支持：

  @font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS*/
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

这不起作用。

使用CSS -webkit-font-smoothing：

  -webkit-font-smoothing: subpixel-antialiased;
                  /* or */
  -webkit-font-smoothing: antialiased;

这不起作用。

使用CSS -webkit-text-stroke：
```
  -webkit-font-smoothing: 0.5px;
```
这是一个不错的最后解决方案，但是文本看起来有点时髦，看起来像是双层的，好像每个字母彼此叠放两个字母。这也是webkit，它将同时应用于chrome和已经按预期呈现我的字体。

话虽这么说，由于不同的浏览器支持不同的字体渲染引擎，因此没有解决方案吗？不管格式如何，所有浏览器都不能支持我使用的字体吗？任何建议都将是有帮助的。试图弄清楚我是否应该继续深入研究或继续前进。下面的链接是Chrome与Safari上字体粗细差异的图片参考。

Chrome-Safari

@ font-face字体粗细仅在Safari上看起来更薄

0 个答案: