CSS 使用百分比作为字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10323792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using percent for font size?
提问by Sean
I've read a fair bit about resizing fonts recently, most of it deriding using px as an unforgivable crime (ok, maybe not that bad, you get the idea) because it doesn't resize properly in older browsers.
我最近阅读了一些关于调整字体大小的文章，其中大部分嘲笑使用 px 是一种不可原谅的罪行（好吧，也许没那么糟糕，你懂的），因为它在旧浏览器中无法正确调整大小。
I really want to have a standard that I use myself, in the past that has been px, simply because it's simple, easy to understand and fairly easy to achieve the exact font sizes that are specified in designs - but I'm now doubting using px.
我真的很想拥有一个我自己使用的标准，过去一直是 px，仅仅因为它简单、易于理解并且相当容易实现设计中指定的确切字体大小 - 但我现在怀疑使用像素。
I used em on a project recently because it needed text-resizing functionality which I made using jQuery. But I found it quite frustrating because of the way that em amplifies if you have two elements inside of each other both with an em size specified (hope that makes sense)
我最近在一个项目中使用了 em，因为它需要我使用 jQuery 制作的文本调整功能。但是我发现这很令人沮丧，因为如果你有两个元素在彼此内部都有指定的 em 大小（希望有意义）
So I was wondering about using % for font resizing, I've seen a couple of big websites use this technique (namely, Yahoo) and from what I understand it seems to have all of the advantages of em without the incredibly annoying amplification thing.
所以我想知道使用 % 来调整字体大小，我见过几个大网站使用这种技术（即雅虎），据我所知，它似乎具有 em 的所有优点，而没有令人难以置信的烦人放大的事情。
So in short, I'm just wondering if there are any issues with using % for font-sizing in CSS? Would it be better than using PX in terms of font-resizing? And are there any noticeable draw backs?
简而言之，我只是想知道在 CSS 中使用 % 进行字体大小调整是否有任何问题？在字体调整方面，它会比使用 PX 更好吗？有什么明显的缺点吗？
Apologies if the blurb before the question is a little much :/ I'm still kind of getting used to the whole QA thing
如果问题之前的介绍有点多，我深表歉意：/我仍然有点习惯整个 QA 工作
回答by Richik SC
In CSS3, use rem(root em). Sizing will not be affected by em size of the parent element.
在 CSS3 中，使用rem(root em)。大小不会受到父元素的 em 大小的影响。
The root font size is set by setting the font size on the :rootpseudo-element, like so:
根字体大小是通过在:root伪元素上设置字体大小来设置的，如下所示：
:root {
font-size: 16px;
}
回答by Alwin Kesler
try using this
尝试使用这个
body {
margin: 0px;
padding: 0px;
font-size: 62.5%;
}
body>#wrapper {
font-size:1em;
}
so, when you say something like 1em inside the "wrapper" you'll have a size very similar to 10px. here's a example table:
因此，当您在“包装器”中使用 1em 之类的内容时，您的大小将与 10px 非常相似。这是一个示例表：
3em == 30px
.5em == 5px
8.5em == 85px
This will help you in the transition
这将帮助您完成过渡
P.d: of course, you need a wrapper tag after the body
Pd：当然，你需要在body后面加上一个wrapper标签
回答by bronzehedwick
The standard in web design as far as I have experienced it is to use a percent to set the font size in the body, then to use ems to change the font sizing after that. You could use percents outside the body tag with no adverse side effects, but I think many developers find ems easier to work with (anyone is free to check me on this).
就我所经历的而言，网页设计的标准是使用百分比来设置正文中的字体大小，然后使用 em 更改字体大小。您可以在 body 标签之外使用百分比而不会产生不利的副作用，但我认为许多开发人员发现使用 em 更容易（任何人都可以免费检查我）。
The danger comes if you use ems to set the body font size; older browsers choke and incorrectly display the text, especially when zoomed.
如果您使用 em 设置正文字体大小，则危险就来了；较旧的浏览器会卡住并错误地显示文本，尤其是在缩放时。
回答by Brigand
There's a jQuery plugin called FitText. It resizes text based on percents. If the visitor for some reason has JavaScript disabled, it'll just display as normal, so set a reasonable PX or EM backup.
有一个名为FitText的 jQuery 插件。它根据百分比调整文本大小。如果访问者由于某种原因禁用了 JavaScript，它将正常显示，因此请设置合理的 PX 或 EM 备份。
It depends on jQuery, so you'll need to include that in your page (if you don't have it already).
这取决于 jQuery，因此您需要将其包含在您的页面中（如果您还没有的话）。
jquery.fittext.jsfor reference:
/*global jQuery */
/*!
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/
(function( $ ){
$.fn.fitText = function( kompressor, options ) {
var settings = {
'minFontSize' : Number.NEGATIVE_INFINITY,
'maxFontSize' : Number.POSITIVE_INFINITY
};
return this.each(function(){
var $this = $(this); // store the object
var compressor = kompressor || 1; // set the compressor
if ( options ) {
$.extend( settings, options );
}
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).resize(resizer);
});
};
})( jQuery );
回答by Bob Dolman
Maybe will this make more sense of making a font-resize script. I had made a script that did exactly what you desire, but I cant find it any more.
也许这对制作字体调整大小脚本更有意义。我已经制作了一个完全符合您要求的脚本，但我再也找不到它了。
Pseudo-code:
伪代码：
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;
So explained in words. The script needs to resize some fonts, when that is done it will also look for some parent divs to resize those fonts too, except they will be resized 10% less than its inherent. With some puzzling you will have the right conversion. Also try to avoid paddings and border widths.
所以用文字解释。该脚本需要调整一些字体的大小，完成后它还会寻找一些父 div 来调整这些字体的大小，但它们的大小将比其固有大小小 10%。有了一些困惑，您将获得正确的转换。还要尽量避免填充和边框宽度。
