如何在HTML已废弃的<font>标签中使用.ttf字体文件

问题出在你只预加载了字体文件，但没有告诉浏览器这个字体对应的名称是什么——preload只是让浏览器提前下载资源，并不会注册字体的命名映射，所以<font>标签的face属性找不到对应的字体。而Verdana是系统自带字体，浏览器已经内置了它的名称映射，所以能直接生效。

要让<font>标签能用自定义的Roboto Thin字体，必须先通过@font-face规则注册字体，步骤如下：

1. 添加字体注册的CSS规则
   在页面的<style>标签里加入：

   @font-face {
     font-family: 'Roboto-Thin'; /* 这个名称就是你要在font标签里用的face值 */
     src: url('Roboto-Thin.ttf') format('truetype');
     font-weight: 100;
     font-style: normal;
   }
   

   如果你想让<font face="roboto">生效，可以把font-family设为'Roboto'，但要确保这个名称不会和其他Roboto字重的字体冲突。

2. 修正preload标签（可选但推荐）
   给preload标签加上crossorigin属性，避免因跨域策略导致字体无法正常使用（即使同域，部分浏览器也需要这个属性才能正确使用预加载的字体资源）：

   <link rel="preload" href="Roboto-Thin.ttf" type="font/ttf" as="font" crossorigin>
   

3. 使用font标签调用
   现在<font>标签的face属性和@font-face里的font-family值一致就能生效了：

   <font face="Roboto-Thin">这里是Roboto Thin字体的文本</font>
   

原理很简单：@font-face是浏览器识别自定义字体名称的唯一途径，只有注册过的字体名称，才能被<font>标签的face属性匹配到。

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