Improve font family and emoji #13241
Conversation
| @@ -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}，但我不懂怎么弄 */ | |||
There was a problem hiding this comment.
There was a problem hiding this comment.
其实也不是必须插到这里来，但我不懂 CSS 我也不知道要插到哪里去，等会我换个方法
There was a problem hiding this comment.
Line 204 in 65f55b0
加在这里行不？
There was a problem hiding this comment.
我觉得应该可以，但这个我不会改。你帮我改一下试试
# Conflicts: # app/appearance/themes/daylight/theme.css # app/appearance/themes/midnight/theme.css
|
@Vanessa219 这个看起来是全平台都用 Noto-COLRv1.woff2 作为 emoji 字体了吗？ |
|
都选了就用吧。目前有个地方还要麻烦你再看看，这个代码块里面的表情1和段落块的不一样，是不是我把哪里改错了。
|
|
我这里发现星号会变成 emoji ，我还得想想
|
|
@Vanessa219 字体没能正确加载，但我不懂这个：
|
|
提交了，星号问题应该是 unicode-range 没有和 https://github.com/siyuan-note/siyuan/blob/f5731450885dd05473001dd0100261690157ce9c/app/appearance/emojis/conf.json 真正的对应。只要 conf.json 里面没有的都会有问题，比如 #。还麻烦一一核对一下。 共 1943 个 emoji |
|
试试 #13470 |
|
现在应该就是这样的，但 emoji 的 Unicode 跟普通字符不太一样，不是一一对应的，限定范围后仍然会引入多余的有问题的字形覆盖其他文本 |
|
又改了下 |
|
emoji 不一致：
|
|
我感觉还是尽量用系统原生字体比较好，性能更好（同屏emoji多的话网络字体太卡了），用户也更习惯（苹果用户应该还是更喜欢原生的字形） |
|
这个会有缓存的，苹果后面可以单独优化，但是其他平台还是保持一致比较好。 |
|
这个应该跟缓存没什么关系，鼠标选中网络字体的时候就是会比选中系统字体卡一些 不过也没有很明显，用户应该感觉不到，就先这样吧 |
|
这里还有一个：
|
我建议在发布版本之前就弄好，emoji全换了的话对苹果用户影响应该有点大。 |
对于windows平台影响也很大，至少我一直是更喜欢windows emoji，非常不需要安卓emoji的 直接换掉emoji，肯定会引起很多用户的疑问和吐槽的 这个不仅仅影响笔记里的编辑阅读体验，也影响电脑端发布博客的体验，外部的emoji和笔记里emoji字体不一样，是很难受的 |
|
可以再加一个 Segoe Additional Emojis ？不过每台设备上缺的字形都不同 |
关联 #13219 ；fix #13213 #13187 https://ld246.com/article/1733233360780
有的字体可能会自带部分 emoji 字形，按照目前的 font-family 会覆盖其他 emoji 字体的字形，导致不同风格的 emoji 混杂在一起显示：#13213。
为了解决这个问题，应该把 emoji 字体放到前面去，但 emoji 字体里也会包含非 emoji 的字形（比如数字、英文字母），所以在显示的时候需要将范围（unicode-range）限定在思源的表情选择器中存在的 emoji，按照以下顺序覆盖：
在 Windows 系统没有能正常显示“区域指示符字母”、“国旗”和 Unicode 16.0 新增 emoji 的字体，所以需要添加一个内置的字体用来兜底显示 emoji ：Noto-COLRv1.ttf(转换为.woff2)
顺便解决这个地方跟笔记本图标不一致的问题：