Question

你有没有更改uikit的默认字体？ UIKit

默认字体为

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

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

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

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

Answer 1

使用uikit页面中的自定义程序。 http://getuikit.com/docs/customizer.html请参阅Body字体系列，标题字体系列选择。

或者使用scss / less版本并享受uikit-variables.scss的乐趣，有变量$ base-body-font-family，$ base-heading-font-family。

Answer 2

我认为最简单也许最干净的方法就是这样。但是，我要小心表现......

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

Answer 3

在html中使用新的font-family不会添加.clearfix:after { clear:both; display:block; content: ""; }或破坏fontawesome。

https://jsfiddle.net/95sff36a/

也就是说，我通常更喜欢在!important标签上进行编辑，例如此

body

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

Answer 4

您需要做的就是在 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; }

你应该好好去。字体真棒不应该受到影响。

Answer 5

这已经很老了，但是如果其他任何人需要版本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";

更改uikit的默认CSS字体

5 个答案: