HTML使用@font-face时如何正确引用FTP服务器上的字体文件

直接在@font-face的src属性的url()中填写FTP资源的完整访问地址即可，基础配置示例如下：

@font-face {
  font-family: 'MyCustomFont'; /* 自定义字体名称，后续样式中直接引用这个名称即可 */
  src: url('ftp://你的FTP服务器公网地址/字体存放路径/字体文件.woff2') format('woff2'),
       url('ftp://你的FTP服务器公网地址/字体存放路径/字体文件.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

配置和使用时需要注意以下几个常见问题：

• 地址必须带ftp://协议头，缺省协议头的话浏览器会把路径识别为当前站点下的相对路径，无法定位到FTP服务器上的资源。
• 不要在URL中明文写入FTP的访问账号、密码（即不要用ftp://user:pass@ftp.xxx.com/font.woff2这类格式），现代浏览器出于安全考虑默认会拦截带身份凭证的FTP资源请求，且明文写账号密码本身也有严重的安全隐患。如果你的FTP资源需要登录才能访问，本质上就不适合用来存公共引用的前端静态资源，建议迁移到HTTP/HTTPS静态资源服务。
• 填写URL后先把完整地址单独粘贴到浏览器地址栏测试，确认可以直接触发字体文件下载，排除路径拼写错误、FTP目录权限未开放公网访问的问题。
• 注意format()参数要和实际字体文件格式匹配：woff2文件对应format('woff2')、woff文件对应format('woff')、ttf文件对应format('truetype')，参数不匹配会导致浏览器跳过该资源不加载。
• 目前Chrome、Edge等新版本浏览器已经默认移除了FTP协议支持，这类浏览器下FTP地址的字体会直接加载失败，生产环境正式上线的项目不建议使用FTP存放字体等静态资源，优先使用配置了正确CORS头的HTTP/HTTPS静态资源地址加载，兼容性更好。

如果你之前本地字体加载正常，仅替换URL后加载失败，90%以上的问题都是FTP地址拼写错误、公网访问权限没开，或者浏览器本身禁用了FTP协议导致的。

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