如何在邮件中使用未在网站公开的自定义手写字体?
解决邮件中自定义手写字体的@font-face链接问题
嘿,我完全懂你想在邮件里用上自己手写字体的心情,遇到Dropbox或Google Drive链接没法生效的问题确实挺让人头疼的,我来帮你拆解下问题根源和解决方案:
为什么你的Dropbox链接没法用?
你当前用的Dropbox链接末尾是dl=0,这个参数的作用是打开字体文件的在线预览页面,而不是直接返回字体文件本身。邮件客户端和浏览器没法把这个预览页面解析成可用的字体资源,自然加载失败。
快速修复Dropbox链接
只需要把链接里的dl=0改成dl=1,就能把预览链接转换成直接下载链接,这样邮件客户端就能正确获取字体文件了。修改后的链接应该是:
https://www.dropbox.com/s/t0cvl2rcut640sc/Myfont-Regular.otf?dl=1
正确的@font-face邮件CSS写法
把调整后的链接放到内嵌CSS里,同时别忘了添加兼容格式和 fallback 字体(应对不支持自定义字体的客户端),示例代码如下:
@font-face { font-family: 'MyHandwrittenFont'; /* 用修改后的直接下载链接 */ src: url('https://www.dropbox.com/s/t0cvl2rcut640sc/Myfont-Regular.otf?dl=1') format('opentype'); font-weight: normal; font-style: normal; } /* 给需要用手写字体的内容添加类 */ .handwritten-content { font-family: 'MyHandwrittenFont', Arial, sans-serif; }
额外注意事项
- 邮件客户端兼容性:Outlook桌面版(Windows)基本不支持
@font-face,所以一定要设置 fallback 字体,避免内容无法正常显示;Gmail、Apple Mail、Outlook Web版对自定义字体支持较好。 - 云存储限制:Dropbox的直接链接有带宽限制,如果下载量过大可能会被临时封禁,长期使用的话建议把字体上传到自己的静态网站空间或者稳定的静态文件托管服务(确保链接能直接返回字体文件,无跳转)。
- 测试必不可少:不同邮箱客户端的CSS支持差异很大,建议发送测试邮件到主流邮箱,或者用专业的邮件测试工具验证效果。
内容的提问来源于stack exchange,提问作者NameHere
相关产品推荐
相关产品推荐

