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

[bug] unicode-range 选项干扰浏览器的渲染 #33

Closed KonghaYao closed 5 months ago

KonghaYao commented 10 months ago

vhal 特性，在竖排文本的情况下，浏览器渲染有问题。使用 unicode-range 会导致字体布局有非常轻微的抖动，但是删除 unicode-range，渲染效果又正常了

/* (),怪文新本测试难！（），？ */
@font-face {
    font-family: "vhal-demo";
    src:url("./d1ccbed9a8130b735516321b853561f4.woff2") format("woff2");
-    unicode-range:U+28-29,U+2c,U+602a,U+6587,U+65b0,U+672c,U+6d4b,U+8bd5,U+96be,U+ff01,U+ff08-ff09,U+ff0c,U+ff1f;
}
KonghaYao commented 10 months ago

cpct 也有此现象，怀疑与默认的竖排文本行高有关

KonghaYao commented 10 months ago

mark 也发现此现象 行高被 unicode-range 影响

KonghaYao commented 10 months ago

这个现象 Chrome 和 FireFox 都有，甚至 FireFox 有更多，估计关于这一块是浏览器自行实现的，并没有统一的标准，导致不一致

adolfheir commented 5 months ago

最近看到nextjs 用 sizeAdjust 解决偏移 感觉这个是不是也能这么解？ https://nextjs.org/docs/app/building-your-application/optimizing/fonts https://github.com/vercel/next.js/blob/canary/packages/font/src/local/get-fallback-metrics-from-font-file.ts#L93

KonghaYao commented 5 months ago

@adolfheir 晚点我回去校验一下 size-adjust 能不能解决，谢谢哈

KonghaYao commented 5 months ago

感觉不像是 size-adjust 这个属性的问题，Next 是计算 fallback font 的各种属性来对齐使用字体和 fallback 字体的属性，这样可以减少布局偏移。而我们这个 BUG 是切割后和切割前的字体在浏览器中渲染发生了像素级别的统一方向的偏移，这个可能是由于各个浏览器的布局机制导致的。 image

KonghaYao commented 5 months ago

可能晚点要改进一下测试环境的 DOM 结构，看看能不能清除一波这个 BUG 了

KonghaYao commented 5 months ago

查看了一下历史的记录，发现竖排文本在 width 不设置时，会导致这种问题，但是 width 足够时，又不会有抖动问题。test 环境在很久以前修复了这个 BUG。