如何使用@font-face 获得多个字体粗细

Question

段落文本不是预期的 400 权重，它以与 h1 相同的 600 权重呈现。如果我切换我的@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/

我花了几个小时在互联网上搜索可能的解决方案并尝试了一些不起作用的方法，因此非常感谢您的帮助！

Answer 1

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

（我没有足够的积分来写评论）

Answer 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来改变字体的粗细

Answer 3

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

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

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

如何使用@font-face 获得多个字体粗细

How can I get multiple font weights working using @font-face

css

wordpress

fonts