sass - 如何在 SCSS 中格式化 Unicode 字符的字体

我被困在 CSS 问题上,我们有以下课程:

.OnSwitch {
    &:after { 
      content: "";
      z-index: 1;
      top: 18px;
      right: 15px;
      position: absolute;
      font-size: 16px;
    }
    &.tempControlled:after {
      content: "\2109";
    }
    &.weightControlled:after {
      content: "LBS";
    }
  }

在内容元素中,我们使用 \2109 来显示华氏字符。它显示得很好,但是它是一种衬线字体,我们需要一个无衬线字体来适应页面的其余部分。我尝试将 font-family 添加到 tempControlled:after 和父类,但没有运气。

回答1

我生活在摄氏世界,不得不用谷歌搜索华氏字符 ℉ https://www.htmlsymbols.xyz/unicode/U+2109 以无衬线字体显示;他们正在使用(适应您的代码)

&.tempControlled:after {
    content: "\2109";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

现在这是一个非常常见的堆栈,如果您放弃 Roboto,则不需要额外的 @font-face。根据我的口味,这将是罕见的情况之一,甚至可以在需要时添加 !important

我希望这有帮助!