Question

我正在编写一份包含英文和中文文本的HTML文档。中文不是我的第一语言，所以我更喜欢中文文本比正常大一点，所以我可以清楚地看到笔画。我试图设计文档以实现这一目标。

明显的CSS解决方案：

:lang(zh-Hans) {font-size: 1.2em;}

有一个不太明显的问题。在每个嵌套元素（任何类型）中，字体大小再乘以20％。在以下示例中，每个中文句子都比前一个大。

<html>
  <head>
    <style type="text/css">
      :lang(zh-Hans) {font-size: 1.2em;} 
    </style>
  </head>
  <body>
    <div lang="zh-Hans">
      我不懂。
      <span>我不懂。</span>
      <span><span>我不懂。</span></span>
    </div>
  </body>
</html>

我可以切换到绝对大小：

:lang(zh-Hans) {font-size: 20px;}

但这会使所有中文文本的大小相同，例如，标题不再大于正文。

有可能的解决方法。我可以重构我的文档，以便语言标记始终应用于最嵌套的元素。或者我可以为所有可能出现中文文本的上下文添加许多CSS规则。但这是我想避免的工作。

是否可以将相对字体大小增加应用于带语言标记的文本，而不会增加嵌套元素的复合效果？

Answer 1

级联em是一个非常烦人的问题，幸运的是，它有一个简单的现代解决方案：root em（rem）。

CSS Tricks has this to say：

使用＆＃34; em＆＃34;的一个问题因为字体大小是他们的级联，所以你永远在编写选择嵌套元素的规则将它们重置为1em; CSS3现在有rem（＆＃34; root em＆＃34;）来防止那个问题。只需声明一个px后备，你今天就可以使用它。

有关血腥的详细信息，请查看CSS3 spec。

使中文文字大20％

1 个答案: