如何在HTML页面中正确导入Dropbox托管的网页字体

你之前的写法加载失败是两个核心错误导致的：

• 你上传到Dropbox的是ZIP压缩包，浏览器无法直接解析压缩包内的字体资源。@font-face规则仅支持直接加载浏览器可识别的原始字体文件（如woff2、woff、ttf等格式），无法自动解压读取ZIP内容。
• 你使用的链接是Dropbox的文件夹分享预览页地址，访问该链接返回的是Dropbox的网页内容，而非字体文件本身，浏览器无法将其作为字体资源解析。

第一步：调整Dropbox端的文件配置 #

• 把ZIP压缩包解压，将单独的字体文件上传到Dropbox，优先选择体积小、兼容性好的woff2格式字体，可额外准备woff格式兼容低版本浏览器。
• 针对每个单独的字体文件生成分享链接，将链接处理为直链：把链接末尾的参数dl=0修改为dl=1，即可得到直接返回字体文件内容的资源链接，不会跳转至Dropbox预览页。

注意：不要使用文件夹分享链接，必须指向单个具体的字体文件。可以把处理后的链接粘贴到浏览器地址栏测试，如果直接触发文件下载、不跳转到Dropbox预览页面，才是有效的直链。

第二步：正确编写字体引入代码 #

参考如下示例修改你的页面代码，注意src属性中要填写对应格式字体的直链，同时标注清楚字体格式，帮助浏览器快速识别：

<!DOCTYPE html>
<html>
    <head>
        <title>Web Font Sample</title>
        <style type="text/css">
            @font-face {
                font-family: 'Cera-Pro-Medium';
                src: url('替换为你的woff2格式字体直链') format('woff2'),
                     url('替换为你的woff格式字体直链') format('woff');
                font-weight: 500;
                font-style: normal;
                font-display: swap;
            }
            
            .classname {
                font-family: 'Cera-Pro-Medium', sans-serif;
            }
        </style>
    </head>
    <body>
        <div class="classname">
            test
        </div>
    </body>
</html>

Dropbox免费账号对带宽、流量有明确限制，仅适合测试场景使用。如果是正式对外的站点，不建议用Dropbox托管字体资源，访问量稍大就会触发限流导致字体加载失败，建议使用专门的静态资源托管服务或CDN存放字体文件。

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