itorr/eva-title

Safari 下 EVAMatisseClassic 字体无法正常绘制

Closed this issue · 5 comments

itorr commented
Safari 下 EVAMatisseClassic 字体无法正常绘制
itorr commented

mac Safari 下会变成三重 shadow，iOS Safari 会变成 三重叠影的样子，查看字型并没有看出问题所在 就是很普通的矢量字型 很奇怪

itorr commented

克隆代码，去除

eva-title/html/document.less

Line 389 in dc2465e

// 暂时屏蔽 Chrome 之外浏览器
这段屏蔽样式即可复现

itorr commented

lab magiconch com 福音戰士標題生成器 -1657188770507

itorr commented

感谢 @HomeArchbishop 的Pull
1888bcf

三重叠影问题通过设置 FontFamily Fallback 得到了避免，通过针对 Safari 设置减淡弥散范围得到了结果上大体上的一致。

目前在 Safari 上的问题，部分字形实际上依旧是 三层弥散阴影叠加、其余是正常的一层

itorr commented

复盘了一圈，总算好像理解了这个 bug 的根源，Safari 会在 字重 600 以上时 通过简单的横向重复渲染字型让字体看起来变重，在这个过程中没有考虑阴影之类的细节 🤬🤬🤬

不愧是 Safari、仿佛现代 IE6，每次都能在她身上发现匪夷所思的神奇特性

  • 👍1