Question

我想知道是否可以用字体系列替代引导程序。我有字体：

@font-face {
  font-family: 'customFont Normal';
  font-weight: 400;
  font-style: normal;
  src: local(customFont-Normal),
    url(<filepath>) format(<file_type>);
}

@font-face {
  font-family: 'customFont Bold';
  font-weight: 700;
  font-style: normal;
  src: local(customFont-Bold),
    url(<filepath>) format(<file_type>);
}

@font-face {
  font-family: 'customFont Thin';
  font-weight: 200;
  font-style: normal;
  src: local(customFont-Thin),
    url(<filepath>) format(<file_type>);
}

从我对font-face的理解来看，每当我在元素上指定权重并且匹配最接近的权重时，就可以使用多个具有不同权重的字体来自动将这些字体应用于HTML。但是我目前正在使用bootstrap v4，它具有自己的默认字体。所以我将其添加到我的scss中以覆盖它：

$font-family-sans-serif: 'customFont Normal', 'customFont Bold', 'customFont Thin', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:       $font-family-sans-serif !default;

但这仅将第一个字体应用于我的网站，并且更改元素的权重并不会更改字体。有没有办法将所有这些结合在一起以覆盖引导字体，同时保持font-face的功能？我读过这可能有效：

@font-face {
  font-family: 'customFont'
  src: url(<normal>) format() font-weight: 400,
    url(<bold>) format() font-weight: 700,
    url(<thin>) format() font-weight: 200,
}

我尝试将其添加到$font-family-sans-serif之前，但它已忽略并且未应用任何字体。我的方法是错误的还是有更好的方法呢？

编辑：我决定将所有字体系列的名称更改为相同的名称，但其他所有内容保持不变。我的第二种方法是给出错误，所以我继续使用这种方法，它似乎可以正常工作。

Answer 1

您应该使用相同的名称命名字体，现在，如果更改字体粗细，它将正确切换。

编辑：刚刚意识到您已经在问题中提到了这一点

@font-face {
  font-family: 'customFont'
  src: url(<normal>) format() font-weight: 400,
    url(<bold>) format() font-weight: 700,
    url(<thin>) format() font-weight: 200,
}

确保使用正确的字体系列覆盖它：

$font-family-sans-serif: 'customFont', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:       $font-family-sans-serif !default;

如何覆盖具有多个字体的Bootstrap 4默认字体？

1 个答案: