如何在pywebview应用中正确加载并使用自定义字体

• 从控制台日志可以直接定位问题：所有字体请求都指向站点根目录下的/fonts/路径，但你的字体文件实际存放在/css/fonts/目录下，路径完全不匹配，因此所有字体请求都返回404，最终只能加载回退字体。
• 你之前尝试的相对/绝对路径写法都没有对齐实际的存放目录：相对路径fonts/xxx被解析成根目录下的/fonts/xxx，而你尝试的绝对路径大概率也直接写了/fonts/xxx，遗漏了/css前缀，自然无法找到文件。
• 额外的路径解析规则：CSS中的url()相对路径默认相对于CSS文件本身的存放位置，而非HTML页面位置，如果你的CSS文件存放在站点根目录，当前写法就会直接指向根目录下的fonts文件夹，和实际存放位置错位。

1. 修正@font-face中的字体路径 #

优先使用站点根绝对路径，能避免绝大多数相对路径解析错位的问题，适配你当前字体存放在/css/fonts/的结构，修改后的CSS如下：

@font-face {
  font-family: 'Retro Gaming';
  src: url('/css/fonts/retro_gaming.ttf') format('truetype'),
    url('/css/fonts/retro_gaming-webfont.woff2') format('woff2'),
    url('/css/fonts/retro_gaming-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

如果你更习惯使用相对路径，可以根据CSS文件的实际存放位置调整：

• 如果你的CSS文件本身存放在/css/目录下，相对路径可以写为url('./fonts/xxx')
• 如果你的CSS文件存放在站点根目录（和index.html同级），相对路径需要写为url('./css/fonts/xxx')

2. 验证路径正确性 #

你可以先直接在浏览器中访问修改后的完整字体路径（格式为http://127.0.0.1:你的服务端口/css/fonts/retro_gaming.ttf），如果能正常下载/打开字体文件，说明路径配置正确，再回到CSS中使用即可。

3. 额外排查项 #

• 确认字体文件名和代码中写的完全一致，包括大小写、特殊字符：虽然Windows系统不区分大小写，但本地HTTP服务通常会区分大小写，比如实际文件名是Retro_Gaming.ttf而代码写的是retro_gaming.ttf也会导致404
• 如果你是把CSS代码直接内联在HTML的<style>标签中，此时相对路径是相对于HTML页面的位置，使用上面的绝对路径写法最稳妥
• 如果你是直接用file://协议加载HTML页面，建议改用pywebview默认的本地HTTP服务模式（直接传入本地HTML文件路径即可），避免file协议下的路径解析和跨域限制导致字体加载失败

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