Odoo 18模块应用商店描述页如何添加自定义CSS/JS及字体？

自定义CSS实现 #

由于Odoo应用商店会剥离<style>、<link>标签，只能通过以下方式绕过限制：

• 批量内联样式复用：
  把重复样式存入隐藏元素的自定义属性，通过内联事件动态应用到目标元素。比如：

  <body onload="document.querySelectorAll('.desc-block').forEach(el => el.style.cssText = document.getElementById('style-template').dataset.css)">
    <span id="style-template" data-css="font-family: 'CustomFont', sans-serif; color: #2d3748; line-height: 1.7; margin: 10px 0;" style="display: none;"></span>
    <div class="desc-block">模块核心功能介绍...</div>
    <div class="desc-block">使用场景说明...</div>
  </body>
  

  这种方式避免了重复编写内联style属性，提升维护效率。
• 原生HTML属性兼容：
  利用HTML遗留属性（如<font>标签、bgcolor、align）快速设置基础样式，虽然不符合HTML5规范，但在Odoo应用商店环境下大概率有效：

  <font face="Georgia, serif" size="3" color="#555">使用系统字体的描述文本</font>
  

自定义JS实现 #

<script>标签被剥离后，只能通过内联事件属性执行简单逻辑：

• 直接在元素事件属性中编写JS代码，比如：

  <button onclick="document.getElementById('more-info').style.display = document.getElementById('more-info').style.display === 'none' ? 'block' : 'none'">展开更多信息</button>
  <div id="more-info" style="display: none;">详细的模块配置步骤...</div>
  

  注意：这种方式仅适用于短逻辑，复杂功能会受限于属性长度和浏览器安全策略。

自定义字体引入方案 #

除了<style>和<link>，有两种可行方式：

• Base64编码内联嵌入：
  将字体文件（优先选体积小的woff2格式）转换为Base64编码，通过动态创建<style>标签嵌入@font-face规则。Odoo的静态标签剥离逻辑通常不会拦截动态创建的元素：

  <body onload="const styleEl = document.createElement('style'); styleEl.textContent = '@font-face { font-family: MyCustomFont; src: url(data:font/woff2;base64,[你的字体Base64字符串]) format(\'woff2\'); }'; document.head.appendChild(styleEl)">
    <div style="font-family: MyCustomFont;">使用自定义字体的模块描述</div>
  </body>
  

• 系统字体栈 fallback：
  若无法嵌入自定义字体，使用跨平台系统字体组合保证显示效果：

  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">兼容多系统的文本内容</div>
  

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