怎么制作多语言HTML简历？中英双语切换实现-html教程-PHP中文网

正确做法是用 data-zh/data-en 存双语文案，通过 lang 属性切换配合 css ::before 渲染，结合 localstorage 记住语言、aria 增强可访问性，并微调中英字体 baseline 与行高以确保排版精准。

怎么制作多语言html简历？中英双语切换实现

硬写两套 HTML（中文一套、英文一套）再用 JS 切换显隐，后期维护成本高、可访问性差、SEO 不友好。正确做法是同一份 DOM 元素里用 data-zh 和 data-en 存对应文案，语言切换只改根节点的 lang 属性和 CSS 选择器逻辑。

示例：

<h1 data-zh="张伟" data-en="Wei Zhang"></h1>

配合 CSS：

[lang="zh"] [data-zh]::before { content: attr(data-zh); }<br>[lang="en"] [data-en]::before { content: attr(data-en); }

这样语义清晰、无 JS 也能降级显示（默认显示元素文本，或设 content: "" 强制依赖属性）。

所有文本类元素（<h2></h2>、<p></p>、<li>）都应带双语 data-* 属性，不要遗漏小字如“2023.06 – 2024.09”
按钮、链接文字也需双语，否则切换后出现空白或原始英文
避免在 data-* 中放 HTML 标签——CSS ::before 无法解析标签，会原样输出字符串

每次打开都重置成浏览器默认语言，体验断层。必须把用户点击的选项存进 localStorage，并在页面加载时优先读取。

关键逻辑顺序不能错：先读 localStorage → 若存在则设 document.documentElement.lang → 再触发一次 CSS 渲染。如果等 DOM 加载完再设 lang，会出现短暂的“中英混排”闪烁。

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

存值用 localStorage.setItem('resume-lang', 'en')，读值用 localStorage.getItem('resume-lang')
若读不到，再 fallback 到 navigator.language || navigator.userLanguage，但注意 IE 返回的是 zh-CN，要截取前两位
别用 cookie：没这个必要，且需要额外处理路径、过期时间

纯靠 <button>EN/中文</button> 对屏幕阅读器不友好，且按 Tab 键聚焦后，用户不知道当前激活的是什么语言。

正确写法：

<button aria-label="切换为英文" data-lang="en">EN</button><br><button aria-label="切换为中文" data-lang="zh">中文</button>

JS 绑定事件时，对 Enter 和 Space 都响应，且切换后给按钮加 aria-pressed="true" 状态。

CSS 里写 font-family: "Inter", "PingFang SC", sans-serif 看似合理，但中文字体和英文字体基线（baseline）不同，导致同一行内 <h2></h2> 文字上下偏移、行高不齐。尤其在简历这种强调排版精准的场景里，一眼就能看出不对劲。

解决方式不是换字体，而是分语言重置 line-height 和 font-size 比例：

[lang="zh"] h2 { font-size: 1.5rem; line-height: 1.4; }<br>[lang="en"] h2 { font-size: 1.45rem; line-height: 1.35; }

同时确保中文字体栈末尾有 system-ui 或 sans-serif 保底，防止某些系统缺失 PingFang 或 Noto Sans CJK。

别依赖 font-display: swap 加载字体——简历是静态页，字体应内联或预加载，避免闪动
中英文标点宽度不一致（如中文顿号“、”比英文逗号“,”宽），必要时对 [lang="zh"] span[data-zh] 单独设 letter-spacing
导出 PDF 时，Puppeteer 或 wkhtmltopdf 可能忽略 [lang] CSS，需额外注入媒体查询或服务端渲染

中英文切换本身不难，真正卡住人的永远是那些“看起来应该自动好使，其实要一行行对齐、一个个属性校验”的细节：基线偏移、ARIA 状态同步、localStorage 读写时机、字体回退链顺序。漏掉任意一环，都会让一份本该专业的简历，在某个设备或某个用户眼里显得粗糙。