如何使用@font-face 获得多个字体权重答案

【问题标题】：How can I get multiple font weights working using @font-face如何使用@font-face 获得多个字体权重
【发布时间】：2022-01-28 05:55:06
【问题描述】：

段落文本不是预期的 400 权重，它以 600 权重呈现，与 h1 相同。如果我切换我的@font-face 声明，那么 h1 和 p 都以 400 的重量呈现。所以最后一个@font-face 声明是唯一被渲染的。

这是我的 CSS：

@font-face {
  font-family: "Karbon";
  src: url("./fonts/karbon/Karbon-Regular.woff2") format("woff2"),
       url("./fonts/karbon/Karbon-Regular.woff") format("woff"),
       url("./fonts/karbon/Karbon-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Karbon";
  src: url("./fonts/karbon/Karbon-Semibold.woff2") format("woff2"),
       url("./fonts/karbon/Karbon-Semibold.woff") format("woff"),
       url("./fonts/karbon/Karbon-Semibold.otf") format("opentype");
  font-weight: 600;
}
h1 {
  font-family: "Karbon", tahoma;
  font-weight: 600;
}
p {
  font-family: "Karbon", tahoma;
  font-weight: 400;
}

这是在functions.php中

function orbit_bb_custom_fonts ( $system_fonts ) {
    $system_fonts[ 'Karbon' ] = array(
      'fallback' => 'tahoma',
      'weights' => array(
        '400',
        '600',
      ),
    );  
  return $system_fonts;
}
add_filter( 'fl_theme_system_fonts', 'orbit_bb_custom_fonts' );
add_filter( 'fl_builder_font_families_system', 'orbit_bb_custom_fonts' );

我有两个 WordPress 网站：一个本地构建，一个在 https://brucem37.sg-host.com/ 暂存。一个可能的线索是，这个问题只发生在不是我建立网站的计算机上，即它在我自己的计算机上看起来很完美。

在使用 Beaver Builder 时，我遵循了以下指南：https://docs.wpbeaverbuilder.com/bb-theme/defaults-for-styles/typography/add-web-fonts-complex-example/

我已经花了几个小时在互联网上搜寻可能的解决方案并尝试了一些不起作用的方法，因此我们将不胜感激！

【问题讨论】：

标签： css wordpress fonts

【解决方案1】：

我猜你应该为正常设置font-weight: 400。写信给我，如果你已经试过了。我找到了这个例子，也许它会有所帮助： https://stackoverflow.com/a/28339483/17803626

（我没有足够的积分给 cmets 写信）

【讨论】：

我一开始就是这样，但在这种情况下并没有什么不同。我认为这与 Wordpress 权限有关，因为登录时字体可以正常工作。

【解决方案2】：

我仍然不知道问题出在哪里，但我已经以一种令人不满意的方式解决了它，不得不勉强解决。

@font-face {
  font-family: "Karbon";
  src: url("./fonts/karbon/Karbon-Regular.woff2") format("woff2"),
       url("./fonts/karbon/Karbon-Regular.woff") format("woff"),
       url("./fonts/karbon/Karbon-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "Karbon Semibold";
  src: url("./fonts/karbon/Karbon-Semibold.woff2") format("woff2"),
       url("./fonts/karbon/Karbon-Semibold.woff") format("woff"),
       url("./fonts/karbon/Karbon-Semibold.otf") format("opentype");
  font-weight: 600;
}
h1 {
  font-family: "Karbon Semibold", tahoma;
  font-weight: 600; // only useful for fallback font
}
p {
  font-family: "Karbon", tahoma;
  font-weight: 400; // only useful for fallback font
}

缺点是我现在不能使用 font-weight 来改变字体的粗细。

【讨论】：

【解决方案3】：

问题出在缩小的 CSS 中。在 WordPress 中，子主题需要在 style.css 样式表中有一个模板头。如果缺少此项，主题将“损坏”并导致随机问题。

/*
Theme Name: foo
Version: foo
Description: foo
Author: foo
Author URI: foo
template: foo
*/

我如何找到答案：损坏的主题也阻止了帖子的特色图片的上传，在解决这个问题时，字体也得到了解决。

【讨论】：