Question

我正在创建多语言站点，并且我已经意识到某些语言（例如法语）非常罗which，这破坏了我使用英语版本完成的设计。因此，我一直在尝试使用:lang css指令主要是为了减小法语登录页面的字体大小。但是结果是非常违反直觉的。少量减少百分比会导致实际大小的大幅减少。

也许我的理解不正确。这是解释此现象的示例代码

:lang(fr)
{
  font-size:90%;
}
h1 {
  font-size:3em;
}

<h1>
This is my heading
</h1>
<h1 lang="fr">
This is my very very long verbose heading in French
</h1>

如您所见，我的法文标题很小，字体大小只减少了10％。

Answer 1

“也许我的理解不正确。”是的，我想是这样。您期望法语的字体大小将显示为h1 { font-size:3em;}定义的3em中的90％。

但是，当您设置font-size:90%之类的内容时请保持头脑，这意味着字体大小将从我们已经设置字体大小的直接父级继承90％。在给定的代码中，您没有设置<h1 lang="fr">容器的字体大小（在本例中为'body'）。

如果我们未为主体浏览器设置字体大小，则默认情况下设置为16px（在chrome中，但浏览器会有所不同）。因此，伪类:lang(fr)选择器比仅标记选择器h1具有更高的优先级，并且它是从其容器主体标记继承的，表示“ 14.4px”。

我的建议是使用em单元来克服这种情况。 em单位是从最高父级继承的。参见下面的方法，可能可以给您一种方法。

body {
  font-size: 16px;
}
h1 { 
  font-size:3em; /* means 16*3 = 48px; */
}
h1:lang(fr) {
  font-size:2.7em; /* (48*90)/100 = 43.2px/16px = 2.7em */
}

<h1>Actual Font Size</h1>
<h1 lang="fr">French Font Size</h1>

使用lang css指令缩小字体大小会产生奇怪的结果

1 个答案: