🍕功能说明：图标和字体库代码后台自定义变量

Function description: Custom variables in the back - end of icon and font library code

某个深夜，我对着屏幕上的代码叹气——第7次修改网站字体链接后，突然意识到：每次加个图标或调整字体，都要重新修改和打包前端、后端的相关代码，覆盖服务器文件，甚至可能因为手滑少打一个字符导致全站样式崩坏。这种重复劳动像在给创造力上锁，尤其当合作的设计师同事想尝试网站开发这一新领域时，“改代码”成了与网站沟通的高墙。于是，一个念头冒出来：为什么不让这些全站配置和发文章一样，随时在后台自由替换？

从“硬编码”到“动态变量”

原来的代码中，字体和图标库的CSS链接是直接写死的：

@font-face {
  font-family: 'PT Mono';
  src: url('/templets/default/fonts/PTMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

每次更新都需要找到前台页面以及后台编辑器样式中的这段代码，手动替换链接，再部署上线。而织梦CMS的自定义变量功能，恰好能解决这个问题——将链接存入数据库，让前端动态读取。

三步实现“动态化”

1. 后台变量配置

在织梦后台新增一个自定义参数：`cfg_font_icon`（字体/图标CSS链接）。这一步相当于在后台开了个“插槽”，未来只需填链接即可。

2. 模板改造

将原模板中硬编码的CSS引用替换为动态变量，这里的问题在于，原来的样式是写在CSS文件中的，而CSS文兵并不能直接读取织梦的自定义变量，所以需要把原来的css中相关部分代码删除，然后在前端、后端网页的htm模板页面中通过<style>标签来引用：

<style>
/* 为了方便更新，将本站字体及iconfont在线链接作为后台自定义变量进行调用 */
@font-face {
  font-family: 'HarmonySans SC';
  src: url('/templets/default/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4858194 */
  src:
    url('//at.alicdn.com/t/c/font_4858194_hlglylgk9au.woff2?t=1743996269621') format('woff2'),
    url('//at.alicdn.com/t/c/font_4858194_hlglylgk9au.woff?t=1743996269621') format('woff'),
    url('//at.alicdn.com/t/c/font_4858194_hlglylgk9au.ttf?t=1743996269621') format('truetype');
}
.iconfont {
  font-family:'iconfont' !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>

这样，页面渲染时会自动读取数据库中的最新值。

一个意想不到的收获

某天设计师临时提议：“试试把我们的矢量字体设计插入到页面文本里？”过去这需要把复杂的svg代码通过源代码的形式插入到文档里，或者在服务器上上传一个自定义的字体包再重新同步前后台的前端样式链接，而现在，我只用了1分钟：把svg上传到iconfont项目，更新链接，复制新链接粘贴到后台，刷新页面，效果立现。