Question

This question already has answers here:

Font scaling based on size of container (40 answers)

Closed 3 years ago.

我有一个集装箱,其宽度和高度为%,因此,它的规模取决于外部因素。我希望集装箱内的线体与集装箱大小相对应。利用特别安全局这样做是否有任何好办法? <代码>font-size:x%将只根据原有的字体大小(即100%)对字体进行比值。

Answer 1

您可以通过计算方法与CSS3一道这样做,然而,使用Java文本最可能更为安全。

Using JS you can change the height of the text, then simply bind this same calculation to a resize event, during resize so it scales while the user is making adjustments, or however you are allowing resizing of your elements.

Answer 2

如果您想将体积确定为电离层的一定百分比,则使用<代码>vwunit:

#mydiv { font-size: 5vw; }

The other alternative is to use SVG embedded in the HTML. It will just be a few lines. The font-size attribute to the text element will be interpreted as "user units", for instance those the viewport is defined in terms of. So if you define viewport as 0 0 100 100, then a font-size of 1 will be one one-hundredth of the size of the svg element.

And no, there is no way to do this in CSS using calculations. The problem is that percentages used for font-size, including percentages inside a calculation, are interpreted in terms of the inherited font size, not the size of the container. CSS could use a unit called bw (box-width) for this purpose, so you could say div { font-size: 5bw; }, but I ve never heard this proposed.

Answer 3

另一种选择:

<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);

Or as stated in torazaburo s answer you could use svg. I put together a simple example as a proof of concept:

SVG Example

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 13 15">
        <text x="0" y="13">X</text>
    </svg>
</div>

Answer 4

I used Fittext on some of my projects and it looks like a good solution to a problem like this.

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

Answer 5

It cannot be accomplished with css font-size

Assuming that "external factors" you are referring to could be picked up by media queries, you could use them - adjustments will likely have to be limited to a set of predefined sizes.

Answer 6

职能如下:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs +  % ;
  return this
};

然后,将所有证件的全身尺寸改为或%。

之后,在你们的法典中增加一些东西,以确定基体大小。

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

http://jsfiddle.net/0tpvccjt/

Answer 7

我有一个类似的问题,但我不得不考虑其他问题,即,@apaul34208事例没有解决。我的案件;

I have a container that changed size depending on the viewport using media queries
Text inside is dynamically generated
I want to scale up as well as down

Not the most elegant of examples but it does the trick for me. Consider using throttling the window resize (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>

https://jsfiddle.net/Merch80/b8hoctfb/7/

Answer 8

我已就使用<vw的问题作了更为详细的回答。

然而,简而言之,这基本上是一个计算(或控制)集装箱大小在浏览量方面的事项,然后根据集装箱的标准拟订适当的<代码>vw,同时考虑到如果集装箱有活力地重新组合,需要做些什么。

因此,如果你想要在集装箱中标有<代码>5vw的大小,则在座标上标有<代码>75%<>>>。

Answer 9

If you want to scale it depending on the element width, you can use this web component:
https://github.com/pomber/full-width-text

Check the demo here:
https://pomber.github.io/full-width-text/

The usage is like this:

<full-width-text>Lorem Ipsum</full-width-text>

友情链接