css 中 -webkit-locale 是什么意思？

Question

css 中 -webkit-locale 是什么意思？

我将 html 元素上的 lang 属性设置为“en”。当我在 chrome 的样式检查器中查看时，我在 html 元素上看到了以下 css。请注意，这是浏览器添加的默认样式。

html[Attributes Style] {
    -webkit-locale: "en";
}

Run Code Online (Sandbox Code Playgroud)

当我在 Firefox 中查看它时，html 元素没有这些样式。

规范中有这个吗？
这是做什么的？
你能在css中设置这个值吗？
你应该设置这个值吗？
这适用于哪些元素？

Answer 1

cod*_*fin 2

长话短说

\n

“font-language-override CSS 属性控制字体中特定于语言的字形的使用。” ^[1]类似地-webkit-locale做同样的事情，但对于基于 webkit/chromium 的浏览器^[2]。

\n
\n

Unicode 不是字符到字形的 1:1 映射 - 它是 unicode 字符数和当前语言环境的函数^[3]。您可能有兴趣查看 CJK Unified Ideographs 的示例^[4][5]。

\n

基本上，这些 CSS 属性允许您覆盖或创建文档（或其他元素）属性的后备lang。它告诉浏览器根据语言/区域设置值呈现字体中的哪个字形。

\n

-webkit-locale似乎使用与Accept-LanguageHTTP 标头相同的语言范围^[6][7][8]。

\n

相反，font-language-override需要三个或四个字符的区分大小写的 OpenType 语言系统标记。^[1][9][10]

\n
\n

问题解答：

\n
\n

\n
当我在 Firefox 中查看它时，html 元素没有这些样式。
\n

\n

Firefox 不支持-webkit-locale，但它支持font-language-override^[1]，本质上做同样的事情^[2]。

\n
\n

\n
规范中有这个吗？
\n

\n

-webkit-locale是非标准^[11][12]，仅在基于 webkit/chromium 的浏览器中受支持，而是font-language-override标准^[1][9]，但目前仅受 Firefox 支持。然而，在两者之间，您基本上拥有完整的常青浏览器支持。

\n
\n

\n
这是做什么的？
\n

\n

这是一个例子：

\n

\r\n

.traditional {\n  -webkit-locale: \'zh-Hant\';\n  font-language-override: \'ZHT\';\n}\n\n.simplified {\n  -webkit-locale: \'zh-Hans\';\n  font-language-override: \'ZHS\';\n}\n\n.traditional-hong-kong {\n  -webkit-locale: \'zh-Hant-HK\';\n  font-language-override: \'ZHH\';\n}\n\n.traditional-macao {\n  -webkit-locale: \'zh-Hant-MO\';\n  font-language-override: \'ZHTM\';\n}\n\n\n/* simple table styles */\n\ntable {\n  border-collapse: collapse;\n}\n\nth {\n  background: #cccccc;\n}\n\nth,\ntd {\n  border: 1px solid #ccc;\n  padding: 8px;\n  text-align: center;\n}\n\ntr:nth-child(even) {\n  background: #efefef;\n}\n\ntr:hover {\n  background: #d1d1d1;\n}\n\ntd:first-of-type {\n  font-size: 100px;\n}

Run Code Online (Sandbox Code Playgroud)\r\n

<html lang="zh">\n\n<head>\n  <title>-webkit-locale Example</title>\n</head>\n\n<body>\n  <h3>This is the same Chinese character (\xe9\x81\xb8) but different glyphs are rendered based on the -webkit-locale/font-language-override.</h3>\n  <table>\n    <thead>\n      <tr>\n        <th>Glyph</th>\n        <th>-webkit-locale <br> font-language-override</th>\n        <th>Description</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>\xe9\x81\xb8</td>\n        <td>None</td>\n        <td>default, lang="zh"</td>\n      </tr>\n      <tr>\n        <td class="simplified">\xe9\x81\xb8</td>\n        <td>zh-Hans <br> ZHS</td>\n        <td>simplified Chinese</td>\n      </tr>\n      <tr>\n        <td class="traditional">\xe9\x81\xb8</td>\n        <td>zh-Hant <br> ZHT</td>\n        <td>traditional Chinese</td>\n      </tr>\n      <tr>\n        <td class="traditional-hong-kong">\xe9\x81\xb8</td>\n        <td>zh-Hant-HK <br> ZHH</td>\n        <td>Hong Kong traditional Chinese</td>\n      </tr>\n      <tr>\n        <td class="traditional-macao">\xe9\x81\xb8</td>\n        <td>zh-Hans-MO <br> ZHTM</td>\n        <td>Macao traditional Chinese</td>\n      </tr>\n    </tbody>\n  </table>\n</body>\n\n</html>

Run Code Online (Sandbox Code Playgroud)\r\n

\r\n

\n

Chrome 120 - MacOS - - 上的结果lang="en"使用-webkit-locale：

\n

\xc2\xa0\n

\n

FireFox 121 - MacOS - * - 上的结果lang="zh"使用font-language-override：

\n

* 请注意，当使用 font-language-override 时，除非 lang 属性为，否则本示例中的各种字形将无法正确应用zh。

\n

\xc2\xa0\n

\n

\n
你能在css中设置这个值吗？
\n

\n

是的，这就是它的目的。

\n

/** \n * Render Chinese traditional characters\n * instead of the in-many-cases-defaulted-to\n * Chinese simplified characters.\n */\n[lang=\'zh\'] {\n  -webkit-locale: \'zh-Hant\';\n  font-language-override: \'ZHT\';\n}\n

Run Code Online (Sandbox Code Playgroud)\n
\n