如果在语言选择器中定义字体粗细，则会忽略粗体

Question

CSS 不是我的专长，所以我一定有一些简单的误解。我的网站允许人们在英语和 LTR 语言之间切换。我希望默认情况下所有英文文本都是一种字体，而另一种语言的所有文本都是不同的字体。一个将左对齐，一个将右对齐。我发现 :lang 选择器是实现它的一种方式，所以我的 CSS 看起来像：

:lang(en) {
    text-align: left;
    font: 400 13px/1.25 Verdana, sans-serif;
}

:lang(he) {
    text-align: right;
    font: 400 13px/1.25 'Alef', sans-serif;
}

这使得两种语言的默认 font-weight 为 400。

现在，这就是我设置 HTML:

的方式

<!DOCTYPE html>
<html>
<head>...</head>
<body lang="he">
    <b>Text here</b>. Hello.
</body>
</html>

我打算使用 javascript 更改 <body> 的 lang 属性。现在，正如我所料，文本是右对齐的，因为我将 lang 设置为 he。但是，文本的 none 是粗体。当我使用 Chrome 元素检查器工具时，它告诉我以下内容：

:lang(he) {                <style>
    text-align: right;
    font: 400 16px/1.25 "Alef", sans-serif;
}

b {                        user agent stylesheet
    font-weight: bold;
}

~~font-weight: bold~~被划掉了（我不知道如何在HTML块内格式化）。这向我表明，我的 :lang {} 设置的 font-weight 由于某种原因覆盖了 <b></b> 的默认行为。为什么会这样？我该如何解决？

Answer 1

特异性是浏览器决定哪些 CSS 属性值与元素最相关的方式，因此将被应用。特异性是基于由不同种类的 CSS select 或

组成的匹配规则

在 selector 具有相同特异性的情况下，在 CSS 中找到的最后声明应用于元素。

在您使用 :lang(he) 的情况下，您将所有具有 lang-attribute 的元素定位为 he。因为你的 lang 属性在 body 上，你的 b 标签也得到了 selected with :lang(he).

现在，根据特异性规则 b 标签将具有您提供的值 :lang(he)，因为它最后定义覆盖 b 标签的默认声明。

针对您的情况的解决方案是 selecting all 元素与 :lang(he) select 所有 class 与 :lang(he):

.body:lang(en) {
    text-align: left;
    font: 400 13px/1.25 Verdana, sans-serif;
}

.body:lang(he) {
    text-align: right;
    font: 400 13px/1.25 'Alef', sans-serif;
}

<!DOCTYPE html>
<html>
<head>...</head>
<body class="body" lang="he">
    <b>Text here</b>. Hello.
</body>
</html>

您可以做的另一件事是仅 select 具有 lang 属性 = he 的特定元素，并将样式范围限定到该元素：

body:lang(en) {
    text-align: left;
    font: 400 13px/1.25 Verdana, sans-serif;
}

body:lang(he) {
    text-align: right;
    font: 400 13px/1.25 'Alef', sans-serif;
}

<!DOCTYPE html>
<html>
<head>...</head>
<body lang="he">
    <b>Text here</b>. Hello.
</body>
</html>

你可以阅读特异性here

如果在语言选择器中定义字体粗细，则会忽略粗体

Bold ignored if define font weight in lang selector

html

css

multilingual