如何让font-display配合unicode-range,避免英文文本等待希伯来字体加载
混合希伯来语与英文字符的字体加载优化问题
当前用于加载自定义希伯来字体的CSS:
@font-face { font-family: 'Taamey David CLM'; src: url('TaameyDavidCLM/TaameyDavidCLM-Medium.woff2') format('woff2'), url('TaameyDavidCLM/TaameyDavidCLM-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: block; unicode-range: U+0590-05FF, U+FB1D-FB4F; }
容器的字体设置:
#container p { font-family: 'Taamey David CLM', Times, Serif; }
我希望通过font-display: block让希伯来字符在字体加载完成前不显示,避免出现字体切换的闪烁问题。但实际情况是,英文文本也会等待希伯来字体下载完成后才渲染。
原本预期浏览器会先尝试为所有文本应用自定义字体,随后通过unicode-range识别出英文字符不在该字体覆盖范围内,直接回退到font-family列表中的Times字体。但实际浏览器必须下载完该字体后,才会判断英文字符超出范围并切换到Times。
需要一个纯CSS的解决方案,让英文文本直接使用Times字体,无需等待希伯来字体下载。(注:给希伯来语和英文文本分别添加HTML类的方法不可行,因为文本是用户输入的混合内容,操作成本过高。)
补充特殊现象
如果文本中有仅包含英文字符的<i>或<b>标签,且已为该字体添加对应的斜体/粗体版本@font-face声明,那么这些标签内的英文文本会在字体下载前就直接用Times渲染;但同样是仅含英文的<span>标签,里面的文本却仍需等待希伯来字体下载完成才会回退到Times,不清楚这两种场景的差异所在。
内容的提问来源于stack exchange,提问作者ak0000
相关产品推荐
相关产品推荐

