vscode Use Segoe UI Variable for Windows 11

plupiseo  于 4个月前  发布在  Vscode
关注(0)|答案(7)|浏览(65)

请使用 Segoe UI Variable(用于小字体的 Small 变体,用于正常字体的 Text 变体,用于大字体的 Display 变体)和 Segoe Fluent Icons 作为默认的无衬线字体和在 Visual Studio Code 中使用的图标字体 - 分别对应于 Visual Studio Code 中的字体和图标。(至少在 Windows 11 上是这样,可能在 Windows 10 上也是如此。)

感谢您。

amrnrhlw

amrnrhlw1#

由于VS Code是跨平台的,意味着我们支持Windows/Mac/Linux/Web,因此我们不能使用单一字体并依赖系统字体。除此之外,我们还有自己的图标系统,codicons,它是基于Fluent图标的。如果你对此感兴趣,我们还有产品图标主题,Fluent Icons。出于以上原因,我将关闭此问题。感谢你的建议!

u5i3ibmn

u5i3ibmn2#

@misolori 我们今天为Windows做这个,是否需要在变量字体前加上前缀?
vscode/src/vs/base/browser/ui/contextview/contextview.ts
第398行到第402行
|  | :host-context(.windows) { font-family: "Segoe WPC", "Segoe UI", sans-serif; } |
|  | :host-context(.windows:lang(zh-Hans)) { font-family: "Segoe WPC", "Segoe UI", "Microsoft YaHei", sans-serif; } |
|  | :host-context(.windows:lang(zh-Hant)) { font-family: "Segoe WPC", "Segoe UI", "Microsoft Jhenghei", sans-serif; } |
|  | :host-context(.windows:lang(ja)) { font-family: "Segoe WPC", "Segoe UI", "Yu Gothic UI", "Meiryo UI", sans-serif; } |
|  | :host-context(.windows:lang(ko)) { font-family: "Segoe WPC", "Segoe UI", "Malgun Gothic", "Dotom", sans-serif; } |
2w3rbyxf

2w3rbyxf3#

@sbatten 我们可以在构建中尝试一下,但我的担忧是会有字体粗细冲突,因为我们通常不会为每个字体单独定义这些属性。你想试试吗?

2fjabf4q

2fjabf4q4#

由于VS Code是跨平台的,意味着我们支持Windows/Mac/Linux/Web,我们不能使用单一字体并依赖系统字体。除此之外,我们有自己的图标系统,codicons,它是基于Fluent图标的。如果你对此感兴趣,我们还有产品图标主题,Fluent Icons。出于以上原因,我将关闭这个问题。感谢你的建议!
@misolori 啊,我知道Fluent Icons扩展(我使用并喜欢它!),但我觉得新的图标应该直接构建到VS Code中,而不是作为扩展,因为这会使其与Windows 11更一致(因为在设计操作系统时考虑到了UI的一致性)。至于Segoe UI Variable,让它仅限于Windows(正如@sbatten所建议的)也很好。
此外,我认为codicons看起来更像Segoe MDL2 Assets(主要是因为尖锐的角落和图标的总体外观),而不是Segoe Fluent Icons(微软的新、美丽的图标字体)。codicons SVGs能否用Fluent System Icon's SVGs(首选)或Fluent Icons SVGs更新?这可以使其在所有平台上都可用,尽管我们也可以将其仅限于Windows。(我不是这个领域的Maven,但这不应该是个问题,因为当前的图标已经是来自微软图标字体的,我们只需要用新图标替换旧图标;或者我们可以“合并”/使用上面链接的现有资源(如Fluent System Icon),对吧?)
感谢你花时间回复!

x6yk4ghg

x6yk4ghg5#

我可以看到一个未来,codicon会自然地演变成更像Fluent的样子,但由于我们特定的使用场景和缺失的图标需求,它永远不会被取代。
我会把是否在Windows上采用可变字体的决定留给SteVen来决定。

e0uiprwp

e0uiprwp6#

为具有该功能的系统指定可变字体,将是渐进增强优势的一个很好的例子,并且由于CSS的行为,不会对其他系统产生负面影响。

az31mfrm

az31mfrm7#

调查支持Segoe UI变量的小/文本/显示
小字体用于小于13像素的文本。
文本用于13-20像素的文本
显示用于20像素及以上的文本

这里是一个小原型,可以在扩展视图中进行比较:

Prototype

  • 图像引用*
    使用Segoe UI

使用Segoe UI变量

cc @daviddossett

相关问题