Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve font family and emoji #13241

Merged
merged 7 commits into from
Dec 14, 2024
Merged

Improve font family and emoji #13241

merged 7 commits into from
Dec 14, 2024

Conversation

TCOTC
Copy link
Contributor

@TCOTC TCOTC commented Nov 23, 2024 •
edited
Loading

关联 #13219 ；fix #13213 #13187 https://ld246.com/article/1733233360780

有的字体可能会自带部分 emoji 字形，按照目前的 font-family 会覆盖其他 emoji 字体的字形，导致不同风格的 emoji 混杂在一起显示：#13213。

为了解决这个问题，应该把 emoji 字体放到前面去，但 emoji 字体里也会包含非 emoji 的字形（比如数字、英文字母），所以在显示的时候需要将范围（unicode-range）限定在思源的表情选择器中存在的 emoji，按照以下顺序覆盖：

"Number Glyphs"（正常的数字字形）> "Segoe Good Emoji"（Segoe UI Emoji 和 Segoe UI Symbol 中字形正常的部分）> "Other Emojis"（其他 emoji）> （其他字体）

在 Windows 系统没有能正常显示“区域指示符字母”、“国旗”和 Unicode 16.0 新增 emoji 的字体，所以需要添加一个内置的字体用来兜底显示 emoji ：Noto-COLRv1.ttf(转换为.woff2)

顺便解决这个地方跟笔记本图标不一致的问题：

image

@TCOTC TCOTC marked this pull request as ready for review November 23, 2024 14:22
Vanessa219
Vanessa219 reviewed Nov 23, 2024
View reviewed changes
app/src/assets/scss/component/_typography.scss Outdated
@@ -2,6 +2,37 @@
font-family: 'JetBrainsMono-Regular';
src: url(../fonts/JetBrainsMono-2.304/JetBrainsMono-Regular.woff2) format('woff2');
}
@font-face {
font-family: "Number Glyphs";
src: /* 如果设置了编辑器字体，这里应该先加载${window.siyuan.config.editor.fontFamily}，但我不懂怎么弄 */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个不弄会有什么问题？搞不了

Copy link
Contributor Author

@TCOTC TCOTC Nov 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

emoji 字体里有数字的字形，不用正常数字字形去覆盖的话会变成这样：

image

#13213 (comment)

font-face 固定不变的话代价是：即使设置了其他字体，数字字形也会保持不变

Copy link
Contributor Author

@TCOTC TCOTC Nov 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

其实也不是必须插到这里来，但我不懂 CSS 我也不知道要插到哪里去，等会我换个方法

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这样改不知道能不能实现：

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

siyuan/app/src/util/assets.ts

Line 204 in 65f55b0

let style = `.b3-typography, .protyle-wysiwyg, .protyle-title {font-size:${window.siyuan.config.editor.fontSize}px !important}

加在这里行不？

Copy link
Contributor Author

@TCOTC TCOTC Nov 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我觉得应该可以，但这个我不会改。你帮我改一下试试

Vanessa219
Vanessa219 reviewed Nov 23, 2024
View reviewed changes
app/src/util/assets.ts Outdated Show resolved Hide resolved
Vanessa219 added a commit that referenced this pull request Nov 24, 2024
@Vanessa219
💄 #13241
30f65e6
@88250 88250 added this to the 3.1.16 milestone Dec 10, 2024
@Vanessa219 Vanessa219 merged commit 3d3def6 into siyuan-note:dev Dec 14, 2024
1 check passed
Vanessa219 added a commit that referenced this pull request Dec 14, 2024
@Vanessa219
🎨 统一 --b3-font-family-protyle；合并 Number Glyphs Of Custom Font 和 Numbe…
fec3211 
…r Glyphs。 #13241
Vanessa219 added a commit that referenced this pull request Dec 14, 2024
@Vanessa219
♻️ emoji #13241
152fa6e
@Vanessa219 Vanessa219 self-assigned this Dec 14, 2024
Vanessa219 added a commit that referenced this pull request Dec 14, 2024
@Vanessa219
🎨 #13241
404de2f
Vanessa219 added a commit that referenced this pull request Dec 14, 2024
@Vanessa219
🎨 #13241
d707908
Vanessa219 added a commit that referenced this pull request Dec 14, 2024
@Vanessa219
🎨 #13241
d410d30
@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 14, 2024

@Vanessa219 这个看起来是全平台都用 Noto-COLRv1.woff2 作为 emoji 字体了吗？

@TCOTC TCOTC deleted the dev-font-1 branch December 14, 2024 06:28
Vanessa219 added a commit that referenced this pull request Dec 14, 2024
@Vanessa219
🎨 #13241
a68f7fb
@Vanessa219
Copy link
Member

都选了就用吧。目前有个地方还要麻烦你再看看，这个代码块里面的表情1和段落块的不一样，是不是我把哪里改错了。

image

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 14, 2024

我这里发现星号会变成 emoji ，我还得想想

image

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 14, 2024

@Vanessa219 字体没能正确加载，但我不懂这个：

image

Vanessa219 added a commit that referenced this pull request Dec 14, 2024
@Vanessa219
🎨 #13241
4b5e8a5
@Vanessa219
Copy link
Member

Vanessa219 commented Dec 14, 2024 •
edited
Loading

提交了，星号问题应该是 unicode-range 没有和 https://github.com/siyuan-note/siyuan/blob/f5731450885dd05473001dd0100261690157ce9c/app/appearance/emojis/conf.json 真正的对应。只要 conf.json 里面没有的都会有问题，比如 #。还麻烦一一核对一下。

共 1943 个 emoji
1f开头的：1755 个
2开头的: 169 个
3开头的: 4 个
0开头的: 14 个
e开头的: 1 个

@Vanessa219
Copy link
Member

又改了下

88250 pushed a commit that referenced this pull request Dec 16, 2024
@Vanessa219 @88250
🎨 #13241
3329313
Vanessa219 added a commit that referenced this pull request Dec 16, 2024
@Vanessa219
🎨 #13241
7a6b9b3
@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 16, 2024

emoji 不一致：

image

image

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 16, 2024 •
edited
Loading

我感觉还是尽量用系统原生字体比较好，性能更好（同屏emoji多的话网络字体太卡了），用户也更习惯（苹果用户应该还是更喜欢原生的字形）

Vanessa219 added a commit that referenced this pull request Dec 16, 2024
@Vanessa219
🎨 #13241
78b32b8
@Vanessa219
Copy link
Member

这个会有缓存的，苹果后面可以单独优化，但是其他平台还是保持一致比较好。

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 16, 2024 •
edited
Loading

这个应该跟缓存没什么关系，鼠标选中网络字体的时候就是会比选中系统字体卡一些

不过也没有很明显，用户应该感觉不到，就先这样吧

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 16, 2024

这里还有一个：

image

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 16, 2024

苹果后面可以单独优化

我建议在发布版本之前就弄好，emoji全换了的话对苹果用户影响应该有点大。

Vanessa219 added a commit that referenced this pull request Dec 17, 2024
@Vanessa219
🎨 #13241
95f24e3
88250 pushed a commit that referenced this pull request Dec 17, 2024
@Vanessa219 @88250
🎨 #13241
c3812c1
88250 added a commit that referenced this pull request Dec 17, 2024
@88250
🎨 #13241
52b3a1e
@Achuan-2
Copy link
Member

Achuan-2 commented Dec 17, 2024 •
edited
Loading

苹果后面可以单独优化

我建议在发布版本之前就弄好，emoji全换了的话对苹果用户影响应该有点大。

对于windows平台影响也很大，至少我一直是更喜欢windows emoji，非常不需要安卓emoji的

直接换掉emoji，肯定会引起很多用户的疑问和吐槽的
建议加一个开关，使用系统原生字体还是noto color emoji ，可以让用户自由选择，就像之前支持Twitter emoji那样

这个不仅仅影响笔记里的编辑阅读体验，也影响电脑端发布博客的体验，外部的emoji和笔记里emoji字体不一样，是很难受的

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 18, 2024 •
edited
Loading

可以再加一个 Segoe Additional Emojis ？不过每台设备上缺的字形都不同

Vanessa219 added a commit that referenced this pull request Dec 18, 2024
@Vanessa219
🎨 #13241
25a0e85
88250 pushed a commit that referenced this pull request Dec 18, 2024
@Vanessa219 @88250
🎨 #13241
18ae25f
@Vanessa219
Copy link
Member

conf.json 里面的保证就可以了。

@Kakin-Wu
Copy link

3.1.16版本更新将一些原来字体里的特殊符号换成emoji，比如©、™这些，一刀切还是不妥吧？

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 19, 2024 •
edited
Loading

@Vanessa219 这几个字符在编辑器里确实一般不作为 emoji 来用，需要排除：

image

@TCOTC TCOTC mentioned this pull request Dec 19, 2024
Closed
@5kyfkr
Copy link

5kyfkr commented Dec 19, 2024 •
edited
Loading

Zuoqiu-Yingyi/siyuan-plugin-custom-fonts#22
自定义字体插件在3.1.16没法修改基础字体了，应该和这个issue有关，有没办法顺便看看？

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 19, 2024

这个得让插件适配

@Richie-Yi
Copy link

Zuoqiu-Yingyi/siyuan-plugin-custom-fonts#22 自定义字体插件在3.1.16没法修改基础字体了，应该和这个issue有关，有没办法顺便看看？

这个作者已经一年没更新了。我看了一下代码是不是很懂css o!o）。官方不尝试接回或者新增字体编辑页面，用不惯可以尝试回退

@TCOTC
Copy link
Contributor Author

TCOTC commented Dec 20, 2024

新版默认主题会覆盖插件，需要适配一下，每行加个 !important 就行：

image

Vanessa219 added a commit that referenced this pull request Dec 21, 2024
@Vanessa219
🎨 #13241
16a0b85
Vanessa219 added a commit that referenced this pull request Dec 21, 2024
@Vanessa219
🎨 #13241
d808f63
@Vanessa219
Copy link
Member

Vanessa219 commented Dec 21, 2024 •
edited
Loading

3.1.16版本更新将一些原来字体里的特殊符号换成emoji，比如©、™这些，一刀切还是不妥吧？

试了一下，Windows 下文本中的 emoji 就会和 emoji 面板中的不一致了，除非把这几个从 emoji 中移除。

Vanessa219 added a commit that referenced this pull request Dec 21, 2024
@Vanessa219
🎨 #13241
b11417d
EightDoor added a commit to EightDoor/siyuan that referenced this pull request Dec 24, 2024
@EightDoor
Merge commit '7d34a87da4c2c5f2324a2dee9d8da1f576f415fe'
ed9ac35 
* commit '7d34a87da4c2c5f2324a2dee9d8da1f576f415fe': (234 commits)
  🎨 tag 颜色
  🔖 Release v3.1.16
  📝 Update changelogs
  🚨
  🎨 siyuan-note#12209
  🎨 Improve tag escaping
  🎨 siyuan-note#13524
  🎨 siyuan-note#13523
  🔥 Remove Sentry reporting diagnostic data siyuan-note#13522
  🎨 Improve exporting data siyuan-note#13500
  🔥 Remove Sentry reporting diagnostic data siyuan-note#13522
  📝 Update changelogs
  🎨 siyuan-note#13522
  🎨 siyuan-note#13241
  🎨 siyuan-note#13241
  🎨 search
  🎨 siyuan-note#12335
  🎨 Improve exporting data siyuan-note#13500
  🎨 siyuan-note#13440
  🎨 Improve exporting data siyuan-note#13500
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Vanessa219 Vanessa219 Vanessa219 left review comments

Assignees

@Vanessa219 Vanessa219

@TCOTC TCOTC

Labels
Enhancement
Projects
None yet
Milestone
3.1.16
Development

Successfully merging this pull request may close these issues.
7 participants
@TCOTC @Vanessa219 @Achuan-2 @Kakin-Wu @5kyfkr @Richie-Yi @88250