【CSS】css如何实现字体大小小于12px?

【CSS】css如何实现字体大小小于12px?

  • 问题
  • 解决方案
    • [transform: scale(0.5)(常用)](#transform: scale(0.5)(常用))
    • [SVG 矢量图设置text](#SVG 矢量图设置text)

问题

文字需要显示为12px,但是小于12px的,浏览器是显示不来的

解决方案

transform: scale(0.5)(常用)

javascript 复制代码
	#box {
		font-size: 12px;
	}
	#box div {
		transform: scale(0.5);
		/* 	transform-origin属性表示在对元素进行变换的时候,设置围绕哪个点进行变化的。默认情况,变换的
		原点在元素的中心点,即是元素X轴和Y轴的50%处 */
		transform-origin: 0% 100%;
		 // 解决兼容性问题
	    -webkit-transform: scale(0.5);
	    -webkit-transform-origin: 100% 100%;
	}

	<div id="box">
		<div>
			字体大小小于12px
		</div> 字体大小为12px
	</div>

SVG 矢量图设置text

  • x 表示文字左对齐位置,一般都为0,y 表示字体大小,注意,修改字体颜色是设置fill
javascript 复制代码
	#box {
		font-size: 12px;
	}
	svg {
		width: 100px;
		/*  需要根据实际情况调整 */
		height: 100px;
		/* 需要根据实际情况调整 */
		background-color: red;
	}
	<div id="box">
		<svg>
			<text x="0" y="10"  fill='pink'>我是10px字体大小 hello world!</text>>
		</svg>
		字体大小为12px
	</div>
相关推荐
IT_陈寒1 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿1 小时前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑2 小时前
「AI」网站模版,效果如何?
前端·后端·产品