如何使用Google Drive托管TTF文件以在代码中调用？

一、修复Google Drive直链加载问题 #

你之前用的Drive链接无法加载，核心是权限没配置正确，链接参数也需要调整：

1. 打开TTF文件的Google Drive页面，点击右上角「分享」→「设置」，勾选「知道链接的任何人」，权限设为「查看」后保存。
2. 提取文件ID：就是你链接里d/后面的那串字符（你的是13bQUuIO2hSWG1W00lxTZnCkI7Iml2mx2）。
3. 构造正确的直链，注意加上字体格式声明：

   src: url('https://drive.google.com/uc?export=download&id=13bQUuIO2hSWG1W00lxTZnCkI7Iml2mx2') format('truetype');
   

   如果加载仍有问题，在链接末尾追加&confirm=t参数，跳过可能的安全验证。

二、新版Google Sites托管方案（替代旧版失效方法） #

旧版Google Sites的目录式链接已废弃，新版Sites可按以下步骤操作：

1. 新建Google Sites站点，点击顶部「插入」→「文件」→「上传」，选择你的TTF文件。
2. 上传完成后，右键点击页面上的字体文件，选择「复制链接」。
3. 把复制的链接末尾的?usp=sharing替换成&download=1，得到可直接加载的字体链接，示例：

   src: url('https://sites.google.com/view/你的站点名/xxxx?download=1') format('truetype');
   

   更稳妥的方式是：在Google Drive的「Google Sites 文件」文件夹里找到刚上传的字体文件，直接用上面Drive的直链方法处理。

三、代码修正建议 #

补充字体格式声明和 fallback 字体，让代码更健壮：

<style>
  @font-face { 
    font-family: WinterSong; 
    src: url('https://drive.google.com/uc?export=download&id=13bQUuIO2hSWG1W00lxTZnCkI7Iml2mx2') format('truetype');
  } 

  #WinterSong {
    font-size: 72px;
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: WinterSong, sans-serif; /* 备用字体防止加载失败 */
  }
</style>

<div id="WinterSong">text</div>

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