Question

我尝试使用@ font-face属性添加自定义字体。当我使用Raleway属性加载下载的Google字体（url()）时，它可以工作。当我尝试使用Raleway属性在本地加载相同字体（local()）时，它仅在所有@ font-face版本（浅色，粗体）上加载raleway-regular字体

这是我的代码。这种单独的@ font-face字体可以正常工作。

@font-face {
  font-family: 'raleway-regular';
  font-style: normal;
  font-display: swap;
  src: local('raleway'),
  url('../fonts/raleway-regular.woff2') format('woff2'),
  url('../fonts/raleway-regular.woff') format('woff'),
  url('../fonts/raleway-regular.ttf') format('truetype'),
  url('../fonts/raleway-regular.eot') format('embedded-opentype');
}

但是，当我尝试使用以下代码加载粗体版本时，local() 属性不会加载本地安装的粗体字体。 url()工作正常。如果将local()的值更改为local（raleway），它将加载字体，但不加载粗体版本。

@font-face {
  font-family: 'raleway-black';
  font-style: normal;
  font-display: swap;
  font-weight 900;
  src: local('raleway-black'),
  local ('raleway black'),
  url('../fonts/raleway-black.woff2') format('woff2'),
  url('../fonts/raleway-black.woff') format('woff'),
  url('../fonts/raleway-black.ttf') format('truetype'),
  url('../fonts/raleway-black.eot') format('embedded-opentype');
}

我在这里做什么错了？

使用@ font-face属性时不会加载本地安装的字体

0 个答案: