search

KonghaYao / cn-font-split

划时代的字体切割工具，CJK与任何字符！支持 otf、ttf、woff2 字体多线程切割，完美地细颗粒度地进行包大小控制。A revolutionary font subetter that supports CJK and any characters! It enables multi-threaded subset of otf, ttf, and woff2 fonts, allowing for precise control over package size.
https://chinese-font.netlify.app/
Apache License 2.0
442 stars 15 forks source link

[feature request] 支持 VariableFont #36

Closed FairyScript closed 9 months ago

FairyScript commented 9 months ago

是否有考虑支持可变轴的 woff2 切片

https://github.com/google/woff2

https://henry.codes/writing/how-to-convert-variable-ttf-font-files-to-woff2/

KonghaYao commented 9 months ago

我记得可变字重是支持的通过了测试，我们也是使用的 woff2 wasm 版本进行压缩，应该是没有问题的

FairyScript commented 9 months ago

我用来测试的字体文件是 NotoSansSC-VariableFont_wght.ttf, 浏览器是 Microsoft Edge 版本 120.0.2210.77 (正式版本) (64 位) 在直接使用 woff2_compress.exe 压缩的情况下,可变字重正常,但使用 cn-font-split 切片的字体看起来只有 thin regular 和 bold三种情况. 而且我怀疑这三种是由浏览器控制的加粗而非预期中的可变字重

NotoSansSC

KonghaYao commented 9 months ago
image

你是通过这种方式设置字重吗

font-variation-settings: "wght" 900;
FairyScript commented 9 months ago

我创建了一个环境用于演示效果

https://codesandbox.io/p/devbox/font-split-demo-nrnr2p?embed=1&file=%2Fsrc%2FApp.tsx

image

KonghaYao commented 9 months ago

image

codesanbox 对 css 中的 import 不太友好，没有加载到，你换成 js 中加载就 ok

FairyScript commented 9 months ago

原来如此,这看起来像是 vite 的问题

题外话,在编译生成的 result.css 文件当中删除 font-weight 属性之后,分割的字体也可以响应 font-weight 了,在当前的配置当中能做到在配置中设置不生成该属性么

KonghaYao commented 9 months ago

image 可以试试在配置项里面加上这个

FairyScript commented 9 months ago

完美的解决了问题,感谢