我有一个宽度和高度为%的容器,因此它会根据外部因素进行缩放。我希望容器内的字体相对于容器的大小是一个恒定的大小。有没有什么好办法用CSS做到这一点? font-size: x%
只会根据原始字体大小(100%)缩放字体。
答案 0 :(得分:148)
如果要将font-size设置为视口宽度的百分比,请使用vw
单位:
#mydiv { font-size: 5vw; }
另一种方法是使用嵌入在HTML中的SVG。它只是几行。 text元素的font-size属性将被解释为“user units”,例如视口的定义。因此,如果将视口定义为0 0 100 100,则字体大小为1将是svg元素大小的百分之一。
不,没有办法在CSS中使用计算来做到这一点。问题是用于font-size的百分比(包括计算中的百分比)是根据继承的字体大小而不是容器的大小来解释的。为此目的,CSS可以使用一个名为bw
(box-width)的单位,所以你可以说div { font-size: 5bw; }
,但我从未听过这个提议。
答案 1 :(得分:66)
另一种替代方案:
<强> Working Example 强>
fontsize = function () {
var fontSize = $("#container").width() * 0.10; // 10% of container width
$("#container h1").css('font-size', fontSize);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
或者如torazaburo's answer中所述,您可以使用svg。我把一个简单的例子作为概念证明:
<强> SVG Example 强>
<div id="container">
<svg width="100%" height="100%" viewBox="0 0 13 15">
<text x="0" y="13">X</text>
</svg>
</div>
答案 2 :(得分:29)
您可以使用CSS3使用计算执行此操作,但使用JavaScript最有可能更安全。
以下是一个示例:http://jsfiddle.net/8TrTU/
使用JS,您可以更改文本的高度,然后只需将相同的计算绑定到resize事件,在调整大小期间,以便在用户进行调整时进行缩放,或者您允许调整元素的大小。
答案 3 :(得分:7)
我在我的一些项目中使用了Fittext,它看起来像是一个很好的解决方案。
FitText使字体大小变得灵活。在流体或响应式布局上使用此插件,以实现填充父元素宽度的可缩放标题。
答案 4 :(得分:6)
无法使用css font-size
完成假设您所指的“外部因素”可以通过媒体查询获取,您可以使用它们 - 调整可能必须限制为一组预定义的尺寸。
答案 5 :(得分:2)
这是功能:
document.body.setScaledFont = function(f) {
var s = this.offsetWidth, fs = s * f;
this.style.fontSize = fs + '%';
return this
};
然后将所有文档子元素字体大小转换为em或%。
然后在代码中添加这样的内容以设置基本字体大小。
document.body.setScaledFont(0.35);
window.onresize = function() {
document.body.setScaledFont(0.35);
}
答案 6 :(得分:1)
我有类似的问题,但我不得不考虑@ apaul34208示例没有解决的其他问题。就我而言;
不是最优雅的例子,但它对我有用。考虑使用限制窗口调整大小(https://lodash.com/)
var TextFit = function(){
var container = $('.container');
container.each(function(){
var container_width = $(this).width(),
width_offset = parseInt($(this).data('width-offset')),
font_container = $(this).find('.font-container');
if ( width_offset > 0 ) {
container_width -= width_offset;
}
font_container.each(function(){
var font_container_width = $(this).width(),
font_size = parseFloat( $(this).css('font-size') );
var diff = Math.max(container_width, font_container_width) - Math.min(container_width, font_container_width);
var diff_percentage = Math.round( ( diff / Math.max(container_width, font_container_width) ) * 100 );
if (diff_percentage !== 0){
if ( container_width > font_container_width ) {
new_font_size = font_size + Math.round( ( font_size / 100 ) * diff_percentage );
} else if ( container_width < font_container_width ) {
new_font_size = font_size - Math.round( ( font_size / 100 ) * diff_percentage );
}
}
$(this).css('font-size', new_font_size + 'px');
});
});
}
$(function(){
TextFit();
$(window).resize(function(){
TextFit();
});
});
.container {
width:341px;
height:341px;
background-color:#000;
padding:20px;
}
.font-container {
font-size:131px;
text-align:center;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" data-width-offset="10">
<span class="font-container">£5000</span>
</div>
答案 7 :(得分:0)
我已经针对特定容器大小调整in this answer给出了更详细的使用vw
的答案,所以我不会在这里重复我的回答。
总之,然而,它基本上是考虑(或控制)容器大小相对于视口的内容,然后基于容器的大小来计算正确的vw
大小的问题。 ,注意动态调整大小时需要发生的事情。
因此,如果您希望容器的5vw
大小为视口宽度的100%,那么在视口宽度的75%
处,您可能需要(5vw * .75) = 3.75vw
。{ / p>
答案 8 :(得分:0)
如果要根据元素宽度进行缩放,可以使用此Web组件:
https://github.com/pomber/full-width-text
在此查看演示:
https://pomber.github.io/full-width-text/
用法如下:
<full-width-text>Lorem Ipsum</full-width-text>
答案 9 :(得分:-2)
您也可以尝试这种纯CSS方法:
font-size: calc(100% - 0.3em);