【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>
相关推荐
爱吃青椒不爱吃西红柿‍️1 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
一棵开花的树,枝芽无限靠近你4 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜7 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑15 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX16 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
小行星12526 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12533 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00142 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿1 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript