Skip to content

Improve font settings #8036

Closed
Closed
@88250

Description

@88250
Member

Appearance

  • Support setting interface font

Editor

  • Support setting editor font
  • Support setting the editor monospace font

Fonts

  • Support setting multiple fonts
  • Support preview

Activity

mozhux

mozhux commented on Apr 19, 2023

@mozhux

设置多种字体是支持分别设置中英文字体、数字公式字体、代码块字体?

88250

88250 commented on Apr 19, 2023

@88250
MemberAuthor
  • 多个字体设置就包含了中英文了,就是 font-family 里面出现的列表
  • 公式没有字体设置,是 KaTex 渲染的
  • 行级代码和代码块用等宽字体(Monospace)
mozhux

mozhux commented on Apr 19, 2023

@mozhux

好的,支持移动端吗

88250

88250 commented on Apr 19, 2023

@88250
MemberAuthor

目前还不确定能否支持,后面研究一下,主要是看能否在移动端读取和解析系统字体列表。

Zuoqiu-Yingyi

Zuoqiu-Yingyi commented on Jun 8, 2023

@Zuoqiu-Yingyi
Contributor
  • Support setting interface font
    Support setting editor font
    Support setting the editor monospace font
    Support preview

目前这些功能均已通过插件实现

  • Support setting multiple fonts

编辑器支持多字体可能需要本体继续改进

88250

88250 commented on Oct 18, 2023

@88250
MemberAuthor

弱弱滴问一下,这个目前已经完全能够通过插件支持了吗?

Zuoqiu-Yingyi

Zuoqiu-Yingyi commented on Oct 19, 2023

@Zuoqiu-Yingyi
Contributor

弱弱滴问一下,这个目前已经完全能够通过插件支持了吗?

编辑器多字体还不支持,也没用比较优雅的插件实现方案

88250

88250 commented on Oct 19, 2023

@88250
MemberAuthor

你指的是哪种情况,目前插件主要受限于?

Zuoqiu-Yingyi

Zuoqiu-Yingyi commented on Oct 19, 2023

@Zuoqiu-Yingyi
Contributor

你指的是哪种情况,目前插件主要受限于?

编辑器中字体在样式标签 style#editorFontSize 中定义, 该样式标签由思源根据用户设置覆盖式更新

Vanessa219

Vanessa219 commented on Oct 20, 2023

@Vanessa219
Member

是需要一个字体设置的接口来修改这些字体就可以了么?

Zuoqiu-Yingyi

Zuoqiu-Yingyi commented on Oct 22, 2023

@Zuoqiu-Yingyi
Contributor

是需要一个字体设置的接口来修改这些字体就可以了么?

仅需要添加一个 CSS 变量 --b3-font-family-protyle 替代 #editorFontSize 中的字体列表, 这样用户就可以通过主题/代码片段/插件覆写该 CSS 变量实现自定义字体列表

added a commit that references this issue on Oct 23, 2023

23 remaining items

Zuoqiu-Yingyi

Zuoqiu-Yingyi commented on Oct 29, 2023

@Zuoqiu-Yingyi
Contributor

其实可以按照大部分用户的使用顺序来进行理解,也可以按照用户的难易程度来进行排序,同时还可以使用 style 高于 link 的规则来进行辅助排序。

这里规则应该让步于需求场景
目前的需求场景如下

  • 社区开发者有覆盖 siyuanStyle, themeDefaultStylebase.xxx.css 的需求, 否则只能引入 !important
  • 主题开发者有覆盖 pluginsStyle, siyuanStyle, themeDefaultStylebase.xxx.css 的需求, 否则只能引入 !important
  • 代码片段同时有覆盖 themeStyle, pluginsStyle, siyuanStyle, themeDefaultStylebase.xxx.css 的需求, 否则只能引入 !important

如此看来, 下方的顺序是合理的

  • <link href="base.xxx.css">
  • <link id="themeDefaultStyle">
  • <style id="siyuanStyle">
  • <style id="pluginsStyle">
  • <link id="themeStyle">
  • <style id="snippet...">
Vanessa219

Vanessa219 commented on Oct 29, 2023

@Vanessa219
Member

社区开发者既然有覆盖 themeDefaultStyle 的需求,为什么就没有覆盖 themeStyle 的需求呢?

其实你可以再换个角度这样来理解:某一个主题突然变成了官方主题,他就会成 从 themeStyle 变为 themeDefaultStyle 了,当然也可能从 themeDefaultStyle 变为 themeStyle。这样一来,按照以下顺序无论怎么变都不会影响到用户。

  • <link href="base.xxx.css">
  • <link id="themeDefaultStyle">
  • <link id="protyleHljsStyle">
  • <link id="themeStyle">
  • <style id="siyuanStyle">
  • <style id="pluginsStyle">
  • <style id="snippet...">
Zuoqiu-Yingyi

Zuoqiu-Yingyi commented on Oct 29, 2023

@Zuoqiu-Yingyi
Contributor

社区开发者既然有覆盖 themeDefaultStyle 的需求,为什么就没有覆盖 themeStyle 的需求呢?

因为可以直接使用 :root[theme="foo"] 选择器以更高的优先级指定覆盖某一主题的样式

Zuoqiu-Yingyi

Zuoqiu-Yingyi commented on Oct 29, 2023

@Zuoqiu-Yingyi
Contributor

其实你可以再换个角度这样来理解:某一个主题突然变成了官方主题,他就会成 从 themeStyle 变为 themeDefaultStyle 了,当然也可能从 themeDefaultStyle 变为 themeStyle。这样一来,按照以下顺序无论怎么变都不会影响到用户。

这种情况不会发生,因为官方主题仅定义了一系列 CSS 变量,而社区主题还有一大堆调整的样式

added a commit that references this issue on Nov 13, 2023
88250

88250 commented on Apr 18, 2025

@88250
MemberAuthor

目前社区已经提供了一个字体设置插件,原生就不考虑变更了,谢谢。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @88250@Vanessa219@mozhux@Zuoqiu-Yingyi

      Issue actions

        Improve font settings · Issue #8036 · siyuan-note/siyuan