【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>
相关推荐
whysqwhw1 天前
鸿蒙工程版本与设备版本不匹配
前端
gnip1 天前
http缓存
前端·javascript
我不只是切图仔1 天前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
该用户已不存在1 天前
macOS是开发的终极进化版吗?
前端·后端
小豆包api1 天前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
布列瑟农的星空1 天前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天1 天前
Vue3 实现 B站 视差 动画
前端
KenXu1 天前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮1 天前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界1 天前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html