使用百分比字体大小？

Question

我最近读过很多关于调整字体大小的文章,其中大部分都是使用px作为一种不可饶恕的犯罪而嘲笑(好吧,也许不是那么糟糕,你明白了),因为它在旧浏览器中没有正确调整大小.

我真的希望有一个我自己使用的标准,过去曾经是px,只是因为它简单易懂,并且很容易实现设计中指定的确切字体大小 - 但我现在怀疑使用PX.

我最近在一个项目中使用了em,因为它需要使用jQuery创建的文本大小调整功能.但是我发现它非常令人沮丧,因为如果你有两个元素并且指定了em大小,那么em放大的方式(希望有意义)

所以我想知道使用%进行字体大小调整,我看到有几个大网站使用这种技术(即雅虎),据我所知它似乎具有em的所有优点而没有令人难以置信的恼人放大的东西.

简而言之,我只是想知道在CSS中使用%进行字体大小调整是否存在任何问题？在字体大小调整方面,它比使用PX更好吗？有没有明显的退款？

如果问题前面的问题有点多,请道歉:/我仍然习惯了整个QA的事情

Answer 1

在CSS3中,使用rem(root em).大小调整不受父元素的em大小的影响.

通过在:root伪元素上设置字体大小来设置根字体大小,如下所示:

:root {
    font-size: 16px;
}

Answer 2

尝试使用这个

body {
  margin: 0px;
  padding: 0px;
  font-size: 62.5%;
}

body>#wrapper {
  font-size:1em;
}

所以,当你在"包装器"中说出类似1em的东西时,你的尺寸将非常类似于10px.这是一个示例表:

3em == 30px
.5em == 5px
8.5em == 85px

这将有助于您进行过渡

Pd:当然,你需要一个身体后面的包装标签

Answer 3

据我所知，网页设计的标准是使用百分比来设置正文中的字体大小，然后使用 em 来更改字体大小。您可以在 body 标记之外使用百分比，而不会产生不良副作用，但我认为许多开发人员发现 em 更容易使用（任何人都可以免费检查我）。

如果你使用ems来设置正文字体大小，就会出现危险；旧版浏览器会阻塞并错误地显示文本，尤其是在缩放时。

Answer 4

也许这会让制作字体调整脚本更有意义。我制作了一个完全符合您要求的脚本，但我再也找不到它了。

伪代码：

var fontSize = 15; // (em) input
var fontResize = -1;// (em)input
fontSize = fontSize+fontResize; //current div

for(every inherent parent classname == 'classname-em')
document.classnameParentSize[numberofclass] = classnameChildSize[numberOfClass]/100*90;

如此用言语解释。该脚本需要调整某些字体的大小，完成后它还会查找一些父 div 来调整这些字体的大小，但它们的调整大小将比其固有字体小 10%。虽然有些令人费解，但你会得到正确的转换。还要尽量避免填充和边框宽度。