更改 uikit 的默认 CSS 字体答案

【问题标题】：Change the default CSS font for uikit更改 uikit 的默认 CSS 字体
【发布时间】：2018-07-09 02:02:37
【问题描述】：

你会改变uikit的默认字体吗？ UIKit

默认字体是

"Helvetica Neue",Helvetica,Arial,sans-serif

及其在 html 元素标签上的设置。如果我将 html 标记中的自定义样式上的此字体更改为其他字体，它不会覆盖更改。我可以使用重要的东西来改变事情：

html {
     font: 'Raleway', sans-serif !important;
}

这会按预期更改全局字体但 font-awesome 显然不再有效，因为 !important 写得太多了。有什么想法吗？

【问题讨论】：

标签： css uikit getuikit

【解决方案1】：

这已经很老了，但无论如何我都会发布当前的工作答案，以防其他人需要它作为版本 3 documented here：

// 1. Your custom variables and variable overwrites. If you are using google fonts,
//follow their instructions as normal as well. (add a link in the html for example).
$global-font-family: 'Ubuntu', sans-serif;

// 2. Import default variables and available mixins.
@import "../../node_modules/uikit/src/scss/variables-theme.scss";
@import "../../node_modules/uikit/src/scss/mixins-theme.scss";

// 3. Import UIkit.
@import "../../node_modules/uikit/src/scss/uikit-theme.scss";

【讨论】：

【解决方案2】：

使用 uikit 页面中的定制器。 http://getuikit.com/docs/customizer.html 查看正文字体系列，标题字体系列选择。

或者使用 scss/less 版本，玩 uikit-variables.scss ，有变量 $base-body-font-family, $base-heading-font-family 。

【讨论】：

【解决方案3】：

您需要做的就是在 uikit 的 css 之后包含一个自定义 css 文件，无论您是从 CDN 还是本地调用 uikit -

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.18/css/uikit.min.css" />
<link rel="stylesheet" href="/site/templates/css/app.css" />

在您的 app.css 中执行此操作

html{
  font-family: 'Raleway', sans-serif;
}

你应该很高兴。 Font-Awesome 根本不应该受到影响。

【讨论】：

【解决方案4】：

我认为最简单，也许是最干净的方法就是这样。但是，我会小心性能...

* { font-family: 'Raleway', sans-serif; }

【讨论】：

【解决方案5】：

在 html 中使用新的字体系列对我有用，而无需添加 !important 或破坏 fontawesome。

https://jsfiddle.net/95sff36a/

也就是说，我通常更喜欢在 body 标签上进行编辑，例如这样

body{
    font-family: 'Raleway', sans-serif;
}

注意：这对标题无效，您可能需要明确添加它们。

【讨论】：