网站语言切换时自定义字体配置：法语启用Ubuntu Titling字体
2026-5-22
实现语言关联字体切换的方案
嘿，这个需求实现起来很简单，咱们一步步来搞定：
1. 先把本地字体引入到CSS中
首先你需要用@font-face规则把本地存储的Ubuntu Titling字体注册到项目里，记得替换路径为你实际的字体文件位置：
@font-face { font-family: 'Ubuntu Titling'; src: url('/fonts/UbuntuTitling-Bold.ttf') format('truetype'); /* 如果你有其他字重（比如常规、斜体）的字体文件，可以在这里补充 */ font-weight: bold; font-style: normal; /* 加上这个属性，避免字体加载时页面卡顿 */ font-display: swap; }
注意：确保字体路径和你的本地文件位置完全匹配，不然字体加载失败会自动 fallback 到默认字体
2. 定义语言对应的字体样式
接下来我们给不同语言设置对应的字体规则，用body的类来区分：
/* 默认字体（英语、西班牙语）：使用系统默认无衬线字体 */ body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } /* 法语专属字体：优先使用Ubuntu Titling， fallback 到默认字体 */ body.fr { font-family: 'Ubuntu Titling', system-ui, -apple-system, sans-serif; }
3. 给语言切换器添加逻辑
假设你的语言切换器是一个下拉选择框（id为language-select），我们用JavaScript监听切换事件，动态给body添加/移除语言类：
const languageSelector = document.getElementById('language-select'); // 监听语言切换事件 languageSelector.addEventListener('change', function() { const selectedLang = this.value; // 先移除所有可能的语言类 document.body.classList.remove('fr', 'en', 'es'); // 添加当前选中语言的类 document.body.classList.add(selectedLang); // 可选：把用户选择的语言存到localStorage，下次打开页面自动应用 localStorage.setItem('selectedLanguage', selectedLang); }); // 页面初始化时，应用之前保存的语言（如果有的话） window.addEventListener('load', function() { const savedLang = localStorage.getItem('selectedLanguage') || 'en'; document.body.classList.add(savedLang); // 同步语言选择器的选中状态 languageSelector.value = savedLang; });
如果你的语言切换是按钮形式（比如每个语言对应一个按钮），逻辑类似：给每个按钮绑定点击事件，切换body的类即可。
4. 服务器端渲染的补充（可选）
如果你的网站是服务器端渲染的（比如用PHP、Node.js等后端框架），可以直接在渲染页面时给body标签加上对应的语言类，这样就不需要前端初始化的JS了，比如：
<!-- 假设后端变量$currentLang存储当前语言 --> <body class="<?php echo $currentLang; ?>">
这样用户切换语言时，字体就会自动跟着切换啦！
内容的提问来源于stack exchange，提问作者Jean-Pierre64
