html Bootstrap 4字体大小的优秀助手

Posted 2021-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Bootstrap 4字体大小的优秀助手相关的知识，希望对你有一定的参考价值。

//--- demand methods --- //

@function to-string($value) {
  @return inspect($value);
}

/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}


/* HELPER */
 $fontSizeStart: 0.1;
 $fontSizeEnd  : 6;
 $fontUnit: 'rem';

 @each $breakpoint in map-keys($grid-breakpoints) 
 {
	@include media-breakpoint-up($breakpoint) 
	{
		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
		$i: $fontSizeStart;
		@while $i <= $fontSizeEnd
		{
		   $iSafe: str-replace(to-string($i), '.', '_');
		   
		   .fs#{$infix}-#{$iSafe}
		   {
			   font-size: #{$i}#{$fontUnit};
		   }
		   
		   $i: $i + 0.1;
		}
	
	}
}

.fs-0_1 {
	font-size: .1rem
}

.fs-0_2 {
	font-size: .2rem
}

.fs-0_3 {
	font-size: .3rem
}

.fs-0_4 {
	font-size: .4rem
}

.fs-0_5 {
	font-size: .5rem
}

.fs-0_6 {
	font-size: .6rem
}

.fs-0_7 {
	font-size: .7rem
}

.fs-0_8 {
	font-size: .8rem
}

.fs-0_9 {
	font-size: .9rem
}

.fs-1 {
	font-size: 1rem
}

.fs-1_1 {
	font-size: 1.1rem
}

.fs-1_2 {
	font-size: 1.2rem
}

.fs-1_3 {
	font-size: 1.3rem
}

.fs-1_4 {
	font-size: 1.4rem
}

.fs-1_5 {
	font-size: 1.5rem
}

.fs-1_6 {
	font-size: 1.6rem
}

.fs-1_7 {
	font-size: 1.7rem
}

.fs-1_8 {
	font-size: 1.8rem
}

.fs-1_9 {
	font-size: 1.9rem
}

.fs-2 {
	font-size: 2rem
}

.fs-2_1 {
	font-size: 2.1rem
}

.fs-2_2 {
	font-size: 2.2rem
}

.fs-2_3 {
	font-size: 2.3rem
}

.fs-2_4 {
	font-size: 2.4rem
}

.fs-2_5 {
	font-size: 2.5rem
}

.fs-2_6 {
	font-size: 2.6rem
}

.fs-2_7 {
	font-size: 2.7rem
}

.fs-2_8 {
	font-size: 2.8rem
}

.fs-2_9 {
	font-size: 2.9rem
}

.fs-3 {
	font-size: 3rem
}

.fs-3_1 {
	font-size: 3.1rem
}

.fs-3_2 {
	font-size: 3.2rem
}

.fs-3_3 {
	font-size: 3.3rem
}

.fs-3_4 {
	font-size: 3.4rem
}

.fs-3_5 {
	font-size: 3.5rem
}

.fs-3_6 {
	font-size: 3.6rem
}

.fs-3_7 {
	font-size: 3.7rem
}

.fs-3_8 {
	font-size: 3.8rem
}

.fs-3_9 {
	font-size: 3.9rem
}

.fs-4 {
	font-size: 4rem
}

.fs-4_1 {
	font-size: 4.1rem
}

.fs-4_2 {
	font-size: 4.2rem
}

.fs-4_3 {
	font-size: 4.3rem
}

.fs-4_4 {
	font-size: 4.4rem
}

.fs-4_5 {
	font-size: 4.5rem
}

.fs-4_6 {
	font-size: 4.6rem
}

.fs-4_7 {
	font-size: 4.7rem
}

.fs-4_8 {
	font-size: 4.8rem
}

.fs-4_9 {
	font-size: 4.9rem
}

.fs-5 {
	font-size: 5rem
}

.fs-5_1 {
	font-size: 5.1rem
}

.fs-5_2 {
	font-size: 5.2rem
}

.fs-5_3 {
	font-size: 5.3rem
}

.fs-5_4 {
	font-size: 5.4rem
}

.fs-5_5 {
	font-size: 5.5rem
}

.fs-5_6 {
	font-size: 5.6rem
}

.fs-5_7 {
	font-size: 5.7rem
}

.fs-5_8 {
	font-size: 5.8rem
}

.fs-5_9 {
	font-size: 5.9rem
}

.fs-6 {
	font-size: 6rem
}

@media (min-width: 576px) {
	.fs-sm-0_1 {
		font-size: .1rem
	}
	.fs-sm-0_2 {
		font-size: .2rem
	}
	.fs-sm-0_3 {
		font-size: .3rem
	}
	.fs-sm-0_4 {
		font-size: .4rem
	}
	.fs-sm-0_5 {
		font-size: .5rem
	}
	.fs-sm-0_6 {
		font-size: .6rem
	}
	.fs-sm-0_7 {
		font-size: .7rem
	}
	.fs-sm-0_8 {
		font-size: .8rem
	}
	.fs-sm-0_9 {
		font-size: .9rem
	}
	.fs-sm-1 {
		font-size: 1rem
	}
	.fs-sm-1_1 {
		font-size: 1.1rem
	}
	.fs-sm-1_2 {
		font-size: 1.2rem
	}
	.fs-sm-1_3 {
		font-size: 1.3rem
	}
	.fs-sm-1_4 {
		font-size: 1.4rem
	}
	.fs-sm-1_5 {
		font-size: 1.5rem
	}
	.fs-sm-1_6 {
		font-size: 1.6rem
	}
	.fs-sm-1_7 {
		font-size: 1.7rem
	}
	.fs-sm-1_8 {
		font-size: 1.8rem
	}
	.fs-sm-1_9 {
		font-size: 1.9rem
	}
	.fs-sm-2 {
		font-size: 2rem
	}
	.fs-sm-2_1 {
		font-size: 2.1rem
	}
	.fs-sm-2_2 {
		font-size: 2.2rem
	}
	.fs-sm-2_3 {
		font-size: 2.3rem
	}
	.fs-sm-2_4 {
		font-size: 2.4rem
	}
	.fs-sm-2_5 {
		font-size: 2.5rem
	}
	.fs-sm-2_6 {
		font-size: 2.6rem
	}
	.fs-sm-2_7 {
		font-size: 2.7rem
	}
	.fs-sm-2_8 {
		font-size: 2.8rem
	}
	.fs-sm-2_9 {
		font-size: 2.9rem
	}
	.fs-sm-3 {
		font-size: 3rem
	}
	.fs-sm-3_1 {
		font-size: 3.1rem
	}
	.fs-sm-3_2 {
		font-size: 3.2rem
	}
	.fs-sm-3_3 {
		font-size: 3.3rem
	}
	.fs-sm-3_4 {
		font-size: 3.4rem
	}
	.fs-sm-3_5 {
		font-size: 3.5rem
	}
	.fs-sm-3_6 {
		font-size: 3.6rem
	}
	.fs-sm-3_7 {
		font-size: 3.7rem
	}
	.fs-sm-3_8 {
		font-size: 3.8rem
	}
	.fs-sm-3_9 {
		font-size: 3.9rem
	}
	.fs-sm-4 {
		font-size: 4rem
	}
	.fs-sm-4_1 {
		font-size: 4.1rem
	}
	.fs-sm-4_2 {
		font-size: 4.2rem
	}
	.fs-sm-4_3 {
		font-size: 4.3rem
	}
	.fs-sm-4_4 {
		font-size: 4.4rem
	}
	.fs-sm-4_5 {
		font-size: 4.5rem
	}
	.fs-sm-4_6 {
		font-size: 4.6rem
	}
	.fs-sm-4_7 {
		font-size: 4.7rem
	}
	.fs-sm-4_8 {
		font-size: 4.8rem
	}
	.fs-sm-4_9 {
		font-size: 4.9rem
	}
	.fs-sm-5 {
		font-size: 5rem
	}
	.fs-sm-5_1 {
		font-size: 5.1rem
	}
	.fs-sm-5_2 {
		font-size: 5.2rem
	}
	.fs-sm-5_3 {
		font-size: 5.3rem
	}
	.fs-sm-5_4 {
		font-size: 5.4rem
	}
	.fs-sm-5_5 {
		font-size: 5.5rem
	}
	.fs-sm-5_6 {
		font-size: 5.6rem
	}
	.fs-sm-5_7 {
		font-size: 5.7rem
	}
	.fs-sm-5_8 {
		font-size: 5.8rem
	}
	.fs-sm-5_9 {
		font-size: 5.9rem
	}
	.fs-sm-6 {
		font-size: 6rem
	}
}

@media (min-width: 768px) {
	.fs-md-0_1 {
		font-size: .1rem
	}
	.fs-md-0_2 {
		font-size: .2rem
	}
	.fs-md-0_3 {
		font-size: .3rem
	}
	.fs-md-0_4 {
		font-size: .4rem
	}
	.fs-md-0_5 {
		font-size: .5rem
	}
	.fs-md-0_6 {
		font-size: .6rem
	}
	.fs-md-0_7 {
		font-size: .7rem
	}
	.fs-md-0_8 {
		font-size: .8rem
	}
	.fs-md-0_9 {
		font-size: .9rem
	}
	.fs-md-1 {
		font-size: 1rem
	}
	.fs-md-1_1 {
		font-size: 1.1rem
	}
	.fs-md-1_2 {
		font-size: 1.2rem
	}
	.fs-md-1_3 {
		font-size: 1.3rem
	}
	.fs-md-1_4 {
		font-size: 1.4rem
	}
	.fs-md-1_5 {
		font-size: 1.5rem
	}
	.fs-md-1_6 {
		font-size: 1.6rem
	}
	.fs-md-1_7 {
		font-size: 1.7rem
	}
	.fs-md-1_8 {
		font-size: 1.8rem
	}
	.fs-md-1_9 {
		font-size: 1.9rem
	}
	.fs-md-2 {
		font-size: 2rem
	}
	.fs-md-2_1 {
		font-size: 2.1rem
	}
	.fs-md-2_2 {
		font-size: 2.2rem
	}
	.fs-md-2_3 {
		font-size: 2.3rem
	}
	.fs-md-2_4 {
		font-size: 2.4rem
	}
	.fs-md-2_5 {
		font-size: 2.5rem
	}
	.fs-md-2_6 {
		font-size: 2.6rem
	}
	.fs-md-2_7 {
		font-size: 2.7rem
	}
	.fs-md-2_8 {
		font-size: 2.8rem
	}
	.fs-md-2_9 {
		font-size: 2.9rem
	}
	.fs-md-3 {
		font-size: 3rem
	}
	.fs-md-3_1 {
		font-size: 3.1rem
	}
	.fs-md-3_2 {
		font-size: 3.2rem
	}
	.fs-md-3_3 {
		font-size: 3.3rem
	}
	.fs-md-3_4 {
		font-size: 3.4rem
	}
	.fs-md-3_5 {
		font-size: 3.5rem
	}
	.fs-md-3_6 {
		font-size: 3.6rem
	}
	.fs-md-3_7 {
		font-size: 3.7rem
	}
	.fs-md-3_8 {
		font-size: 3.8rem
	}
	.fs-md-3_9 {
		font-size: 3.9rem
	}
	.fs-md-4 {
		font-size: 4rem
	}
	.fs-md-4_1 {
		font-size: 4.1rem
	}
	.fs-md-4_2 {
		font-size: 4.2rem
	}
	.fs-md-4_3 {
		font-size: 4.3rem
	}
	.fs-md-4_4 {
		font-size: 4.4rem
	}
	.fs-md-4_5 {
		font-size: 4.5rem
	}
	.fs-md-4_6 {
		font-size: 4.6rem
	}
	.fs-md-4_7 {
		font-size: 4.7rem
	}
	.fs-md-4_8 {
		font-size: 4.8rem
	}
	.fs-md-4_9 {
		font-size: 4.9rem
	}
	.fs-md-5 {
		font-size: 5rem
	}
	.fs-md-5_1 {
		font-size: 5.1rem
	}
	.fs-md-5_2 {
		font-size: 5.2rem
	}
	.fs-md-5_3 {
		font-size: 5.3rem
	}
	.fs-md-5_4 {
		font-size: 5.4rem
	}
	.fs-md-5_5 {
		font-size: 5.5rem
	}
	.fs-md-5_6 {
		font-size: 5.6rem
	}
	.fs-md-5_7 {
		font-size: 5.7rem
	}
	.fs-md-5_8 {
		font-size: 5.8rem
	}
	.fs-md-5_9 {
		font-size: 5.9rem
	}
	.fs-md-6 {
		font-size: 6rem
	}
}

@media (min-width: 992px) {
	.fs-lg-0_1 {
		font-size: .1rem
	}
	.fs-lg-0_2 {
		font-size: .2rem
	}
	.fs-lg-0_3 {
		font-size: .3rem
	}
	.fs-lg-0_4 {
		font-size: .4rem
	}
	.fs-lg-0_5 {
		font-size: .5rem
	}
	.fs-lg-0_6 {
		font-size: .6rem
	}
	.fs-lg-0_7 {
		font-size: .7rem
	}
	.fs-lg-0_8 {
		font-size: .8rem
	}
	.fs-lg-0_9 {
		font-size: .9rem
	}
	.fs-lg-1 {
		font-size: 1rem
	}
	.fs-lg-1_1 {
		font-size: 1.1rem
	}
	.fs-lg-1_2 {
		font-size: 1.2rem
	}
	.fs-lg-1_3 {
		font-size: 1.3rem
	}
	.fs-lg-1_4 {
		font-size: 1.4rem
	}
	.fs-lg-1_5 {
		font-size: 1.5rem
	}
	.fs-lg-1_6 {
		font-size: 1.6rem
	}
	.fs-lg-1_7 {
		font-size: 1.7rem
	}
	.fs-lg-1_8 {
		font-size: 1.8rem
	}
	.fs-lg-1_9 {
		font-size: 1.9rem
	}
	.fs-lg-2 {
		font-size: 2rem
	}
	.fs-lg-2_1 {
		font-size: 2.1rem
	}
	.fs-lg-2_2 {
		font-size: 2.2rem
	}
	.fs-lg-2_3 {
		font-size: 2.3rem
	}
	.fs-lg-2_4 {
		font-size: 2.4rem
	}
	.fs-lg-2_5 {
		font-size: 2.5rem
	}
	.fs-lg-2_6 {
		font-size: 2.6rem
	}
	.fs-lg-2_7 {
		font-size: 2.7rem
	}
	.fs-lg-2_8 {
		font-size: 2.8rem
	}
	.fs-lg-2_9 {
		font-size: 2.9rem
	}
	.fs-lg-3 {
		font-size: 3rem
	}
	.fs-lg-3_1 {
		font-size: 3.1rem
	}
	.fs-lg-3_2 {
		font-size: 3.2rem
	}
	.fs-lg-3_3 {
		font-size: 3.3rem
	}
	.fs-lg-3_4 {
		font-size: 3.4rem
	}
	.fs-lg-3_5 {
		font-size: 3.5rem
	}
	.fs-lg-3_6 {
		font-size: 3.6rem
	}
	.fs-lg-3_7 {
		font-size: 3.7rem
	}
	.fs-lg-3_8 {
		font-size: 3.8rem
	}
	.fs-lg-3_9 {
		font-size: 3.9rem
	}
	.fs-lg-4 {
		font-size: 4rem
	}
	.fs-lg-4_1 {
		font-size: 4.1rem
	}
	.fs-lg-4_2 {
		font-size: 4.2rem
	}
	.fs-lg-4_3 {
		font-size: 4.3rem
	}
	.fs-lg-4_4 {
		font-size: 4.4rem
	}
	.fs-lg-4_5 {
		font-size: 4.5rem
	}
	.fs-lg-4_6 {
		font-size: 4.6rem
	}
	.fs-lg-4_7 {
		font-size: 4.7rem
	}
	.fs-lg-4_8 {
		font-size: 4.8rem
	}
	.fs-lg-4_9 {
		font-size: 4.9rem
	}
	.fs-lg-5 {
		font-size: 5rem
	}
	.fs-lg-5_1 {
		font-size: 5.1rem
	}
	.fs-lg-5_2 {
		font-size: 5.2rem
	}
	.fs-lg-5_3 {
		font-size: 5.3rem
	}
	.fs-lg-5_4 {
		font-size: 5.4rem
	}
	.fs-lg-5_5 {
		font-size: 5.5rem
	}
	.fs-lg-5_6 {
		font-size: 5.6rem
	}
	.fs-lg-5_7 {
		font-size: 5.7rem
	}
	.fs-lg-5_8 {
		font-size: 5.8rem
	}
	.fs-lg-5_9 {
		font-size: 5.9rem
	}
	.fs-lg-6 {
		font-size: 6rem
	}
}

@media (min-width: 1200px) {
	.fs-xl-0_1 {
		font-size: .1rem
	}
	.fs-xl-0_2 {
		font-size: .2rem
	}
	.fs-xl-0_3 {
		font-size: .3rem
	}
	.fs-xl-0_4 {
		font-size: .4rem
	}
	.fs-xl-0_5 {
		font-size: .5rem
	}
	.fs-xl-0_6 {
		font-size: .6rem
	}
	.fs-xl-0_7 {
		font-size: .7rem
	}
	.fs-xl-0_8 {
		font-size: .8rem
	}
	.fs-xl-0_9 {
		font-size: .9rem
	}
	.fs-xl-1 {
		font-size: 1rem
	}
	.fs-xl-1_1 {
		font-size: 1.1rem
	}
	.fs-xl-1_2 {
		font-size: 1.2rem
	}
	.fs-xl-1_3 {
		font-size: 1.3rem
	}
	.fs-xl-1_4 {
		font-size: 1.4rem
	}
	.fs-xl-1_5 {
		font-size: 1.5rem
	}
	.fs-xl-1_6 {
		font-size: 1.6rem
	}
	.fs-xl-1_7 {
		font-size: 1.7rem
	}
	.fs-xl-1_8 {
		font-size: 1.8rem
	}
	.fs-xl-1_9 {
		font-size: 1.9rem
	}
	.fs-xl-2 {
		font-size: 2rem
	}
	.fs-xl-2_1 {
		font-size: 2.1rem
	}
	.fs-xl-2_2 {
		font-size: 2.2rem
	}
	.fs-xl-2_3 {
		font-size: 2.3rem
	}
	.fs-xl-2_4 {
		font-size: 2.4rem
	}
	.fs-xl-2_5 {
		font-size: 2.5rem
	}
	.fs-xl-2_6 {
		font-size: 2.6rem
	}
	.fs-xl-2_7 {
		font-size: 2.7rem
	}
	.fs-xl-2_8 {
		font-size: 2.8rem
	}
	.fs-xl-2_9 {
		font-size: 2.9rem
	}
	.fs-xl-3 {
		font-size: 3rem
	}
	.fs-xl-3_1 {
		font-size: 3.1rem
	}
	.fs-xl-3_2 {
		font-size: 3.2rem
	}
	.fs-xl-3_3 {
		font-size: 3.3rem
	}
	.fs-xl-3_4 {
		font-size: 3.4rem
	}
	.fs-xl-3_5 {
		font-size: 3.5rem
	}
	.fs-xl-3_6 {
		font-size: 3.6rem
	}
	.fs-xl-3_7 {
		font-size: 3.7rem
	}
	.fs-xl-3_8 {
		font-size: 3.8rem
	}
	.fs-xl-3_9 {
		font-size: 3.9rem
	}
	.fs-xl-4 {
		font-size: 4rem
	}
	.fs-xl-4_1 {
		font-size: 4.1rem
	}
	.fs-xl-4_2 {
		font-size: 4.2rem
	}
	.fs-xl-4_3 {
		font-size: 4.3rem
	}
	.fs-xl-4_4 {
		font-size: 4.4rem
	}
	.fs-xl-4_5 {
		font-size: 4.5rem
	}
	.fs-xl-4_6 {
		font-size: 4.6rem
	}
	.fs-xl-4_7 {
		font-size: 4.7rem
	}
	.fs-xl-4_8 {
		font-size: 4.8rem
	}
	.fs-xl-4_9 {
		font-size: 4.9rem
	}
	.fs-xl-5 {
		font-size: 5rem
	}
	.fs-xl-5_1 {
		font-size: 5.1rem
	}
	.fs-xl-5_2 {
		font-size: 5.2rem
	}
	.fs-xl-5_3 {
		font-size: 5.3rem
	}
	.fs-xl-5_4 {
		font-size: 5.4rem
	}
	.fs-xl-5_5 {
		font-size: 5.5rem
	}
	.fs-xl-5_6 {
		font-size: 5.6rem
	}
	.fs-xl-5_7 {
		font-size: 5.7rem
	}
	.fs-xl-5_8 {
		font-size: 5.8rem
	}
	.fs-xl-5_9 {
		font-size: 5.9rem
	}
	.fs-xl-6 {
		font-size: 6rem
	}
}

http://bit.ly/2X0laAJ

	<div class="fs-2 fs-sm-3 fs-md-4 fs-lg-5 fs-xl-6" style="padding: 1rem; margin: 1rem;">
		<div style="color: red;" class="d-block d-sm-none">xs</div>
		<div style="color: blue;" class="d-none d-sm-block d-md-none">sm</div>
		<div style="color: green;" class="d-none d-md-block d-lg-none">md</div>
		<div style="color: purple;" class="d-none d-lg-block d-xl-none">lg</div>
		<div style="color: gold;" class="d-none d-xl-block">xl</div>
		<div>
			Test velikosti fontu
		</div>:)
	</div>

以上是关于html Bootstrap 4字体大小的优秀助手的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 更改导航栏字体大小

如何更改 Bootstrap 的全局默认字体大小？

为啥 Twitter Bootstrap 使用像素作为字体大小？

如何在 rem 中实现响应式字体大小 - bootstrap

CSS / Bootstrap - 字体大小未正确从计算机调整到移动设备：移动设备上的字体看起来很小

html Bootstrap源模态助手