W3 CSS校验@font-face字体定义报错的修复方案咨询

错误原因 #

你编写的@font-face规则缺失了必填的src属性声明，该属性是W3C CSS规范中@font-face规则的强制要求字段，用于指定字体资源的加载地址，你之前的代码直接书写了url('calibri.ttf') format('truetype');，没有添加src:前缀，因此触发校验报错。

修复后的正确代码 #

@font-face {
    font-family: 'Calibri';
    src: url('calibri.ttf') format('truetype');
}

可选兼容性优化 #

如果需要适配更多不同版本的浏览器，可同时引入多格式字体资源，按加载优先级排序后用逗号分隔即可，示例如下：

@font-face {
    font-family: 'Calibri';
    /* 优先加载体积更小、兼容性更好的现代字体格式 */
    src: url('calibri.woff2') format('woff2'),
         url('calibri.woff') format('woff'),
         url('calibri.ttf') format('truetype');
}

注意：需调整url内的字体文件路径，确保和CSS文件的相对路径匹配，否则会出现字体加载失败的问题。

内容的提问来源于stack exchange，提问作者mahen3d