css Mac和iOS设备上的Safari未加载自定义字体

2vuwiymt 于 2022-12-15 发布在 Mac

关注(0)|答案(2)|浏览(270)

在Safari浏览器上，我使用的woff2格式的显示字体（Recoleta）根本无法加载，但在Chrome和Firefox上运行良好。
我正在使用Tailwind处理CSS和本地woff2文件。

示例字体导入

@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Bold.woff2') format('woff2');
  font-weight: 700 800;
  font-style: normal;
}

在Safari上的外观

在Firefox和Chrome上的显示效果

Tailwind正在正确地应用类，它似乎知道Recoleta字体。

另外我的文本字体Helvetica似乎工作正常。我也尝试过导入TTF文件，但它似乎没有任何作用。

css

来源：https://stackoverflow.com/questions/74735889/safari-on-mac-and-ios-devices-is-not-loading-a-custom-font

2条答案

按热度按时间

lp0sw83n1#

你能试试这个吗：

@font-face {
  font-family: 'Recoleta';
  src: url('/fonts/Recoleta-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: antialiased !important;
  font-display: swap !important;
}

赞(0）回复(0）举报 2022-12-15

ubof19bj2#

我没有将globals.css文件导入到我的astro布局组件中：（现在可以使用了

赞(0）回复(0）举报 2022-12-15