时间戳

首页 > 解决方案 > 使用 lang css 指令缩小字体大小会产生奇怪的结果

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

问题描述

我正在创建多语言网站，并且我意识到某些语言（例如法语）非常冗长，这破坏了我使用英文副本完成的设计。所以我一直在尝试使用:langcss 指令，主要是为了减少法语登录页面的字体大小。但结果非常违反直觉。少量减少百分比会导致实际尺寸大大减少。

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

: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%。

标签： htmlcss

解决方案

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

但是当你设置类似的东西时请记住，这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>

推荐阅读