开发工具字体加载失败问题(官方表示可以忽略),实际原因是由于字体格式识别失败导致。
测试代码如下:
@font-face {
font-family: 'WebFontName';
src: url("https://xxx.com/WebFontName.ttf");
}
// 添加 format('truetype') 仍旧报错
@font-face {
font-family: 'WebFontName';
src: url("https://xxx.com/WebFontName.ttf") format('truetype');
}
// 添加 format('ttf') 成功
@font-face {
font-family: 'WebFontName';
src: url("https://xxx.com/WebFontName.ttf") format('ttf');
}
出现woff2 报错怎么办。format('woff2');
首次会渲染层错误,刷新正常。
@font-face {
font-family: "iconfont"; /* Project id 3050821 */
src: url("https://at.alicdn.com/t/c/font_3050821_m76mx7vyu4a.woff2?t=1679297322694")
format("woff2"),
url("https://at.alicdn.com/t/c/font_3050821_m76mx7vyu4a.woff?t=1679297322694")
format("woff"),
url("https://at.alicdn.com/t/c/font_3050821_m76mx7vyu4a.ttf?t=1679297322694")
format("ttf"),
url("https://at.alicdn.com/t/c/font_3050821_m76mx7vyu4a.svg?t=1679297322694#iconfont")
format("svg");
}