使用@font-face设置的antipasto_bold自定义字体渲染异常求助

排查步骤 #

• 优先检查文件名拼写错误：你定义的字体家族名为antipasto_bold（拼写为antipasto，p后带t），但引入的字体文件名为Antipaso-Pro-Bold.woff（拼写为Antipaso，p后不带t），大概率是文件名拼写和实际文件不符，先确认你本地字体文件的正确文件名，修正src里的文件名即可。
• 检查字体文件路径是否正确：src里的相对路径是相对于CSS文件的位置计算的，如果你是把CSS写在HTML的<style>标签内，则路径是相对于HTML文件的位置。可以打开浏览器控制台「网络」面板，筛选「字体」类请求，看该woff文件是否返回404，若404直接修正路径即可。
• 检查字重匹配问题：你在@font-face里声明了该字体对应的font-weight: bold，但全局设置字体时没有同步指定字重，页面默认元素的字重为normal时，浏览器会找不到对应字重的antipasto_bold字体，自动 fallback 到系统字体。可以把@font-face里的font-weight改为normal，或者在全局样式里加上font-weight: bold。
• 检查跨域/协议限制：如果字体文件存放在其他域名下，未配置CORS跨域规则会被浏览器拦截加载；如果是本地直接打开HTML文件（用file协议），也会触发资源加载限制，建议用本地开发服务以localhost域名访问调试。
• 检查字体文件是否损坏：可将woff文件放到本地字体预览工具测试，确认文件本身可正常渲染，若文件损坏替换为可用的字体文件即可。

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