我正在写一个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规则。但这是我想避免的工作。
是否可以在不增加嵌套元素组合的情况下对语言标记的文本应用相对字体大小的增加?
发布于 2014-03-21 17:00:58
级联em是一个非常恼人的问题,幸运的是,它有一个简单的现代解决方案:根em (rem)。
CSS魔法师有这样的说法
使用"em“作为字体大小的问题之一是,它们是级联的,因此您将永远编写选择嵌套元素以将其重置为1em的规则;CSS3现在有rem (”根em")来防止这个问题。只要声明一个px回退,你今天就可以使用它了。
有关血淋淋的细节,请查看CSS3规范。
https://stackoverflow.com/questions/22563928
复制相似问题