我可以设置相对于页面大小的字体大小吗？

Question

Is there a way to make font-size relative to the size of the page? 有没有办法使font-size相对于页面的大小？ Applying percentage as unit refers to the standard font size (like 90% of 12px, not 90% of the page!). 将百分比作为单位应用是指标准字体大小（如12px的90％，而不是页面的90％！）。 This is different from the behaviour of most of the other tags. 这与大多数其他标签的行为不同。

Any way to make the page 'scale up and down' also with fonts? 有没有什么方法可以使页面“上下缩放”？ Should I rely on em ? 我应该依靠em吗？

Thanks 谢谢

Answer 1

See the new vh and vw CSS units. 查看新的vh和vw CSS单元。 Browser support isn't great yet. 浏览器支持还不是很好。

http://snook.ca/archives/html_and_css/vm-vh-units http://snook.ca/archives/html_and_css/vm-vh-units

It landed in WebKit recently: https://bugs.webkit.org/show_bug.cgi?id=27160 它最近登陆了WebKit： https ： //bugs.webkit.org/show_bug.cgi？ id = 27160

In browsers that support it, 1 vh is 1% (1/100) of the viewport height, and 1 vw is 1% (1/100) of the viewport width. 在支持它的浏览器中， 1 vh是视口高度的1％（1/100）， 1 vw是视口宽度的1％（1/100）。 There are also vmin and vmax units, which represent the smaller of the two and the larger of the two, respectively. 还有vmin和vmax单位，分别代表两者中较小者和两者中较大者。

Answer 2

No you cannot set the size of the font in a percentage relative to the size of the page. 否，您无法以相对于页面大小的百分比设置字体大小。

Sizing in em is based on the size relative to how the font would normally render in 16 point. 在em调整大小取决于相对于字体在16点中通常呈现的大小。

If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in em would be fine. 如果你希望你的页面可以向上和向下缩放并保持某种比例，那么盒子和字体，然后在em设置就可以了。

That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders. 该方法将允许页面的字体和框的缩放以彼此相对大小增长，并且希望不会使事物超出界限和边界。

Answer 3

Try a jQuery plugin like FitText . 试试像FitText这样的jQuery插件。 It automatically sizes text to fit the width of the parent element. 它会自动调整文本大小以适合父元素的宽度。

Another jQuery plugin with the same goal is BigText ( demo ). 另一个具有相同目标的jQuery插件是BigText （演示）。

Answer 4

下面是我为exacly做的一个小脚本（当vw不支持时使用它作为后备） https://gist.github.com/2475269

Answer 5

Another non-ideal answer is to use a series of css breakpoints like so: 另一个非理想的答案是使用一系列的css断点，如下所示：

h1 { font-size: 22px; color: orange; }
@media only screen and (max-width: 900px) {
  h1 { font-size: 20px; color: blue; }
}
@media only screen and (max-width: 800px) {
  h1 { font-size: 18px; color: green; }
}
@media only screen and (max-width: 700px) {
  h1 { font-size: 12px; color: red; }
}

http://jsfiddle.net/8RKhp/ http://jsfiddle.net/8RKhp/

Answer 6

In my view, the range of apparent pixel densities seen by the viewer of a webpage is now massive, from an HTC One held at 12 inches from the face, where there are 5600 pixels/radians to perhaps a 50 inch plasma screen running at 480p, which is about 950 pixels/radians at 4 feet. 在我看来，网页浏览者看到的明显像素密度范围现在很大，从距离面部12英寸处的HTC One，其中有5600像素/弧度到50英寸等离子屏幕以480p运行，在4英尺处约为950像素/弧度。

Or put it another way a 20px font is nearly 6x bigger in your field of view on that plasma screen than the latest handset. 换句话说，在等离子屏幕上，20px字体比最新手机大近6倍。

The solution I cooked up was to set the body font size in absolute pixels as a multiple of the window.screenWidth but constrain it to a minimum an maximum number of units, then use em's for all font sizes after that. 我编写的解决方案是将body字体大小设置为绝对像素，作为window.screenWidth的倍数，但将其约束为最小单位数，然后在之后使用em代替所有字体大小。 The em's+proper use of headings should mean accessibility is fine. em +正确使用标题应该意味着可访问性很好。

I add this function to the page (or it's JS) to set the size: 我将此函数添加到页面（或它的JS）来设置大小：

function setFontSize() {
    pagesized = window.innerWidth / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    document.body.style.fontSize = pagesized; // Set body default font size
}

To make this work the following is added to the body tag: 为了完成这项工作，将以下内容添加到body标签中：

<body onresize="setFontSize()" onload="setFontSize()">

You then just use your CSS (or inline formatting) all based on % or em units and things should scale nicely within those bounds. 然后，您只需使用基于％或em单位的CSS（或内联格式），事物应该在这些范围内很好地扩展。

Or, in JQuery, you can do: 或者，在JQuery中，您可以：

$(window).resize(function() {
    pagesized = $(window).innerWidth() / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    $('body').css('font-size', pagesized); // Set body default font size
});

Answer 7

At least for Firefox, 1em can be used to set the font size related to the font size of the parent. 至少对于Firefox， 1em可用于设置与父级字体大小相关的字体大小。 So if you set font-size of body to a value that is in ratio to the size of the page. 因此，如果将body的font-size设置为与页面大小成比例的值。 All fonts under body that use 'em' as unit will be in relation to the page. 使用'em'作为单位的正文下的所有字体都与页面有关。

To do that, you must set the size of the body in relation to the page like height: 100% or width if you want to relate the size to the width. 要做到这一点，您必须设置相对于页面的主体大小，如height: 100%或宽度，如果您想要将大小与宽度相关联。

Then, you will have to constantly synchronize the body height with the font size. 然后，您将不得不不断地将主体高度与字体大小同步。 This can be done with 'onResize'. 这可以通过'onResize'来完成。

See more detail in the following link . 请在以下链接中查看更多详细信息。

Answer 8

I recommend you use YUI reset to unify the font rendering across different browsers. 我建议您使用YUI重置来统一跨不同浏览器的字体呈现。 Then check YUI Font Size . 然后检查YUI字体大小。 After this you can rely on your fonts to display correctly. 在此之后，您可以依靠您的字体正确显示。

Answer 9

You can solve it like this: 你可以这样解决：

jQuery(document).ready(function ($) {

// Dynamisches Skalieren von Schriften
fontSize = function(){
//ww = $(window).innerWidth();
ww = $('.mainhead').innerWidth(); // Width of the Motherelement
one = ww/100; // 1%
multiplcator = one*31; 
$('.mainhead').css({'font-size': multiplcator+'px'});
}
fontSize();



$(window).resize(function() {
fontSize();
});

});

When you now set your Fontsize via css it wokes on all browsers like charm 当你现在通过css设置你的Fontsize时，它就会像魅力一样在所有浏览器上醒来

.mainhead{
width:48%;
font: normal 2em Times, Verdana, sans-serif;

}

Answer 10

I know it's already been answered, but i need to share this for future comers , because it took me some precious minutes to figure this out. 我知道它已经得到了解答，但是我需要为未来的comers分享这个，因为我花了一些宝贵的时间才弄明白这一点。

So as mr @random said: em as a unit, will do the trick. 所以正如@random先生所说： em作为一个整体，会做的伎俩。

If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in em would be fine. 如果你希望你的页面可以向上和向下缩放并保持某种比例，那么盒子和字体，然后在em中设置就可以了。

That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders. 该方法将允许页面的字体和框的缩放以彼此相对大小增长，并且希望不会使事物超出界限和边界。

Initialise your body with 1em as font-size that means 100% 使用1em作为font-size初始化您的body ，这意味着100%

body {
      font-size: 1em; 
}

Then set your element's font-size as a percentage of it's parent's 然后将元素的font-size为其父级的百分比

.your_element {
 font-size:0.4em /* for example 40% if its parent font-size */
}

Now the magic of @media queries 现在是@media查询的magic

@media all and (max-width: 767px) {
  body {
    font-size: 0.4em !important;
  }
}

@media all and (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 0.6em !important;
  }
}

@media all and (min-width: 1024px) and (max-width: 1199px) {
  body {
    font-size: 0.8em !important;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  body {
    font-size: 1em !important;
  }
}

@media all and (min-width: 1600px) and (max-width: 1999px) {
  body {
    font-size: 1.2em !important;
  }
}

@media all and (min-width: 2000px) and (max-width: 2999px) {
  body {
    font-size: 1.6em !important;
  }
}

@media all and (min-width: 3000px) and (max-width: 3999px) {
  body {
    font-size: 1.8em !important;
  }
}

@media all and (min-width: 4000px) {
  body {
    font-size: 2em !important;
  }
}

And Bingo, have a nice day. 和宾果，祝你有愉快的一天。

Answer 11

When you say "relative to the size of the page", what exactly do you mean with "size of the page"? 当您说“相对于页面大小”时，您对“页面大小”的具体含义是什么？

The browser window? 浏览器窗口？ Then your fonts would change size when the user resizes the window - definitely not what anyone would expect, and pretty bad for usability. 然后，当用户调整窗口大小时，您的字体会改变大小 - 绝对不是任何人所期望的，并且对可用性非常不利。 People don't resize windows to see a larger or smaller representation of the whole site, they enlarge them to see a larger section of the site, and make windows smaller to see a specific small section and have space for other windows next to the browser. 人们不调整窗口看到整个网站的一个或大或小的表示，他们扩大他们看到一个网站的较大部分，使较小的窗口看到一个具体的小部分，有空间用于其他窗口旁边的浏览器。

If you mean the size of the screen, that's even worse since it would mean huge fonts on a 30" screen. But people don't buy 30" screens so they can see huge fonts, they buy them to see multiple windows side by side. 如果你的意思是屏幕的大小，那就更糟了，因为它意味着30英寸屏幕上的巨大字体。但人们不买30英寸的屏幕，所以他们可以看到巨大的字体，他们买它们并排看多个窗口。

All in all, using em or something similay is the only sensible way to make a scaleable website, since it will scale relative to the default size, which is/should be relative to what the user can comfortably read. 总而言之，使用em或similay是建立可扩展网站的唯一合理方式，因为它将相对于默认大小进行缩放，这应该是相对于用户可以舒适阅读的大小。

我可以设置相对于页面大小的字体大小吗？

问题描述

11 个解决方案

解决方案1
33 2012-03-29 02:45:06

解决方案2
18 已采纳 2009-07-25 09:35:16

解决方案3
8 2011-08-23 00:13:13

解决方案4
4 2012-04-24 10:18:38

解决方案5
4 2013-10-08 04:36:25

解决方案6
3 2013-04-22 07:48:20

解决方案7
2 2010-01-15 05:35:34

解决方案8
0 2009-07-25 09:24:06

解决方案9
0 2013-06-11 12:51:02

解决方案10
0 2017-09-23 04:23:27

解决方案11
-3 2009-07-25 09:29:22

我可以设置相对于页面大小的字体大小吗？

问题描述

11 个解决方案

解决方案1 33 2012-03-29 02:45:06

解决方案2 18 已采纳 2009-07-25 09:35:16

解决方案3 8 2011-08-23 00:13:13

解决方案4 4 2012-04-24 10:18:38

解决方案5 4 2013-10-08 04:36:25

解决方案6 3 2013-04-22 07:48:20

解决方案7 2 2010-01-15 05:35:34

解决方案8 0 2009-07-25 09:24:06

解决方案9 0 2013-06-11 12:51:02

解决方案10 0 2017-09-23 04:23:27

解决方案11 -3 2009-07-25 09:29:22

解决方案1
33 2012-03-29 02:45:06

解决方案2
18 已采纳 2009-07-25 09:35:16

解决方案3
8 2011-08-23 00:13:13

解决方案4
4 2012-04-24 10:18:38

解决方案5
4 2013-10-08 04:36:25

解决方案6
3 2013-04-22 07:48:20

解决方案7
2 2010-01-15 05:35:34

解决方案8
0 2009-07-25 09:24:06

解决方案9
0 2013-06-11 12:51:02

解决方案10
0 2017-09-23 04:23:27

解决方案11
-3 2009-07-25 09:29:22