# Cleaning up our font system

**URL:** <https://meta.discourse.org/t/cleaning-up-our-font-system/75396>\
**Category:** UX\
**Created:** [2017年十二月5日 03:29 UTC](https://meta.discourse.org/t/cleaning-up-our-font-system/75396 "2017-12-05T03:29:34Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)\
**Post date:** [2020年十二月18日 23:32 UTC](https://meta.discourse.org/t/cleaning-up-our-font-system/75396/26 "2020-12-18T23:32:18Z")

</div>

如果您可以接受字体大小的相对变化，只需为 `:root` 元素设置不同的字体大小，`em` 单位就会自动按比例缩放。

---

<div class="post-metadata">

**Author:** ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)\
**Post date:** [2021年四月16日 19:40 UTC](https://meta.discourse.org/t/cleaning-up-our-font-system/75396/27 "2021-04-16T19:40:44Z")

</div>

是我漏看了什么，还是这仅仅是因为不想给主题或插件留下隐患？[将所有这些变量用 `!default` 声明](https://github.com/discourse/discourse/pull/12741)似乎是一种允许覆盖这些变量的简单方法。

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2021年四月16日 20:40 UTC](https://meta.discourse.org/t/cleaning-up-our-font-system/75396/28 "2021-04-16T20:40:58Z")

</div>

我不相信之前能行，因为核心样式是在主题能够覆盖它们之前编译的？至少颜色方面一直是这样……我知道我们编译 SCSS 的方式发生了一些变化，所以也许这已不再是问题了？

如果 `!default` 不够用，我们也可以像处理颜色那样，将这些切换为 CSS 自定义属性。

---

<div class="post-metadata">

**Author:** ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)\
**Post date:** [2021年四月16日 23:09 UTC](https://meta.discourse.org/t/cleaning-up-our-font-system/75396/29 "2021-04-16T23:09:40Z")

</div>

哎呀，你说得对。听起来自定义属性果然才是正确的方向！💪

---

<div class="post-metadata">

**Author:** ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)\
**Post date:** [2021年四月17日 21:39 UTC](https://meta.discourse.org/t/cleaning-up-our-font-system/75396/30 "2021-04-17T21:39:47Z")

</div>

这是供您审查的重构方案，这一版可能更适合让任何样式表使用或更新变量：

> <https://github.com/discourse/discourse/pull/12746>
>
> Refactor font sizing variables into CSS custom vars.
> 
> Allows any stylesheet to… re-use CSS custom variables, regardless of how it's imported or compiled.

好的，我现在稍微理清了一些——目前，这里定义的所有变量都可以被主题/插件_读取_，但无法写入新值，因为每个样式表是单独编译的。添加 CSS 自定义属性后，主题/插件就可以_动态覆盖_这些变量，所有依赖的样式表都会获取到新值。🙂

---

<div class="post-metadata">

**Author:** ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)\
**Post date:** [2021年四月29日 00:30 UTC](https://meta.discourse.org/t/cleaning-up-our-font-system/75396/31 "2021-04-29T00:30:31Z")

</div>

嘿 @bekircem，上述内容合并后，你现在可以通过重新定义（客户端）CSS 属性来添加一个覆盖基础字体变量的主题了：

```plaintext
// 可能不要使用这些值，但你可以从中了解大致思路：
:root {
    --font-down-1: 0.8em;
    --font-0: 2em;
    --font-up-1: 3em;
    --font-up-2: 4em;
}

```

[上一頁](https://meta.discourse.org/t/cleaning-up-our-font-system/75396.md?page=1)