应使用BCP 47地区子标签，如lang="fr-FR"或lang="fr-CA"，而非笼统的lang="fr"；二者在语音朗读、拼写检查、CSS样式、数字格式及SEO中行为不同，且不互相匹配。

lang属性怎么写才能区分法语的法国版和加拿大版

浏览器和辅助技术靠lang值识别法语变体，不是靠“法语”这个概念本身。你写lang="fr"，系统只知道是法语，但不知道该用巴黎口音还是蒙特利尔发音，也不知道该用123 456,78（法）还是123,456.78（加）这种数字格式。真正起作用的是带地区子标签的完整BCP 47码。

常见错误现象：页面里混着法国法语和加拿大法语内容，但全用lang="fr"，结果屏幕阅读器统一按法国规则朗读，拼写检查器把autobus（加）标红，CSS :lang(fr-CA)样式完全不生效。

• fr-FR：法国法语，字体回退、标点间距、语音引擎加载都走法国路径；Google SEO 会把它归入法国市场索引
• fr-CA：加拿大法语，系统倾向加载魁北克语音库，词典包含courriel、fin de semaine等本地词
• fr（无地区）：仅当内容不绑定具体地域时可用，比如国际组织通用法语文档；但无法触发地区敏感行为，如font-family按地区切换

表格里法语单元格必须单独标fr-FR或fr-CA

表格不会继承

的语言设置，哪怕整张表都是法语内容。浏览器和NVDA、VoiceOver这些读屏软件只认

✅ 正确写法：

❌ 错误写法：

（无lang，按父级或默认语言处理）

❌ 错误写法：

（无法区分地区行为）

fr-FR和fr-CA在CSS和拼写检查中的实际差异

:lang()伪类匹配是严格字符串比对，td:lang(fr)不会命中fr-FR，反过来也不行。拼写检查同样依赖精确值——Chrome 的法语词典有两套独立数据：一套加载fr-FR时启用，另一套只响应fr-CA。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

性能影响很小，但兼容性陷阱明显：旧版 Safari 对fr-CA支持不稳定，部分语音引擎可能 fallback 到fr基础模型；而fr-FR在所有主流浏览器中支持最完整。

• CSS示例：span:lang(fr-FR) { quotes: "«" "»" "‹" "›"; } —— 法国引号格式
• CSS示例：span:lang(fr-CA) { quotes: "« " " »" "‹ " " ›"; } —— 加拿大引号带空格
• 拼写检查：textarea设lang="fr-CA"后，输入ordinateur不报错，但computer会被标红

动态切换法语地区版本时，lang不能只改JS变量

SPA里用户点“切换为加拿大法语”，你执行document.documentElement.lang = "fr-CA"，这只能影响后续新渲染的内容。已存在的DOM节点不会重触发翻译逻辑、不会重载语音引擎、CSS :lang()也不会重新计算。

容易踩的坑是以为改了根lang就万事大吉，结果用户听到的还是法国发音，拼写检查依旧按法国词典跑。

• 必须配合强制刷新：改完lang后调用location.reload()，确保整页以新语言上下文重载
• 或者用服务端渲染（SSR）/静态生成（SSG），让首屏HTML就带正确的lang="fr-CA"，这是最稳妥方案
• 避免用xml:lang替代lang，HTML5中xml:lang仅用于XHTML文档，浏览器不识别

真正容易被忽略的点是：hreflang声明为fr-CA的页面，如果其，那搜索引擎和浏览器就认为内容是泛法语，地区特性全部失效。两者必须严格一致。

或	自身的lang属性。 使用场景：多语言产品页中，一列显示法国定价（含€符号、空格分隔千位），一列显示加拿大定价（含CAD、逗号分隔千位）；或双语服务条款并排对比。 ✅ 正确写法：	Prix TTC : 199,99 €	Prix TPS/TVA : 199,99 $ CAD	Prix TTC : 199,99 €	...

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！