如何在语义 UI 中包含自定义字体（而不是 Google 字体）答案

【问题标题】：How do you include custom fonts in Semantic UI (instead of Google Fonts)如何在语义 UI 中包含自定义字体（而不是 Google 字体）
【发布时间】：2018-04-03 02:02:20
【问题描述】：

在/src/site/globals/site.variables 中，我可以看到您如何定义 google 字体，这些字体是在您编译时导入的。我感兴趣的是定义我自己的自定义字体，我将在其中提供我自己的字体文件。

我找不到有关如何操作的文档。虽然我知道如何在 CSS 中做到这一点，但我想知道它是否已经内置在这个框架中，但我只是错过了它。

谢谢！

【问题讨论】：

标签： semantic-ui

【解决方案1】：

我不相信有内置的方法可以做到这一点。这就是我的做法。

我使用了标准的@font-face css 规则。然后我把它放在site.overrides 文件中。我正在使用 less 变量 (@font-path) 来简化我的文件路径。

@font-path: '../../fonts';
@font-face {
    font-family: 'my-font';
    src: url('@{font-path}/my-font.woff') format('woff'),
      url('@{proxima-prefix}my-font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

您必须确保您的服务器正确地提供字体文件。

以上内容也可以根据您的使用情况转换为 less mixin。

关于@font-face 和格式的好资源：https://css-tricks.com/snippets/css/using-font-face/

关于如何使用不同字体粗细/样式的一个很好的答案：https://stackoverflow.com/a/10046346/7681976

【讨论】：

谢谢——我会试试的！