应使用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
表格不会继承<table lang="fr">的语言设置，哪怕整张表都是法语内容。浏览器和NVDA、VoiceOver这些读屏软件只认<td>或<th>自身的lang属性。
使用场景：多语言产品页中，一列显示法国定价（含€符号、空格分隔千位），一列显示加拿大定价（含CAD、逗号分隔千位）；或双语服务条款并排对比。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<td lang="fr-FR">Prix TTC : 199,99 €</td> - ✅ 正确写法：
<td lang="fr-CA">Prix TPS/TVA : 199,99 $ CAD</td> - ❌ 错误写法：
<td>Prix TTC : 199,99 €</td>（无lang，按父级或默认语言处理） - ❌ 错误写法：
<td lang="fr">...</td>（无法区分地区行为）
fr-FR和fr-CA在CSS和拼写检查中的实际差异
:lang()伪类匹配是严格字符串比对，td:lang(fr)不会命中fr-FR，反过来也不行。拼写检查同样依赖精确值——Chrome 的法语词典有两套独立数据：一套加载fr-FR时启用，另一套只响应fr-CA。
性能影响很小，但兼容性陷阱明显：旧版 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文档，浏览器不识别
fr-CA的页面，如果其<html lang="fr">，那搜索引擎和浏览器就认为内容是泛法语，地区特性全部失效。两者必须严格一致。 
