部分版本安卓Chrome无法识别引入的Pacifico字体如何解决
排查思路
- 首先核对
unicode-range配置:你当前引入的字体片段对应西里尔扩展类字符集(U+0460-052F等区间),未覆盖拉丁字母、常用数字符号的Unicode区间。部分版本安卓Chrome对unicode-range的分片加载逻辑和桌面端存在差异,会直接判定当前字体资源不匹配页面文本使用的字符范围,拒绝加载。 - 检查跨域与安全策略:Chrome 60-78版本区间的安卓端浏览器,对跨域字体资源的CORS校验逻辑比桌面端更严格,如果站点CSP策略的
font-src规则未放开对应字体资源域名,会直接拦截字体请求。 - 检查字体格式兼容性:安卓5.0及以下版本搭载的Chrome/系统WebView最高版本为Chrome 42,对WOFF2格式的支持存在已知缺陷;部分国产定制ROM的修改版Chrome还存在WOFF2分片字体加载失败的兼容问题。
- 检查字体声明优先级:如果在当前
@font-face规则后,还存在同名Pacifico的字体声明,部分旧版安卓Chrome会直接读取最后一条声明规则,覆盖前面的有效配置。
修复方案
- 补全字体分片声明,不要只引入单一片段的西里尔字符集字体。优先加载覆盖基础拉丁字符集的字体分片(大部分场景下Pacifico用来渲染英文、数字、常用符号,对应拉丁区Unicode范围),修正后的基础声明如下:
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 确需使用西里尔字符时,再追加原有分片声明,放在拉丁分片之后 */ @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6K6MmTpA.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
- 增加格式降级配置,针对不支持WOFF2的旧版本浏览器,补充WOFF格式的字体源作为兜底,放在WOFF2源之后即可。
- 调整站点CSP规则,确保
font-src指令包含字体资源所在域名,避免跨域拦截。 - 所有
@font-face规则都加上font-display: swap属性,避免部分安卓Chrome因字体加载等待超时直接触发加载失败,强制降级到系统字体。 - 若需要覆盖极旧版本安卓设备,可以将字体文件托管到站点同域名下,彻底规避跨域、分片加载带来的兼容问题。
内容的提问来源于stack exchange,提问作者kilian
相关产品推荐
相关产品推荐

