logo标签列表

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

htmlcss
28
有没有一种方法可以让font-size相对于页面的大小？将百分比作为单位应用是指参考标准字体大小（如12px的90％，而不是页面的90％！）。这与大多数其他标签的行为不同。
有什么办法可以让页面和字体“放大和缩小”？我应该依赖em吗？
谢谢
11个回答
37
1
你应该澄清这个功能目前还没有得到广泛支持，它是在CSS3中引入的。而且可能需要更多关于vh和vm的解释，而不仅仅是一个裸链接指向博客。 - random
1
"浏览器支持还不够好。" 这是互联网，对吧？为什么我要重复已经写过的内容呢？我们应该奖励那些提供好信息的来源，而不是试图将其隔离开来。 - zachleat
2
如果链接腐烂从未发生过，那就是一个好的建议。http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers - random
有趣的阅读，感谢分享。如果你想编辑我的回答（这里可以吗？），请随意这样做，也就是说，“欢迎拉请求”。 - zachleat
酷，这里是一个例子如何做到：<font style="font-size:5vh">这是一个测试</font> - Thorsten Staerk
Thirsten Staerk：font元素在HTML4中已经过时，而且正如所提到的，vw和vh并不被所有浏览器支持。你的评论有两个方面都是错误的建议。 - Michael Moriarty
20

不，你不能以与页面大小相对的百分比设置字体大小。

使用 em 进行大小调整是基于字体在 16 点大小下的正常渲染大小来计算的。

如果您希望页面能够缩放并保持某种比例，包括框和字体，则使用 em 进行设置就可以了。

这种方法将允许页面上的字体和框等按照相对大小进行缩放，希望不会出现超出边界和边框的情况。

5
值得注意的是，它是相对于浏览器的默认字体大小而言的，这个默认大小可能是16磅，也可能不是（尽管在桌面浏览器上这是默认值）。 - Tate Johnson
没错，在浏览器中默认大小为16pt。如果CSS依赖于此，您真的无法猜测用户是否将其设置为更大或更小，这可能会有点麻烦。 - random
所以我说<font size=10em>foo</font>，我期望"foo"的大小会随着浏览器窗口的缩放而改变。但事实并非如此。 - Thorsten Staerk
不得不为超大屏幕调整应用程序，你刚刚救了我的命 <3 - moolsbytheway
也许自这个答案写出来以来情况有所改变，但是如今EdF+Ninjacannon解决方案无疑更加有用（事实上对我帮助很大）。 - undefined
9

试试使用jQuery插件，如FitText。它会自动调整文本大小以适应父元素的宽度。

另一个具有相同目标的jQuery插件是BigText（演示）。

4
在我看来，网页浏览者所看到的表观像素密度范围现在非常广泛，从离脸部12英寸的HTC One手机有5600个像素/弧度，到可能是50英寸的480p等离子屏幕，距离4英尺左右时大约有950个像素/弧度。
换句话说，在那个等离子屏幕上，20px字体在你的视野中几乎比最新款手机大6倍。
我想出了一个解决方案，即将body字体大小设置为绝对像素，并作为window.screenWidth的倍数，但将其限制在最小和最大单元数内，然后在此之后使用em作为所有字体大小的单位。通过正确使用标题和em，可保证易于访问。
我将以下功能添加到页面或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
}

为了使这个工作生效，需要在body标签中添加以下内容：
<body onresize="setFontSize()" onload="setFontSize()">

接下来你只需使用基于百分比或em单位的CSS（或内联格式），所有内容都会在这些限制范围内良好缩放。

或者，使用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
});
这个解决方案对我来说起作用了，只需要做一个小修复：在"setFontSize"函数的最后一个语句中添加单位（...pagesized+"px";）。接下来，你可以使用em来设置其他字体大小（1em等于body的字体大小）。简单而有效。 - undefined
4
另一个不太理想的解决方法是使用一系列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/

3
2
至少对于Firefox而言，1em可用于设置与父元素相关的字体大小。因此，如果您将body的字体大小设置为与页面大小成比例的值，则在body下使用“em”作为单位的所有字体都将与页面成比例。
要做到这一点，您必须将body的大小与页面相关联，例如使用height: 100%或者width（如果您想将大小与宽度相关联）。
然后，您需要不断地同步body的高度和字体大小。可以使用'onResize'来完成这个过程。
在以下链接中查看更多详细信息。
1
链接在2012年7月31日已经不存在了。 - k3b
0

我知道这个问题已经有人回答过了，但是为了以后的初学者着想，我需要分享一下，因为我花费了一些宝贵的时间来解决它。

所以正如@random先生所说：使用em作为单位就可以解决问题。

如果你希望页面可以缩放并保持一定比例的盒子和字体大小，那么使用em进行设置是不错的选择。

这种方法允许页面上的字体和盒子相对大小扩展，并希望没有东西会超出边界和边框。

将body初始化为1em，意味着100％的font-size。

body {
      font-size: 1em; 
}

然后将元素的font-size设置为其父元素的百分比。
.your_element {
 font-size:0.4em /* for example 40% if its parent font-size */
}

现在是关于编程的内容，翻译如下：

现在是关于@media查询的魔法

@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;
  }
}

好了，祝你有美好的一天。

0

我建议您使用YUI重置，以统一不同浏览器中的字体呈现效果。然后检查YUI字体大小。完成这些步骤后，您可以依赖于您选择的字体正确地显示。

0
你可以这样解决它：
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();
});

});

当您现在通过CSS设置字体大小时，它可以在所有浏览器上完美运行。

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

}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接