Drupal 10（Bootstrap 5 Barrio主题）是否支持用户可选大字体显示？

完全可以通过自定义Barrio子主题实现用户可选择的大字体功能，不需要依赖第三方工具。核心思路是通过给页面根元素添加不同的CSS类来控制全局字体大小，结合JavaScript保存用户的选择偏好，具体步骤如下：

1. 添加字号切换按钮 #

在自定义Barrio子主题的page.html.twig模板中，选择合适的位置（比如header导航区域末尾）添加切换按钮组：

{# 插入到page.html.twig的合适区块，例如header内部 #}
<div class="font-size-toggle ms-3">
  <button class="btn btn-sm btn-outline-secondary me-1" data-size="default">默认字号</button>
  <button class="btn btn-sm btn-secondary" data-size="large">大字号</button>
</div>

2. 编写字体大小控制CSS #

利用Bootstrap基于rem的排版体系，通过修改根元素的基准字号实现全局缩放，在子主题的自定义CSS文件（如css/custom.css）中添加：

/* 基准字号设置，Bootstrap默认以16px为基准 */
html {
  font-size: 16px;
  transition: font-size 0.3s ease; /* 添加平滑过渡效果 */
}

/* 大字号模式的基准调整 */
html.font-size-large {
  font-size: 18px;
}

/* 可选：针对特定内容区块做精细调整 */
.font-size-large .node__content {
  font-size: 1.1rem;
}

3. 实现交互逻辑与偏好保存 #

在子主题的自定义JS文件（如js/custom.js）中添加按钮交互和本地存储逻辑，确保用户的选择在刷新页面后依然生效：

(function ($, Drupal) {
  Drupal.behaviors.fontSizeToggle = {
    attach: function (context, settings) {
      const buttons = document.querySelectorAll('.font-size-toggle button');
      const htmlEl = document.querySelector('html');
      const savedSize = localStorage.getItem('preferredFontSize');

      // 页面加载时应用已保存的字号设置
      if (savedSize) {
        htmlEl.classList.add(`font-size-${savedSize}`);
        buttons.forEach(btn => {
          btn.classList.toggle('active', btn.dataset.size === savedSize);
        });
      }

      // 绑定按钮点击事件
      buttons.forEach(btn => {
        btn.addEventListener('click', function () {
          const targetSize = this.dataset.size;
          
          // 清除所有字号类
          htmlEl.classList.remove('font-size-default', 'font-size-large');
          // 应用选中的字号类
          if (targetSize !== 'default') {
            htmlEl.classList.add(`font-size-${targetSize}`);
          }
          
          // 保存到本地存储
          localStorage.setItem('preferredFontSize', targetSize);
          
          // 更新按钮激活状态
          buttons.forEach(b => b.classList.remove('active'));
          this.classList.add('active');
        });
      });
    }
  };
})(jQuery, Drupal);

4. 在Drupal中整合资源 #

• 在子主题的your-custom-barrio-theme.libraries.yml文件中声明资源库：

font-size-toggle:
  css:
    theme:
      css/custom.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupal.behaviors

• 在page.html.twig中加载该资源库（放在模板顶部即可）：

{{ attach_library('your-custom-barrio-theme/font-size-toggle') }}

额外优化建议 #

• 可以扩展更多字号选项（如超大号），只需添加对应的按钮、CSS类和JS判断即可
• 按钮样式可以根据Barrio主题的配色方案调整，保持视觉统一
• 若需要支持无障碍标准，可给按钮添加aria-label属性，提升屏幕阅读器兼容性

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